小编典典

反应-在组件寿命期间,“ 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