在 React 中将函数传递给 setState() 有什么好处？

Question

我有一个名为的函数onRemove，其写法如下：

const [todos, setTodos] = useState(todoData);

const onRemove = useCallback(
    (id) => {
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos]
  );

然后我注意到改变它的功能会导致渲染时间缩短。

const onRemove = useCallback(
    (id) => {
      setTodos(todos => todos.filter((todo) => todo.id !== id));
    },
    []
  );

我的问题是：

1. 为什么它渲染组件的速度更快？
2. 使用函数式还有哪些其他优点setState()？

Answer 1

在第一种情况下，当您将 todos 添加为 的依赖项时useCallback，每次调用该函数时都会重新创建该函数，因为它本身设置 todos 状态，因此不会针对记忆进行优化

在第二种情况下，您使用的是回调版本操作系统状态更新程序，它本质上将为您提供先前的状态作为回调的参数，并且该函数只会创建一次。

这应该是首选方法

要了解更多关于函数式 setState 的优点，请查看链接的帖子：