react如何更新视图

使用状态更新触发视图更新

在React中，通过useState或useReducer钩子管理组件状态。当状态变更时，React会自动重新渲染组件以反映最新数据。例如：

const [count, setCount] = useState(0);
const handleClick = () => setCount(count + 1); // 状态更新触发视图更新

依赖props或context的变化

当父组件传递的props或订阅的context值发生变化时，子组件会重新渲染。确保子组件通过React.memo或useMemo优化不必要的渲染。

强制更新组件

在极少数情况下，可通过forceUpdate方法强制重新渲染（不推荐，优先使用状态驱动）。类组件中调用this.forceUpdate()，函数组件可通过自定义hook模拟类似行为。

使用effect钩子响应外部变化

useEffect监听外部数据源（如API、DOM事件），在依赖项变化时执行副作用并可能触发渲染。例如：

useEffect(() => {
  fetchData().then(data => setState(data));
}, [dependency]); // dependency变化时重新执行

优化渲染性能

通过React.memo缓存组件、useMemo缓存计算值、useCallback缓存函数，减少不必要的渲染。例如：

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