useState()的 state 是否可以直接修改？是否可以引起组件渲染？

在 React 中使用 useState 声明的状态变量是不可直接修改的。React 提供了专门的更新函数（例如 setCount），用于更新状态变量的值。直接修改状态变量是无效的，并且不会触发组件重新渲染。

下面是一个示例，演示了直接修改状态变量和使用更新函数的区别：

import React, { useState } from 'react';

function Counter() {
  // 声明状态变量 count 和对应的更新函数 setCount
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 错误示例：直接修改状态变量，这不会引起组件重新渲染
    // count = count + 1;

    // 正确示例：使用更新函数，触发组件重新渲染
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

在上述示例中，如果使用 count = count + 1; 这样直接修改 count 的方式，不会触发组件重新渲染，因为 React 不知道状态变量的变化。正确的做法是使用 setCount 更新函数，这样 React 才能追踪状态的变化并进行重新渲染。

总的来说，为了确保正确的状态更新和组件渲染，应始终使用 useState 提供的更新函数，而不是直接修改状态变量。

原文链接：codingdict.net

useState()的 state 是否可以直接修改？是否可以引起组件渲染？

热门标签