React - useState 的 setter 函数可以改变吗？

Question

useState 的 setter 是否能够在组件生命周期内更改？

例如，假设我们有一个useCallback将更新状态。如果 setter 能够更改，则必须将其设置为回调的依赖项，因为回调使用它。

const [state, setState] = useState(false);
const callback = useCallback(
    () => setState(true),
    [setState] // <-- 
);

Answer 1

setter函数在组件寿命期间不会改变。

从 Hooks 常见问题解答：

（ setCount 函数的身份保证是稳定的，所以省略是安全的。）

setter 函数 ( setState) 从useState组件重新安装时的更改返回，但无论哪种方式，callback都将获得一个新实例。

[setState]使用custom-hooks时，在依赖数组 ( ) 中添加状态设置器是一个很好的做法。例如，在每次渲染useDispatch时react-redux获取新实例，如果没有：

// Custom hook
import { useDispatch } from "react-redux";

export const CounterComponent = ({ value }) => {
  // Always new instance
  const dispatch = useDispatch();

  // Should be in a callback
  const incrementCounter = useCallback(
    () => dispatch({ type: "increment-counter" }),
    [dispatch]
  );

  return (
    <div>
      <span>{value}</span>

      // May render unnecessarily due to the changed reference
      <MyIncrementButton onIncrement={dispatch} />

      // In callback, all fine
      <MyIncrementButton onIncrement={incrementCounter} />
    </div>
  );
};

Answer 2

简短的回答是，不，useState() 的 setter 不能更改， React文档明确保证了这一点，甚至提供了示例证明可以省略 setter。

我建议您不要向useCallback()的依赖项列表中添加任何内容，除非您知道它的值可以更改。就像您不会添加从模块或模块级函数导入的任何函数、在组件外部定义的常量表达式等一样。添加这些内容只是多余的，并且会使读取处理程序变得更加困难。

话虽这么说，这都是针对useState()返回的函数的，没有理由将该推理扩展到可能返回函数的每个可能的自定义挂钩。原因是 React 文档明确保证了useState()及其 setter 的稳定行为，但并没有说对于任何自定义钩子都必须如此。

React hooks 仍然是一个新的实验性概念，我们需要确保互相鼓励，使它们尽可能具有可读性，更重要的是，了解它们实际做了什么以及为什么。如果我们不这样做，这将被视为钩子是一个“坏主意”的证据，这将阻碍它们的采用和更广泛的理解。那就糟糕了；根据我的经验，它们倾向于为 React 通常与之相关的基于类的组件提供更清晰的替代方案，更不用说它们可以允许类根本不可能实现的组织技术。