Reactjs 当child.shouldComponentUpdate（）返回false时，React useState（）钩子不会更新状态

我已经开始阅读React钩子，并试图重写一些小组件来使用它们，但我在设置状态时遇到了问题。基本上，当子组件

在

shouldComponentUpdate

中始终返回

false

时，会调用父组件（

.setShow

），但不会更新状态，也不会呈现

我在下面准备了一个简单的工作示例，

是一个基于React Hoos的组件，

是一个等效的基于类的组件。后一种方法很有效，所以很明显我不明白其中的细微差别

const{useState}=React；
类面板扩展了React.Component{
shouldComponentUpdate（）{return false；}
render（）{return（Toggle）}
}
类内容扩展了React.Component{
render（）{return Content}
}
常量应用=（道具）=>{
const[show，setShow]=useState（true）；
常量切换=（）=>{
log（“切换可见性！”，show）；
设置显示（！show）；
}
console.log（“[App]render（）”）；
返回(
你好{Date.now（）}
{show&&}
)
}
类App2扩展了React.Component{
状态={show:true}
render（）{
常量切换=（）=>{
console.log（“[App]切换”，this.state.show）
this.setState（{show:！this.state.show}）
}
console.log（“[App]render（）”）；
返回(
你好{Date.now（）}
{this.state.show&}
)
}
}
ReactDOM.render（，document.getElementById（'app'））

您需要使用，因为您在
切换功能中有
show
的on值

关闭之所以发生，是因为
shouldComponentUpdate
始终返回
false
，因此首先渲染
这个.props.onClick
的值将具有过时状态
show==true
，在后续渲染时不会更改

const App = () => {
  const [show, setShow] = useState(true);

  // Closure on value of show
  // const toggle = () => {
  //   console.log("Toggling visibility!", show);
  //   setShow(!show);
  // }

  const toggle = () => {
    setShow(prevState => {
      console.log("Toggling visibility!", prevState);
      return !prevState;
    });
  };

  console.log("[App] render()");
  return (
    <div>
      <h1>Hi at {Date.now()}</h1>
      <Panel onClick={toggle} />
      {show && <Content />}
    </div>
  );
};

const-App=（）=>{
const[show，setShow]=useState（true）；
//节目价值的终结
//常量切换=（）=>{
//log（“切换可见性！”，show）；
//设置显示（！show）；
// }
常量切换=（）=>{
设置显示（prevState=>{
log（“切换可见性！”，prevState）；
返回状态；
});
};
console.log（“[App]render（）”）；
返回(
你好{Date.now（）}
{show&&}
);
};

之所以出现陈旧关闭，是因为功能应用程序通过了切换，并将关闭中的显示设置为
true
，当调用切换时，应用程序组件将重新渲染，但面板不会，并且仍然具有切换功能，显示为true。再次单击按钮将使状态设置为
！true
但由于状态已为false，功能应用程序将不会重新呈现。类应用程序之所以工作，是因为切换不使用闭包，它通过
this.state
获取状态。