使用钩子设置具有相同值的状态会导致重新渲染吗？

Question

使用钩子，如果我setState使用与 相同的值调用state，它会重新渲染组件吗？

如果是，我怎样才能避免这种情况？

例如

const [state, setState] = useState(foo)

...
// any where in the code
setState(foo)

考虑到foo可以是任何事物，比如{}，true，props.bar或从所述部件（常数）的出侧可变。

Answer 1

只是总结一下

如果您的状态是原始值（数字、字符串、布尔值...），则使用 setState 挂钩设置相同的值不会触发重新渲染。如果您的状态是对象或数组，那么它的行为会有所不同。

https://overreacted.io/how-are-function-components-
Different-from-classes/ https://dmitripavlutin.com/value-vs-reference-javascript/

Answer 2

如果您setState使用相同的值调用，它不会重新渲染组件。

试试这个：

import React, { useState, useEffect } from "react";

const foo = { foo: 'bar' };

export default ({ name }) => {
  const [state, setState] = useState(foo);
  console.log("rendered!");
  useEffect(() => {
    setState(foo);
    console.log("state reset!");
  });

  const handleClick = () => {
    console.log("handleClick!");
    setState(foo);
    // setState({ ...foo, bar : 'baz' });
  }

  return (<div>
  <h1>Hello {name}!</h1>
  <button onClick={handleClick}>Click Me</button>
  </div>);
};

您会注意到，即使单击该按钮，该值也没有改变。它不是重新渲染组件。如果您更改您调用的参数，setState它将重新渲染组件。

这是您参考的代码示例。

尝试在方法中注释第一个setState并取消注释第二个handleClick以查看差异。