21 个整理 React 项目的最佳实践
共 10165字，需浏览 21分钟
·
2024-06-21 09:10
今天，我们将讨论一些改善React应用程序运行状况的最佳实践。
这些规则应用广泛。因此，拥有这些知识势在必行。
1. 使用JSX速记
尝试使用JSX速记来传递布尔变量。
举个例子，假设你想要控制导Navbar组件的标题可见性。
坏
return (
<Navbar showTitle={true} />
);
好
return(
<Navbar showTitle />
)
2. 使用三元运算符
假设你想要根据role显示用户的详细信息。
坏
const { role } = user;
if(role === ADMIN) {
return <AdminUser />
}else{
return <NormalUser />
}
好
const { role } = user;
return role === ADMIN ? <AdminUser /> : <NormalUser />
3. 利用对象字面量
对象字面量可以使代码更具可读性。
假设你想要根据role显示三种类型的用户。因为选项的数量超过两个，所以不能使用三元。
坏
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 <Componenent />;
现在看上去是不是好多了？！
4. 使用Fragment
始终使用Fragment而不是Div。
Fragment可帮助保持代码干净，且有利于性能，因为在虚拟DOM中少创建了一个节点。
坏
return (
<div>
<Component1 />
<Component2 />
<Component3 />
</div>
)
好
return (
<>
<Component1 />
<Component2 />
<Component3 />
</>
)
5. 不要在渲染中定义函数
不要在渲染中定义函数。尽量将渲染内部的逻辑保持在最小。
坏
return (
<button onClick={() => dispatch(ACTION_TO_SEND_DATA)}> // NOTICE HERE
This is a bad example
</button>
)
好
const submitData = () => dispatch(ACTION_TO_SEND_DATA)
return (
<button onClick={submitData}>
This is a good example
</button>
)
6. 使用Memo
React.PureComponent和Memo可以显著提高应用程序的性能，帮助我们避免不必要的渲染。
坏
import React, { useState } from "react";
export const TestMemo = () => {
const [userName, setUserName] = useState("faisal");
const [count, setCount] = useState(0);
const increment = () => setCount((count) => count + 1);
return (
<>
<ChildrenComponent userName={userName} />
<button onClick={increment}> Increment </button>
</>
);
};
const ChildrenComponent =({ userName }) => {
console.log("rendered", userName);
return <div> {userName} </div>;
};
尽管子组件应该只呈现一次，因为count的值与ChildComponent无关。
但是，每次单击按钮时，它都会呈现。
好
让我们将ChildComponent编辑为：
import React ,{useState} from "react";
const ChildrenComponent = React.memo(({userName}) => {
console.log('rendered')
return <div> {userName}</div>
})
现在，无论你单击多少次按钮，都仅在必要时渲染。
7. JavaScript + CSS
在编写React应用程序时避免使用原始JavaScript，因为组织CSS比组织JS要困难得多。
坏
// CSS FILE
.body {
height: 10px;
}
//JSX
return <div className='body'>
</div>
好
const bodyStyle = {
height: "10px"
}
return <div style={bodyStyle}>
</div>
8. 使用对象解构
假设你需要显示用户的详细信息，
坏
return (
<>
<div> {user.name} </div>
<div> {user.age} </div>
<div> {user.profession} </div>
</>
)
好
const { name, age, profession } = user;
return (
<>
<div> {name} </div>
<div> {age} </div>
<div> {profession} </div>
</>
)
9.字符串prop不需要大括号
在将字符串props传递给子组件时，
坏
return(
<Navbar title={"My Special App"} />
)
好
return(
<Navbar title="My Special App" />
)
10. 从JSX删除JS代码
将不能用于渲染或UI功能的JS代码移出JSX。
坏
return (
<ul>
{posts.map((post) => (
<li onClick={event => {
console.log(event.target, 'clicked!'); // <- THIS IS BAD
}} 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.proffession
return (
<div> {userDetails} </div>
)
好
const userDetails = `${user.name}'s profession is ${user.proffession}`
return (
<div> {userDetails} </div>
)
12. 按顺序导入
始终按特定顺序导入内容。这样可提高代码可读性。
好
经验法则是保持这样的导入顺序：
-
内置 -
外部 -
内部
所以上面的例子变成了：
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命名
不要使用DOM组件prop名称在组件之间传递props，因为其他人可能不需要这些名称。
坏
<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命名
prop命名使用camelCase，如果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 prop
始终在<img>标签中包含altprop。
并且不要在alt属性中使用picture或image，因为屏幕阅读器已经将img元素宣布为图像。
坏
<img src="hello.jpg" />
<img src="hello.jpg" alt="Picture of me rowing a boat" />
好
<img src="hello.jpg" alt="Me waving hello" />
结论
恭喜你，又学到了新的东西！
编程快乐！:D