Reactjs 使用钩子设置具有相同值的状态是否会导致重新加载？

使用钩子，如果我使用与

状态

相同的值调用

设置状态

，它会重新启动组件吗

如果是，我如何避免这种情况？

e、 g

---

考虑到

foo

可以是任何东西，例如

{}

、

true

、

props.bar

或组件外部的变量（常量）。

如果使用相同的值调用

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>);
};

import React，{useState，useffect}来自“React”；
常量foo={foo:'bar'}；
导出默认值（{name}）=>{
const[state，setState]=useState（foo）；
log（“rendered！”）；
useffect（（）=>{
设置状态（foo）；
log（“状态重置！”）；
});
常量handleClick=（）=>{
log（“handleClick！”）；
设置状态（foo）；
//setState（{…foo，bar:'baz'}）；
}
返回(
你好{name}！
点击我
);
};

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

setState

，它将重新渲染组件

---

这是给你的裁判的一封信

---

尝试在

handleClick

方法中注释第一个

setState

并取消注释第二个

以查看差异。
这是一个与js语法相关的问题，就像
=
操作一样

let times = 0
const init = {name: 'Bob'}
function App() {
  const [state, setState] = useState(init)
  function modify() {
    setState({name: 'Bob'})
  }
  function modify2() {
    setState(init)
  }
  times ++
  return (
    <div className="App">
      <p>{ times }</p>
      <button onClick={modify}>Same Value Will Rerender</button>
      <button onClick={modify2}>Same Reference Never Rerender</button>
    </div>
  );
}

let次=0
const init={name:'Bob'}
函数App（）{
const[state，setState]=useState（init）
函数修改（）{
setState（{name:'Bob'}）
}
函数modify2（）{
设置状态（初始化）
}
时代++
返回(
{times}

相同的值将重新加载
相同的引用永远不会重播
);
}

这里有一个

您可以重写包装器方法：

let times = 0
const init = {name: 'Bob'}
function App() {
  const [state, setState] = useState(init)
  function modify3() {
    setState2({ name: 'Bob' })
  }
  function setState2(value) {
    if (value.name === state.name) {
      return
    }
    setState(value)
  }
  times ++
  return (
    <div className="App">
      <p>{ times }</p>
      <button onClick={modify3}>Same Value Will Not Rerender Yet</button>
    </div>
  );
}

let次=0
const init={name:'Bob'}
函数App（）{
const[state，setState]=useState（init）
函数modify3（）{
setState2（{name:'Bob'}）
}
函数setState2（值）{
if（value.name==state.name）{
返回
}
设置状态（值）
}
时代++
返回(
{times}

相同的值还不会重新加载
);
}

let times = 0
const init = {name: 'Bob'}
function App() {
  const [state, setState] = useState(init)
  function modify3() {
    setState2({ name: 'Bob' })
  }
  function setState2(value) {
    if (value.name === state.name) {
      return
    }
    setState(value)
  }
  times ++
  return (
    <div className="App">
      <p>{ times }</p>
      <button onClick={modify3}>Same Value Will Not Rerender Yet</button>
    </div>
  );
}