react如何重新渲染
React 重新渲染的机制
React 的重新渲染是由组件的状态（state）或属性（props）变化触发的。当这些数据发生变化时，React 会自动比较虚拟 DOM 并更新实际 DOM 中需要变化的部分。
触发重新渲染的方法
修改组件的 state
通过 useState 或 this.setState 更新状态会触发重新渲染。
const [count, setCount] = useState(0);
setCount(count + 1); // 触发重新渲染修改父组件传递的 props 父组件更新传递给子组件的 props 时，子组件会重新渲染。
<ChildComponent data={newData} /> // 父组件更新 newData 会触发子组件重新渲染使用 forceUpdate（不推荐）
在类组件中可以通过 this.forceUpdate() 强制重新渲染，但应尽量避免使用。
this.forceUpdate(); // 强制重新渲染优化重新渲染
使用 React.memo
通过 React.memo 包裹函数组件可以避免不必要的重新渲染，仅在 props 变化时重新渲染。
const MemoizedComponent = React.memo(MyComponent);使用 useCallback 和 useMemo 缓存函数和计算值，避免因函数引用变化导致的子组件重新渲染。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);避免直接修改 state
直接修改 state 不会触发重新渲染，应使用更新函数或 setState。
// 错误示例
state.count = 1; // 不会触发重新渲染
// 正确示例
setState({ count: 1 }); // 触发重新渲染调试重新渲染
使用 React DevTools 通过 React Developer Tools 的 "Highlight updates" 功能可以查看组件重新渲染的情况。
添加渲染日志
在组件中添加 console.log 可以观察渲染次数。
console.log('Component rendered');
return <div>{count}</div>;通过合理管理状态和属性，并结合优化手段，可以有效控制 React 组件的重新渲染行为。
