react如何重绘
理解重绘的概念
重绘（Repaint）是指浏览器根据新的样式重新绘制元素的过程，但不涉及布局变化。React中的重绘通常指组件状态或属性变化导致的UI更新。
触发组件重绘的方法
在React中，组件的重绘主要由状态（state）或属性（props）的变化触发。以下是几种常见方式：
状态更新
通过useState或useReducer钩子更新状态会自动触发组件及其子组件的重绘。
const [count, setCount] = useState(0);
// 更新状态触发重绘
setCount(count + 1);属性变化 父组件传递的props发生变化时，子组件会重新渲染。
function Parent() {
const [value, setValue] = useState('');
return <Child propValue={value} />;
}上下文变更
使用useContext的组件在上下文值变化时会重新渲染。
const ThemeContext = createContext();
const theme = useContext(ThemeContext);优化重绘性能
不必要的重绘会影响性能，可通过以下方式优化：
使用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]);shouldComponentUpdate 类组件中可通过此生命周期方法手动控制渲染逻辑。
shouldComponentUpdate(nextProps, nextState) {
return nextProps.id !== this.props.id;
}强制重绘的非常规方法
在极少数需要强制更新的场景下，可使用以下方式（一般不推荐）：
key属性变更 通过改变组件的key值强制重新挂载。
<Component key={uniqueKey} />forceUpdate方法 类组件中可直接调用实例方法强制更新。
this.forceUpdate();空状态更新 函数组件中可通过设置无实际变化的状态触发更新。
const [, forceUpdate] = useState();
forceUpdate({});
