React中如何避免不必要的render？
在React中，有几种常用的方法可以避免不必要的渲染：
- 使用
PureComponent或React.memo：PureComponent会对props和state进行浅层比较，如果它们没有发生变化，就不会重新渲染。对于函数组件，可以使用React.memo来达到类似的效果。 -
使用
shouldComponentUpdate方法：在类组件中，你可以通过实现shouldComponentUpdate方法来决定是否需要更新组件。如果这个方法返回false，那么React就不会执行渲染和后续的生命周期方法。 -
避免在渲染方法中创建新的对象或函数：在渲染方法中创建新的对象或函数会导致子组件的props在每次渲染时都被认为是新的，即使它们的实际内容没有改变。这可能会导致子组件进行不必要的更新。
例如，以下代码会导致ChildComponent在每次父组件更新时都进行重新渲染，即使data没有改变：
render() {
const data = {a: 1, b: 2}; // 在每次渲染时都创建了新的对象
return <ChildComponent data={data} />;
}
为了避免这个问题，你可以将data存储在组件的状态或属性中，或者使用其他方式来确保在每次渲染时都使用相同的对象。
- 使用
React.useCallback和React.useMemo：在函数组件中，你可以使用useCallback和useMemoHooks来避免在每次渲染时都创建新的函数或对象。
例如：
const data = React.useMemo(() => ({a: 1, b: 2}), []); // 只在组件首次渲染时创建对象
const handleClick = React.useCallback(() => {
// 处理点击事件
}, []); // 只在组件首次渲染时创建函数
在这些例子中，[]是依赖数组。当数组中的值发生变化时，useMemo和useCallback会返回新的值；否则，它们会返回上一次的值，从而避免创建新的对象或函数。