ReactJS shouldComponentUpdate() 方法

shouldComponentUpdate方法允许我们退出复杂的反应更新生命周期，以避免在每次重新渲染时一次又一次地调用它。如果传递给它的道具发生变化，它只会更新组件。

shouldComponentUpdate方法主要用于优化性能和提高网站的响应能力，但不要依赖它来阻止渲染，因为它可能会导致错误。

句法：

shouldComponentUpdate(nextProps, nextState)

返回值：默认情况下返回 true，如果返回 false，则不会调用render() 、 componentWillUpdate()和componentDidUpdate()方法。

示例：在此示例中，我们将构建一个仅在其 props 值更改时才呈现的计数器应用程序。

应用程序.js

Javascript

import React, { useState } from "react";
import Counter1 from "./Counter1";
import Counter2 from "./Counter2";
  
  
const App = () => {
  
// Using useState hooks for defining state
  const [counter1, setCounter1] = useState(0);
  
  const increase1 = () => {
    setCounter1(counter1 + 1);
  };
  const [counter2, setCounter2] = useState(0);
  
  const increase2 = () => {
    setCounter2(counter2 + 1);
  };
    
  return (
    

      

        
      
      

        
      
    
  );
};
  
export default App;

不使用 shouldComponentUpdate() 方法：

• Counter1.js

  Javascript

  import React, { Component } from "react";
    
  class Counter1 extends Component {
    render() {
      console.log("Counter 1 is calling");
      return (
        
  
          
  Counter 1:
          
  {this.props.value}
          Add
        
      );
    }
  }
    
  export default Counter1;
  

• Counter2.js

  Javascript

  import React, { Component } from "react";
    
  class Counter2 extends Component {
    render() {
      console.log("Counter 2 is calling");
      return (
        
  
          
  Counter 2:
          
  {this.props.value}
          Add
        
      );
    }
  }
    
  export default Counter2;
  

• 输出：
  

使用 shouldComponentUpdate() 方法：

• Counter1.js

  Javascript

  import React, { Component } from "react";
    
  class Counter1 extends Component {
    shouldComponentUpdate(nextProps) {
      // Rendering the component only if 
      // passed props value is changed
    
      if (nextProps.value !== this.props.value) {
        return true;
      } else {
        return false;
      }
    }
    render() {
      console.log("Counter 1 is calling");
      return (
        
  
          
  Counter 1:
          
  {this.props.value}
          Add
        
      );
    }
  }
    
  export default Counter1;
  

• Counter2.js

  Javascript

  import React, { Component } from "react";
    
  class Counter2 extends Component {
      shouldComponentUpdate (nextProps) {
        // Rendering the component only if
        // passed props value is changed
    
        if (nextProps.value !== this.props.value) {
          return true;
        } else {
          return false;
        }
      }
    render() {
      console.log("Counter 2 is calling");
      return (
        
  
          
  Counter 2:
          
  {this.props.value}
          Add
        
      );
    }
  }
    
  export default Counter2;
  

• 输出：