反应-在组件寿命期间，“ useState”挂钩的设置器是否可以更改？

小编典典

反应-在组件寿命期间，“ useState”挂钩的设置器是否可以更改？

reactjs

是useState的制定者能够在部件的使用寿命期间的变化？

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

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

阅读 273

2020-07-22

共1个答案

小编典典

设置器 功能在组件寿命期间不会更改 。

从Hooks常见问题解答：

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

组件重新安装更改后setState返回的setter函数（）useState，但无论哪种方式，callback都会获得一个新实例。

最好在依赖项数组（[setState]）中添加状态设置器，尽管在大多数情况下不是必需的。

例如，当使用 自定义钩子时 ，像您这样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>
  );
};

2020-07-22