wxya（个人网站）提升整洁度技巧
21 Best Practices for a Clean React Project清洁反应项目的21个最佳实践#react反应#javascriptJavaScript#programming编程#awsAWS
To read more articles like this, 阅读更多这样的文章 visit my blog访问我的博客
React is very unopinionated about how things should be structured. This is exactly why it’s our responsibility to keep our projects clean and maintainable.
React对事物应该如何结构化非常没有主见。这就是为什么我们有责任保持我们的项目干净和可维护。
Today, we will discuss some best practices to improve your React application’s health. These rules are widely accepted. As such, having this knowledge is imperative.
今天，我们将讨论一些改善React应用程序健康状况的最佳实践。这些规则被广泛接受。因此，掌握这些知识是必要的。
Everything will be shown with code, so buckle up!
一切都将显示与代码，所以扣起来！
1. Use JSX ShortHand 1.使用JSX速记
Try to use JSX shorthand for passing boolean variables. Let’s say you want to control the title visibility of a Navbar component.
尝试使用JSX简写来传递布尔变量。假设您想要控制导航栏组件的标题可见性。
Bad 坏
Good 好
2. Use Ternary Operators 2.使用三进制运算符
Let’s say you want to show a user’s details based on role.
假设您希望基于角色显示用户的详细信息。
Bad 坏
Good 好
3. Take Advantage of Object Literals 3.利用对象文字
Object literals can help make our code more readable. Let’s say you want to show three types of users based on their roles. You can’t use ternary because the number of options exceeds two.
对象字面量可以帮助我们的代码更具可读性。假设您希望根据角色显示三种类型的用户。你不能使用三进制，因为选项的数量超过了两个。
Bad 坏
Good 好
It looks much better now.现在看起来好多了。
4. Use Fragments 4.使用片段
Always use
Fragment over Div. It keeps the code clean and is also beneficial for performance because one less node is created in the virtual DOM.始终使用
Fragment而不是Div。它保持了代码的简洁性，并且还有利于提高性能，因为在虚拟DOM中少创建了一个节点。Bad 坏
Good 好
5. Don't Define a Function Inside Render 5.不要在Render内部定义函数
Don’t define a function inside render. Try to keep the logic inside render to an absolute minimum.
不要在render内部定义函数。尽量将render内部的逻辑保持在绝对最小值。
Bad 坏
Good 好
6. Use Memo 6.使用备忘录
React.PureComponent and Memo can significantly improve the performance of your application. They help us to avoid unnecessary rendering.React.PureComponent和Memo可以显著提高应用程序的性能。它们帮助我们避免不必要的渲染。Bad 坏
Although the child component should render only once because the value of count has nothing to do with the
ChildComponent . But, it renders each time you click on the button.尽管子组件应该只渲染一次，因为count的值与
ChildComponent无关。但是，每次单击按钮时都会呈现。
Good 好
Let’s edit the
ChildrenComponent to this:让我们将ChildrenComponent编辑为：Now, no matter how many times you click on the button, it will render only when necessary.
现在，无论您单击该按钮多少次，它都将仅在必要时进行渲染。
7. Put CSS in JavaScript 7.将CSS放入JavaScript
Avoid raw JavaScript when writing React applications because organizing CSS is far harder than organizing JS.
在编写React应用程序时避免使用原始JavaScript，因为组织CSS比组织JS要难得多。
Bad 坏
Good 好
8. Use Object Destructuring 8.使用对象解构
Use object destructuring to your advantage. Let’s say you need to show a user’s details.
使用对象解构你的优势。假设您需要显示用户的详细信息。
Bad 坏
Good 好
9. String Props Don’t Need Curly Braces 9.弦道具不需要卷曲的支架
When passing string props to a children component.
将字符串属性传递给子组件时。
Bad 坏
Good 好
10. Remove JS Code From JSX 10.从JSX中删除JS代码
Move any JS code out of JSX if that doesn’t serve any purpose of rendering or UI functionality.
将任何JS代码移出JSX，如果它不用于渲染或UI功能的任何目的。
Bad 坏
Good 好
11. Use Template Literals 11.使用模板文字
Use template literals to build large strings. Avoid using string concatenation. It’s nice and clean.
使用模板文字构建大字符串。避免使用字符串连接。很漂亮也很干净。
Bad 坏
Good好
12. Import in Order 12.按顺序导入
Always try to import things in a certain order. It improves code readability.
总是尝试按照一定的顺序导入内容。它提高了代码的可读性。
Bad 坏
Good 好
The rule of thumb is to keep the import order like this:
经验法则是保持这样的导入顺序：
- Built-in内置
- External外部
- Internal内部
So the example above becomes:所以上面的例子变成了：
13. Use Implicit return 13.使用隐式返回
Use the JavaScript feature implicit
return in writing beautiful code. Let’s say your function does a simple calculation and returns the result.使用JavaScript特性隐式
return来编写漂亮的代码。假设你的函数做了一个简单的计算并返回结果。Bad 坏
Good 好
14. Component Naming 14.组件命名
Always use PascalCase for components and camelCase for instances.
始终对组件使用PascalCase，对实例使用camelCase。
Bad 坏
Good 好
15. Reserved Prop Naming 15.保留道具命名
Don’t use DOM component prop names for passing props between components because others might not expect these names.
不要使用DOM组件属性名在组件之间传递属性，因为其他组件可能不需要这些名称。
Bad 坏
Good 好
16. Quotes 16.报价
Use double quotes for JSX attributes and single quotes for all other JS.
对JSX属性使用双引号，对所有其他JS使用单引号。
Bad 坏
Good 好
17. Prop Naming 17.道具命名
Always use camelCase for prop names or PascalCase if the prop value is a React component.
如果prop值是一个React组件，则始终使用camelCase作为prop名称或PascalCase。
Bad 坏
Good 好
18. JSX in Parentheses 18.括号中的JSX
If your component spans more than one line, always wrap it in parentheses.
如果组件跨越多行，请始终将其括在括号中。
Bad 坏
Good 好
19. Self-Closing Tags 19.自动关闭标签
If your component doesn’t have any children, then use self-closing tags. It improves readability.
如果您的组件没有任何子级，则使用自关闭标记。它提高了可读性。
Bad 坏
Good 好
20. Underscore in Method Name 20.方法名称中的下划线
Do not use underscores in any internal React method.
不要在任何内部React方法中使用下划线。
Bad 坏
Good 好
21. Alt Prop 21.替代道具
Always include an alt prop in your
<img > tags. And don’t use picture or image in your alt property because the screenreaders already announce img elements as images. No need to include that.在
<img >标签中始终包含alt prop。不要在你的alt picture中使用image或property，因为屏幕阅读器已经将img元素宣布为图像。不需要包括这个。Bad 坏
Good 好
Conclusion 结论
There you go. Congratulations if you’ve made it this far! I hope you learned a thing or two from this article.
这就对了祝贺你，如果你已经走了这么远！我希望你能从这篇文章中学到一两件事。
I hope you have a wonderful day! :D祝你有个美好的一天！：D个
Have something to say?有话要说吗？
Resources 资源
- Airbnb Guideline: https://github.com/airbnb/javascript/tree/master/react
Loading...