react如何重新渲染

React 重新渲染的机制

React 的重新渲染是由状态（state）或属性（props）的变化触发的。当组件的数据发生变化时，React 会自动比较虚拟 DOM 并决定是否需要更新真实 DOM。

触发重新渲染的方法

修改组件的 state 通过 useState 或 this.setState 更新状态会触发重新渲染。例如：

const [count, setCount] = useState(0);
setCount(count + 1); // 触发重新渲染

修改组件的 props 父组件传递的 props 发生变化时，子组件会重新渲染。例如：

<ChildComponent newProp={updatedValue} />

使用 forceUpdate（不推荐） 类组件中可以通过 this.forceUpdate() 强制重新渲染，但应尽量避免使用，因为它违背了 React 的数据驱动原则。

优化重新渲染

使用 React.memo 对函数组件进行浅比较，避免不必要的渲染：

const MemoizedComponent = React.memo(MyComponent);

使用 useCallback 和 useMemo 缓存函数和计算值，避免依赖项未变化时的重复渲染：

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

shouldComponentUpdate（类组件） 通过自定义比较逻辑控制是否渲染：

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

常见问题

不必要的渲染 检查是否在渲染函数中进行了状态更新或产生了副作用，这可能导致无限循环。

深度嵌套数据更新 对于复杂对象或数组，确保使用不可变更新方式（如展开运算符或 immer 库）以正确触发渲染。