reactjs - 当 child.shouldComponentUpdate() 返回 false 时，React useState() 钩子(Hook)不会更新状态

Question

我已经开始阅读 React Hooks 并尝试重写一些小组件以使用它们，但我在设置状态时遇到了问题。基本上，当子组件 <Content/>总是返回 false在shouldComponentUpdate ，然后调用父级的 ( <App/>.setShow )，但它不会更新状态和 <Content/>未呈现。

我在下面准备了一个最小的工作示例，其中 <App/>是一个基于 React Hoos 的组件，<App2/>是一个等效的基于类的组件。后者有效，所以显然有一些我不明白的细微差别。

const {useState} = React;

class Panel extends React.Component {
   shouldComponentUpdate() { return false; } 
   render() { return (<button onClick={this.props.onClick}>Toggle</button>) }
}

class Content extends React.Component {
  render() { return <div>Content</div> }
}

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

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

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

class App2 extends React.Component {
  state = { show: true }

  render() {
    const toggle = () => {
      console.log("[App] toggle", this.state.show)
      this.setState({ show: !this.state.show })
    }

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

ReactDOM.render(<div> <App/> <App2/> </div>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="app">
</app>

Answer 1

您需要使用 functional updates因为你有 closure toggle 函数中 show 的值。

关闭发生是因为 shouldComponentUpdate 总是返回 false，所以在第一次渲染 this.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>
  );
};