javascript - React 功能组件 useEffect 挂钩，在类组件生命周期中具有相等的依赖关系

Question

我在具有依赖关系的功能组件中使用 useEffect 挂钩，以便依赖关系发生变化，useEffect 函数将像这样重新运行：

const [show, setShow] = React.useState(false);

React.useEffect(() => {
 
    console.log("Do something")

} , [show]);

我想知道反应的类组件中有什么可以像这样做？是否有任何生命周期方法具有此功能？

Answer 1

您可以使用componentDidMount和的组合componentDidUpdate：

componentDidMount(){ //use this method if you want to trigger the side effect first time
   console.log("Do something")
}

componentDidUpdate(prevProps,prevState) {
  if (this.state.show !== prevState.show) {
    console.log("Do something");
  }
}

Answer 2

控制您的组件使用shouldComponentUpdate（文章链接）。它有 2 个参数nextProps和nextState。您可以比较this.state.field，nextState.field如果它们不同，则会产生副作用：

class ClickButton extends React.Component {
              
           constructor(props) {
               super(props);
               this.state = {class: "off", label: "press"};
               this.press = this.press.bind(this);
           }
           
           shouldComponentUpdate(nextProps, nextState){
               if(nextState.class !== this.state.class){
                  return true
               }
               return false;
           }
           
           press(){
               var className = (this.state.class==="off")?"on":"off";
               this.setState({class: className});
           }
           render() {
               return <button onClick={this.press} className={this.state.class}>{this.state.label}</button>;
           }
       }

如果 ypu 从该方法返回true，则表示 React 组件应该更新，否则为false，组件不会更新。

您也可以从PureComponent（PureComponent）扩展，它将自动遵循道具和状态：

class ClickButton extends React.PureComponent {
              
           constructor(props) {
               super(props);
               this.state = {class: "off", label: "press"};
                  
               this.press = this.press.bind(this);
           }
           
           press(){
               var className = (this.state.class==="off")?"on":"off";
               this.setState({class: className});
           }
           
           render() {
               return <button onClick={this.press} className={this.state.class}>{this.state.label}</button>;
           }
       }

但它进行了肤浅的比较（通过参考）。如果您的状态中有嵌套字段，并且它们正在更改，则 PureComponent 不会重新呈现 Component。

还有其他方法，例如componentDidUpdate（链接）和componentDidMount（链接）。首先，在组件重新渲染时调用：

componentDidUpdate(prevState) {
  if (this.state.userID !== prevState.userID) {
    this.fetchData(this.state.userID);
  }
}

说到第二个，它会在 DOM 中设置组件时调用。

在你的情况下使用 componentDidUpdate