React对如何组织结构非常宽容。正因如此,维护一个整洁、可维护的项目是我们的责任。
原文地址：https://dev.to/mohammadfaisal/21-best-practices-for-a-clean-react-project-jdf
今天,我们将讨论一些改善React应用程序健康状况的最佳实践。这些规则被广泛接受。因此,掌握这些知识至关重要。
一切都将通过代码进行演示,所以请系好安全带!
1. 使用JSX简写尽量对布尔变量使用JSX简写。假设你想控制一个导航栏组件的标题可见性。
「不好的:」
代码语言：javascript
复制
return ( <Navbar showTitle={true} /> );
「好的:」
代码语言：javascript
复制
return ( <Navbar showTitle /> );
2. 使用三元运算符假设你想根据角色显示用户详情。
「不好的:」
代码语言：javascript
复制
const { role } = user; if(role === ADMIN) { return <AdminUser /> } else { return <NormalUser /> }
「好的:」
代码语言：javascript
复制
const { role } = user; return role === ADMIN ? <AdminUser /> : <NormalUser />;
3. 利用对象字面量对象字面量可以使我们的代码更具可读性。假设您要根据角色显示三种类型的用户。你不能使用三元运算符,因为选项数量超过两个。
「不好的:」
代码语言：javascript
复制
const {role} = user; switch(role) { case ADMIN: return <AdminUser />; case EMPLOYEE: return <EmployeeUser />; case USER: return <NormalUser />; }
「好的:」
代码语言：javascript
复制
const {role} = user; const components = { ADMIN: AdminUser, EMPLOYEE: EmployeeUser, USER: NormalUser }; const Component = components[role]; return <Component />;
现在看起来好多了。
4. 使用片段尽量使用Fragment而不是Div。这使代码更简洁,对性能也有益,因为少创建一个虚拟DOM节点。
「不好的:」
代码语言：javascript
复制
return ( <section> <Component1 /> <Component2 /> <Component3 /> </section> );
「好的:」
代码语言：javascript
复制
return ( <> <Component1 /> <Component2 /> <Component3 /> </> );
5. 不要在render中定义函数不要在render中定义函数。尽量使render中的逻辑最小化。
「不好的:」
代码语言：javascript
复制
return ( <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}> 这是一个不好的例子 </button> );
「好的:」
代码语言：javascript
复制
const submitData = () => dispatch(ACTION_TO_SEND_DATA); return ( <button onClick={submitData}> 这是一个好的例子 </button> );
6. 使用useMemoReact.PureComponent 和 useMemo 可以显著提高应用程序的性能。它们帮助我们避免不必要的渲染。
「不好的:」
代码语言：javascript
复制
import React, { useState } from "react"; export const TestMemo = () => { const [userName, setUserName] = useState("faisal"); const [count, setCount] = useState(0); const increment = () => setCount(count + 1); return ( <> <ChildrenComponent userName={userName} /> <button onClick={increment}>Increment</button> </> ); }; const ChildrenComponent =({userName}) => { console.log("rendered", userName); return <section>{userName}</section>; };
尽管 ChildComponent 的值与 count 无关,但它应该只渲染一次。但是,每次点击按钮时它都会重新渲染。
「好的:」
将 ChildrenComponent 改为:
代码语言：javascript
复制
const ChildrenComponent = React.memo(({userName}) => { console.log("rendered"); return <section>{userName}</section>; });
现在,无论单击按钮多少次,它都只会在必要时重新渲染。
7. 将 CSS 写在 JavaScript 中避免在编写 React 应用程序时使用纯 CSS,因为组织 CSS 比组织 JS 更加困难。
「不好的:」
代码语言：javascript
复制
/* CSS 文件 */ .body { height: 10px; }
代码语言：javascript
复制
// JSX return <section className="body" />;
「好的:」
代码语言：javascript
复制
const bodyStyle = { height: "10px" }; return <section style={bodyStyle} />;
8. 使用对象解构充分利用对象解构。假设你需要显示一个用户的详细信息。
「不好的:」
代码语言：javascript
复制
return ( <> <section>{user.name}</section> <section>{user.age}</section> <section>{user.profession}</section> </> );
「好的:」
代码语言：javascript
复制
const { name, age, profession } = user; return ( <> <section>{name}</section> <section>{age}</section> <section>{profession}</section> </> );
9. 字符串类型的props不需要花括号当向子组件传递字符串类型的props时。
「不好的:」
代码语言：javascript
复制
return ( <Navbar title={"My Special App"} /> );
「好的:」
代码语言：javascript
复制
return ( <Navbar title="My Special App" /> );
10. 从JSX中提取JS代码如果JS代码没有渲染或UI功能目的,请将其从JSX中提取出来。
「不好的:」
代码语言：javascript
复制
return ( <ul> {posts.map(post => ( <li onClick={event => { console.log(event.target, 'clicked!'); // <- 不好的 }} key={post.id} > {post.title} </li> ))} </ul> );
「好的:」
代码语言：javascript
复制
const onClickHandler = event => { console.log(event.target, 'clicked!'); }; return ( <ul> {posts.map(post => ( <li onClick={onClickHandler} key={post.id}> {post.title} </li> ))} </ul> );
11. 使用模板字符串使用模板字符串构建大型字符串。避免使用字符串连接。它很漂亮,也很简洁。
「不好的:」
代码语言：javascript
复制
const userDetails = user.name + "'s profession is" + user.profession; return ( <section>{userDetails}</section> );
「好的:」
代码语言：javascript
复制
const userDetails = `${user.name}'s profession is ${user.profession}`; return ( <section>{userDetails}</section> );
12. 按顺序导入尽量按一定顺序导入东西。这提高了代码的可读性。
「不好的:」
代码语言：javascript
复制
import React from 'react'; import ErrorImg from '../../assets/images/error.png'; import styled from 'styled-components/native'; import colors from '../../styles/colors'; import { PropTypes } from 'prop-types';
「好的:」
一个经验法则是保持导入顺序如下:
内置的
外部的
内部的
所以上面的例子变为:
代码语言：javascript
复制
import React from 'react'; import { PropTypes } from 'prop-types'; import styled from 'styled-components/native'; import ErrorImg from '../../assets/images/error.png'; import colors from '../../styles/colors';
13. 使用隐式返回在编写漂亮的代码时,使用 JavaScript 的隐式return特性。假设你的函数进行一个简单的计算并返回结果。
「不好的:」
代码语言：javascript
复制
const add = (a, b) => { return a + b; };
「好的:」
代码语言：javascript
复制
const add = (a, b) => a + b;
14. 组件命名组件始终使用PascalCase,实例使用camelCase。
「不好的:」
代码语言：javascript
复制
import reservationCard from './ReservationCard'; const ReservationItem = <ReservationCard />;
「好的:」
代码语言：javascript
复制
import ReservationCard from './ReservationCard'; const reservationItem = <ReservationCard />;
15. 保留的prop命名不要在组件之间传递props时使用DOM组件的prop名称,因为其他人可能不期望这些名称。
「不好的:」
代码语言：javascript
复制
<MyComponent style="dark" /> <MyComponent className="dark" />
「好的:」
代码语言：javascript
复制
<MyComponent variant="fancy" />
16. 引号JSX属性使用双引号,其他所有JS使用单引号。
「不好的:」
代码语言：javascript
复制
<Foo bar='bar' /> <Foo style={{ left: "20px" }} />
「好的:」
代码语言：javascript
复制
<Foo bar="bar" /> <Foo style={{ left: '20px' }} />
17. prop命名始终使用camelCase作为prop名称,如果prop值为React组件,则使用PascalCase。
「不好的:」
代码语言：javascript
复制
<Component UserName="hello" phone_number={12345678} />
「好的:」
代码语言：javascript
复制
<MyComponent userName="hello" phoneNumber={12345678} Component={SomeComponent} />
18. 把多行的JSX用括号包裹如果组件跨多行,请始终将其包装在括号中。
「不好的:」
代码语言：javascript
复制
return <MyComponent variant="long"> <MyChild /> </MyComponent>;
「好的:」
代码语言：javascript
复制
return ( <MyComponent variant="long"> <MyChild /> </MyComponent> );
19. 使用自闭合标签如果组件没有子元素,则使用自闭合标签。这提高了可读性。
「不好的:」
代码语言：javascript
复制
<SomeComponent variant="stuff"></SomeComponent>
「好的:」
代码语言：javascript
复制
<SomeComponent variant="stuff" />
20. 方法名中不要使用下划线不要在任何内部React方法中使用下划线。
「不好的:」
代码语言：javascript
复制
const _onClickHandler = () => { // do stuff };
「好的:」
代码语言：javascript
复制
const onClickHandler = () => { // do stuff };
21. alt属性在<img>标签中始终包含alt属性。并且不要在alt属性中使用picture或image,因为屏幕阅读器已经将img元素宣布为图像。不需要包含它们。
「不好的:」
代码语言：javascript
复制
<img src="hello.jpg" /> <img src="hello.jpg" alt="Picture of me waving hello" />
「好的:」
代码语言：javascript
复制
<img src="hello.jpg" alt="Me waving hello" />
结论就是这样。如果你读到这里,恭喜你!我希望你从这篇文章中学到了一两件事。
我希望你有一个美好的一天!
