在 class 个组件生命周期中具有相等依赖性的 React 功能组件 useEffect 挂钩

Question

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

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

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

} , [show]);

我想知道在 React 的 class 组件中有什么可以用来做这件事？是否有任何生命周期方法具有此功能？

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 (link for the article)。它有两个参数 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 return 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 不会重新呈现组件。

还有其他方法，例如componentDidUpdate (link) and componentDidMount (link)。首先，组件重新渲染时调用：

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

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

在你的情况下使用 componentDidUpdate

在 class 个组件生命周期中具有相等依赖性的 React 功能组件 useEffect 挂钩

React functional component useEffect hook with dependency equal in class component lifecycles

javascript

reactjs

react-lifecycle

react-hooks

react-lifecycle-hooks