如何重新渲染react
重新渲染 React 组件的常见方法
手动触发组件的重新渲染
通过更新组件的状态（state）或属性（props）可以触发重新渲染。使用 useState 或 useReducer 钩子更新状态变量，React 会自动检测变化并重新渲染。
const [count, setCount] = useState(0);
// 更新状态触发重新渲染
setCount(count + 1);强制更新组件
在某些情况下，可能需要强制重新渲染组件而不依赖状态或属性的变化。可以使用 forceUpdate 方法（类组件）或自定义钩子（函数组件）。
类组件中使用 forceUpdate：
this.forceUpdate();函数组件中通过自定义钩子模拟：
const useForceUpdate = () => {
const [value, setValue] = useState(0);
return () => setValue(value => value + 1);
};
const forceUpdate = useForceUpdate();
// 调用 forceUpdate() 触发重新渲染依赖外部数据变化
使用 useEffect 监听外部数据变化（如全局状态、上下文或订阅数据），并在变化时更新组件状态。
useEffect(() => {
const subscription = dataSource.subscribe(() => {
setData(dataSource.getData());
});
return () => subscription.unsubscribe();
}, []);优化重新渲染性能
通过 React.memo 或 useMemo/useCallback 避免不必要的重新渲染。React.memo 对组件进行浅比较，useMemo 缓存计算结果，useCallback 缓存函数。
const MemoizedComponent = React.memo(MyComponent);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);上下文（Context）更新触发渲染
当上下文的值发生变化时，所有消费该上下文的组件会重新渲染。通过 useContext 钩子或 Context.Consumer 订阅上下文变化。
const value = useContext(MyContext);路由变化触发渲染
在单页应用（SPA）中，路由变化可能导致组件卸载和重新挂载，从而触发重新渲染。使用 useEffect 监听路由参数变化。
useEffect(() => {
// 路由参数变化时执行
}, [location.pathname]);注意事项
- 避免频繁强制更新，优先依赖 React 的响应式机制。
- 性能敏感场景下，合理使用
shouldComponentUpdate或React.memo减少渲染次数。 - 确保状态更新不可变（Immutable），避免直接修改状态对象。
