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 视图的更新行为。