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