react 如何更新 view
更新视图的基本方法
在 React 中，视图更新通常通过状态（state）或属性（props）的变化触发。组件的状态更新后，React 会自动重新渲染组件及其子组件。
使用 useState Hook 更新状态
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}调用 setCount 会触发组件重新渲染，更新视图。
使用 useEffect 处理副作用更新
import { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return <div>{data ? data.message : 'Loading...'}</div>;
}useEffect 在组件挂载后执行数据获取，并通过 setData 更新视图。
通过 Props 传递数据更新
父组件通过传递新的 props 触发子组件更新：
function Parent() {
const [value, setValue] = useState('Initial');
return (
<div>
<Child value={value} />
<button onClick={() => setValue('Updated')}>Update Value</button>
</div>
);
}
function Child({ value }) {
return <div>{value}</div>;
}父组件状态变化会导致子组件重新渲染。
强制更新（不推荐）
在极少数情况下，可能需要强制更新视图，可以通过以下方式实现：
function ForceUpdateExample() {
const [, forceUpdate] = useState();
return (
<button onClick={() => forceUpdate({})}>Force Update</button>
);
}强制更新会跳过 shouldComponentUpdate 或 React.memo 的优化。
优化更新性能
- 使用
React.memo避免不必要的子组件渲染：const MemoizedChild = React.memo(Child); - 使用
useCallback和useMemo缓存函数和计算结果：const memoizedCallback = useCallback(() => doSomething(), []); const memoizedValue = useMemo(() => computeExpensiveValue(), []);
通过合理管理状态和副作用，可以高效地控制 React 视图的更新行为。
