TipsforwritingbettercodeinReact，关于Linting、propTypes、PureComponent等几个要点，帮助你写出更好的代码。LiteralReact使创建交互式UI变得毫不费力。为应用程序中的每个状态设计简单的视图，React将在数据更改时高效地更新和呈现正确的组件。在这篇文章中，我将向您展示一些技巧，帮助您成为更好的React开发人员。我将涵盖从工具到实际代码风格的一系列内容，这可以帮助您提高React技能💪主要有以下几个方面：代码提示。使用propTypes和defaultProps。知道何时创建新组件。知道何时编写组件、纯组件和无状态功能组件。使用React开发工具。在代码中使用内联条件语句。使用Snippet，一个代码片段库。了解React的工作原理。代码提示对于编写更好的代码来说真正重要的一件事是好的提示。因为如果我们有一套好的Linting规则，您的代码编辑器将能够捕获任何可能导致代码出现问题的内容。但不仅仅是捕捉问题，你的ESLint设置会不断地教你React最佳实践。importreactfrom'react';/*Otherimports*//*Code*/exportdefaultclassAppextendsReact.Component{render(){const{userIsLoaded,user}=this.props;if(!userIsLoaded)return;return(/*代码*/)}}以上面的代码片段为例。假设您想在render()函数中引用一个名为this.props.hello的新属性。你的linter会立即变红并说：道具验证中缺少“你好”（反应/道具类型）Linting将帮助你了解React中的最佳实践并塑造你对代码的理解。很快，您将开始在编写代码时避免错误。你可以去ESLint，它为JavaScript设置了注释工具，或者你可以使用Airbnb的JavaScript风格指南。您还可以安装ReactESLint包。基本上这些代码提示将帮助您纠正在编写代码时遇到的问题。propTypes和defaultProps在前面的章节中，我谈到了当我尝试传递一个未经验证的prop时我的linter的行为：)}.isRequired,}在这里，如果我们说userIsLoaded不是必需的，那么我们需要在代码中添加：staticdefaultProps={userIsLoaded:false,}所以，每当我们的组件使用APropType时，我们都需要设置它的propType。例如，我们需要告诉ReactuserIsLoaded始终是一个布尔值。确保在每个使用props的组件上设置propTypes和defaultProps会有很大帮助。当这些道具没有得到他们期望的数据时，你的错误日志会让你知道你要么传递了错误的东西，要么期望的东西不存在，这使得查找错误变得容易得多，尤其是当你编写大量可重用的组件。它还使它们更加自我记录。注意：与早期版本的React不同，proptypes不再包含在React中，您必须将它们作为依赖项单独添加到您的项目中。单击此处了解更多信息：https://www.npmjs.com/package/prop-types了解何时创建新组件字符串,}).isRequired,}staticdefaultProps={userIsLoaded:false,}render(){const{userIsLoaded,user}=this.props;if(!userIsLoaded)return;return(
{isRole('affiliate',user={user._id}&&} 