react如何触发重新渲染
触发 React 组件重新渲染的方法
React 组件的重新渲染通常由状态（state）或属性（props）的变化触发。以下是几种常见的触发方式：
使用 useState 或 useReducer 更新状态
调用 useState 返回的更新函数或 useReducer 返回的 dispatch 方法会触发重新渲染。状态变化后，React 会重新执行组件函数并更新 DOM。
const [count, setCount] = useState(0);
setCount(count + 1); // 触发重新渲染父组件重新渲染导致子组件更新
如果父组件重新渲染，其子组件也会默认重新渲染，除非子组件通过 React.memo 进行了优化或实现了 shouldComponentUpdate。
function Parent() {
const [value, setValue] = useState('');
return <Child />; // Parent 重新渲染时 Child 也会重新渲染
}使用 forceUpdate 强制更新
类组件中可以通过 this.forceUpdate() 强制触发重新渲染，但应尽量避免使用，通常状态管理是更好的选择。
class MyComponent extends React.Component {
handleClick = () => {
this.forceUpdate(); // 强制重新渲染
};
}Context 值变化
当 Context 的 value 发生变化时，所有消费该 Context 的组件都会重新渲染。
const ThemeContext = createContext('light');
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={theme}>
<Toolbar />
</ThemeContext.Provider>
);
}使用 key 属性重置组件
通过改变组件的 key 属性，可以强制 React 销毁并重新创建组件实例，触发完整的重新渲染。
function App() {
const [key, setKey] = useState(0);
return <MyComponent key={key} />;
}外部状态管理库更新
使用 Redux、MobX 等状态管理库时，当 store 中的数据发生变化，连接的组件会触发重新渲染。
const { data } = useSelector(state => state.data); // Redux 状态更新触发渲染避免不必要的重新渲染
对于性能优化，可以通过 React.memo、useMemo 或 useCallback 减少不必要的渲染。
const MemoizedComponent = React.memo(MyComponent);通过合理使用上述方法，可以精确控制 React 组件的渲染行为，平衡功能与性能。
