9 个有用的小技巧帮助您在 React 中编写更好的代码: 使用 Linting,propTypes,PureComponent 等.
React 使得创建交互式 UI 变得轻而易举. 为应用程序中的每个状态设计简单的视图, 当数据发生变化时, React 将有效地更新和呈现正确的组件.
在这篇文章中, 我将向您展示一些有助于您成为更好的 React Developer 的技巧.
我将介绍从工具到实际代码风格的一系列内容, 它可以帮助您提高 React 的技能.
Linting
对于编写更好的代码而言, 一件非常重要的事情就是良好的 linting.
因为如果我们设置了一套良好的 linting 规则, 你的代码编辑器将能够捕获任何可能导致代码出现问题的内容.
而且不仅仅是捕捉问题, 您的 ES Lint 设置将不断让您了解 React 最佳实践.
- import react from 'react';
- /* Other imports */
- /* Code */
- export default class App extends React.Component {
- render() {
- const {userIsLoaded, user} = this.props;
- if (!userIsLoaded) return <Loader />;
- return (
- /* Code */
- )
- }
- }
就拿上面的代码片段来说, 假设您要在 render()函数中引用一个名为 this.props.hello 的新属性. 你的 linter 会立即变红并提示:
'hello' is missing in props validation (react/prop-types)
Linting 将帮助您了解 React 中的最佳实践并修正您对代码的理解. 很快, 您将在编写代码时避免犯错.
您可以使用 ESLint https://eslint.org/ 来为 JavaScript 设置一个 linting 工具, 也可以使用 Airbnb 的 JavaScript 样式指南 https://github.com/airbnb/javascript . 您还可以安装 React ESLint 包 https://www.npmjs.com/package/eslint-plugin-react .
propTypes 和 defaultProps
在前面的部分中, 我谈到了当我尝试传递未经验证的 prop 时我的 linter 是如何起作用的.
- static propTypes = {
- userIsLoaded: PropTypes.boolean.isRequired,
- user: PropTypes.shape({
- _id: PropTypes.string,
- )}.isRequired,
- }
在这里, 如果我们不需要 userIsLoaded, 那么我们需要将以下代码添加到我们的代码中:
- static defaultProps = {
- userIsLoaded: false,
- }
因此, 只要是在组件中使用的 PropType, 我们就需要为它设置一个 propType. 就如在上述示例中, 我们需要告诉 React,userIsLoaded 总是一个布尔值.
再次, 如果我们不传 userIsLoaded 这个参数, 那么我们将需要一个默认的 Prop. 如果我们传 userIsLoaded, 那么我们不必为它定义默认 Prop. 但是, 该规则还规定您不应该有像 object 或 array 这样的模糊 propType.
这就是为什么我们使用 shape 来验证 user, 其中包含另一个 id, 它的 propType 为 string, 并且整个 user 对象是必传的参数.
确保在每个使用 prop 的组件上设置 propTypes 和 defaultProps 将会有很长的路要走.
那些 prop 没有得到他们期望的数据的那一刻, 你的错误日志会让你知道你要么传递了错误的东西, 要么没有传递必须要传的 prop, 这使得错误更容易被定位, 特别是如果你是编写了大量可重用的组件. propTypes 和 defaultProps 还使这些组件更加 self-documenting.
注意:
与早期版本的 React 不同(译者注: react V15.5 以前内置 proptypes),React 中不再内置 proptypes, 您必须将它们作为依赖项单独添加到项目中. 点击 prop-types 的 NPM 文档 https://www.npmjs.com/package/prop-types 了解更多.
了解何时需要写新组件
- export default class Profile extends PureComponent {
- static propTypes = {
- userIsLoaded: PropTypes.bool,
- user: PropTypes.shape({
- _id: PropTypes.string,
- }).isRequired,
- }
- static defaultProps = {
- userIsLoaded: false,
- }
- render() {
- const { userIsLoaded, user } = this.props;
- if (!userIsLoaded) return <Loaded />;
- return (
- <div>
- <div className="two-col">
- <section>
- <MyOrders userId={user.id} />
- <My Downloads userId={user._id} />
- </section>
- <aside>
- <MySubscriptions user={user} />
- <MyVotes user={user} />
- </aside>
- </div>
- <div className="one-col">
- {isRole('affiliate', user={user._id} &&
- <MyAffiliateInfo userId={user._id} />
- }
- </div>
- </div>
- )
- }
- }
在上面代码中我有一个名为 Profile 的组件. 在此组件中有其他组件, 如 MyOrder 和 MyDownloads. 现在我可以在这里内联编写所有这些组件, 因为我只是从同一个地方 (user) 提取数据, 将所有这些较小的组件转换为一个巨大的组件.
虽然没有关于何时将代码移动到组件中的任何硬性规定, 但你需要问问你自己: * 您的代码功能是否变得笨拙? * 它只表示了自己的东西吗? * 你的代码需要被复用吗?
如果这些问题的答案中的任何一个是肯定的, 那么您需要将代码移动到组件中.
请记住, 没有人希望在您的代码中看到一个巨大的 200-300 行的组件.
组件 vs PureComponent vs 无状态函数组件
对于 React 开发人员来说, 知道何时在代码中使用 Component,PureComponent 和无状态函数组件是非常重要的.
您可能已经注意到在上面的代码片段中, 我没有将 Profile 声明为 Component, 而是将其称为 PureComponent.
首先, 让我们来了解一下无状态函数组件.
无状态函数组件
- const Billboard = () => (
- <ZoneBlack>
- <Heading>React</Heading>
- <div className="billboard_product">
- <Link className="billboard_product-image" to="/">
- <img alt="#" src="#">
- </Link>
- <div className="billboard_product-details">
- <h3 className="sub">React</h3>
- <p>Lorem Ipsum</p>
- </div>
- </div>
- </ZoneBlack>
- );
无状态函数组件是您的武器库中最常见的组件类型之一. 它们为我们提供了一种简洁明了的方法来创建一个不使用任何 state,refs 和生命周期方法的组件.
无状态函数组件的思想是它是没有 state 的, 只是一个函数. 所以最重要的是你将组件定义为一个返回一些数据的常量函数.
简而言之, 无状态函数组件仅仅是一个返回 JSX 的函数.
PureComponents
通常, 当组件获得新的 prop 时, React 将重新渲染该组件. 但有时候, 一个组件获得一些尚未真正改变的新 prop, 但 React 仍会触发重新渲染.
使用 PureComponent 将帮助您防止这种不必要的重新渲染. 如果 prop 是字符串或布尔值, 当它发生变化时, PureComponent 将识别出这一点. 但是如果是对象中的属性发生变化, PureComponent 将不会触发重新渲染.
那么你怎么知道 React 何时触发不必要的重新渲染? 你可以查看这个令人惊喜的 React 包, 叫做 Why You You Update https://github.com/maicki/why-did-you-update . 当发生可能不必要的重新渲染时, 此包将在控制台中通知您.
一旦识别出不必要的重新渲染, 就可以使用 PureComponent 而不是 Component 来防止不必要的重新渲染.
使用 Bit 来组织, 共享和重用组件
Bit https://bitsrc.io/ 是一个很棒的工具, 可以将 UI 组件转换为可在不同应用程序中共享, 开发和同步的构建块.
您可以利用 Bit 在共享集合中组织团队的组件, 使其被团队成员共享, 利用她的实时 playground, 单独测试等特性来让您共享的组件更好用.
通过隔离和共享组件, 您可以加快应用程序的开发速度和团队的速度, 同时减少重复的代码. 它是 OSS,OSS 是免费的, 所以请随意尝试一下.
使用 React Dev Tools
如果您真的想成为专业的 React Developer, 那么您应该已经经常在开发过程中使用 React Dev Tools.
如果您使用过 React, 那么您可能很需要 React Dev Tools.
React Dev Tools 适用于所有主流浏览器, 例如 Chrome 和 Firefox.
通过 React Dev Tools, 您可以访问 React 应用程序的整个结构, 并允许您查看应用程序中使用的所有 state 和 props.
React Dev Tools 是探索 React 组件并帮助诊断应用程序中任何问题的绝佳方式.
使用内联条件语句
这个 tip 可能会引起一些争议, 但我发现使用内联条件语句可以让我的 React 代码清爽很多.
看看这段代码:
- <div className="one-col">
- {isRole('affiliate', user._id) &&
- <MyAffiliateInfo userId={user._id} />
- }
- </div>
上面代码中, isRole 是一个基本函数, 用于检查一个人是否是 "affiliate", 然后还有一个名为 < MyAffiliateInfo />的组件.
这样写有什么好处:
我不需要写一个单独的函数.
我不需要在我的渲染函数中写另一个 "if" 语句.
我不需要在组件的其他位置创建 "link".
编写内联条件语句非常简单. 首先编写条件语句, 如果条件语句的结果是 true, 组件将渲染 < MyAffiliateInfo />组件.
接下来, 我们使用 && 将此条件语句与 < MyAffiliateInfo />链接. 这样, 只有在条件语句返回 true 时才会呈现该组件.
尽可能使用 Snippet Libraries
打开代码编辑器(我使用 VS Code), 并创建一个. JS 文件. 键入 rc 时, 在此文件中, 您将看到如下内容:
点击 enter 键, 你会立即得到这个:
这些代码片段的优点在于它们不仅可以潜在地帮助您规避 bug, 还可以帮助您识别最新和最好的语法.
您可以在代码编辑器中安装许多不同的代码片段. 我用于 VS Code 的那个叫做 ES7 React / Redux / React-Native / JS Snippets.
React Internals - 了解 React 的工作原理
React Internals 分五部分讲解了 React 的基础知识, 并最终帮助我成为一个更好的 React Developer!
如果您遇到可能无法完全理解的问题, 或者您想要了解 React 的工作原理, 那么 React Internals 将帮助您了解何时以及如何在 React 中做正确的事情.
这对那些有想法但又不知道在哪里执行代码的人特别有用. 了解 React 如何工作的基础知识将帮助您成为更好的 React 开发人员.
快速回顾
linting: 使用 ES Lint,Airbnb 的 JavaScript 样式指南 或者 ESLint 的 React 插件.
使用 propTypes 和 defaultProps.
了解何时需要写新组件.
知道何时编写 Component,PureComponent 和无状态函数组件.
使用 React Dev Tools.
在代码中使用内联条件语句.
使用 Snippet Libraries 可以节省大量浪费在样板代码上的时间.
了解 React 如何与 React Internals 协同工作.
使用 Bit / StoryBook 等工具来改进组件开发工作流程
来源: https://juejin.im/post/5bcef950518825771910edc4