原文链接: 5 React Mistakes You Should Avoid (and How to Fix Them)
作为一名 React 开发，很容易陷入某些一开始似乎方便的代码模式，但最终会导致一些问题的出现。在这篇文章中，我们将探讨5种常见的React错误使用方式以及如何避免这些问题，以确保你的代码保持高效、可维护和可扩展。
1. 错误使用 key 属性
错误的方式:
{ myList.map((item, index) => <div key={index}>{item}</div>) }
使用 index 索引作为数组列表的 key 会导致性能问题和 bug，尤其是如果这个列表会改变。
正确的方式:
{myList.map(item => <div key={item.id}>{item.name}</div>)}
使用数据中的唯一标识符，比如 id 字段来作为 key prop。
2. 过度使用 state
错误的方式:
function MyComponent() {
const [value, setValue] = useState(0);
// Doesn't change
return <div>{value}</div>;
}
将所有的数据放入 state，即使这些数据并不会改变，这会导致不必要的重复渲染和复杂度。
正确的方式:
function MyComponent({ value }) {
return <div>{value}</div>;
}
仅对那些会实际改变的的数据使用 state。对于静态数据使用 props 或 context。
3. 没有正确使用 useEffect
错误的方式:
useEffect(() => {
fetchData();
});
忘记给 useEffect 指定依赖项会导致无法预期的行为或无限循环。
正确的方式:
useEffect(() => {
fetchData();
}, []);
始终指定一个依赖项数组，即使依是空数组，以控制 effect 何时执行。
4. prop 逐级透传 (Prop Drilling)
错误的方式:
<Grandparent>
<Parent>
<Child prop={value} />
</Parent>
</Grandparent>
通过多层级的组件来传递 props 会导致代码难以维护。
正确的方式:
const ValueContext = React.createContext();
<ValueContext.Provider value={value}>
<Child />
</ValueContext.Provider>
function Child() {
const value = useContext(ValueContext);
return <div>{value}</div>;
}
使用 Context API或状态管理库来避免 prop 逐级透传。
5. 忽略 Composition
错误的方式:
function UserProfile({ user }) {
return (
<div>
<Avatar src={user.avatar} />
<Username name={user.name} />
{/* More user details */}
</div>
);
}
以单一、不灵活的结构创建组件，而不是使其可重复使用。
正确的方式:
function UserProfile({ children }) {
return <div>{children}</div>;
}
<UserProfile>
<Avatar src={user.avatar} />
<Username name={user.name} />
{/* More user details or different layout */}
</UserProfile>
设计可接受子组件或渲染 props，以提高灵活性。
了解并且避免这5个 React 编码错误，你将会编写更加高效、可维护和可扩展的 React 应用。再继续发展你的 React 技能的过程中，牢记这些经验，并在需要复习时随时重温这篇文章。
结论
避免这些常见的 React 错误，你可以写出更加高效、可维护和可扩展的代码。记住使用唯一的 key 来精确地管理状态，正确地使用 useEffect 来避免 prop 逐级透传，并且为了灵活的UI设计区区拥抱组合(composition)。当你应用这些最佳实践，你的 React 应用将会变得更加健壮和易于使用。
