React useState 值改变后页面不更新？ useEffect 刷新页面

React useState 值改变后页面不更新？使用 useEffect 刷新页面

当使用 React 的 useState 改变值后，有时页面内容并不会立即更新。这是因为 React 默认情况下不会在每次状态改变时都重新渲染组件。为了解决这个问题，可以使用 React 的 useEffect 钩子来监听 useState 值的变化，并触发页面重新渲染。

示例代码：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 当count发生变化时，重新渲染页面
    console.log('count', count);
  }, [count]);

  return (
    <div>
      <p>You clicked 'count' times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

解释：

1. 使用 useEffect 钩子监听 count 的变化。
2. useEffect 的第二个参数是一个依赖项数组 [count]，表示只有当 count 的值发生变化时，才会执行 useEffect 中的回调函数。
3. 在回调函数中，使用 console.log 输出 count 的值，并触发页面重新渲染。

当点击按钮改变 count 的值时，useEffect 会监听 count 的变化，并输出 count 的值，从而实现了页面值的刷新。