ReactJS shouldComponentUpdate()用法及代碼示例

shouldComponentUpdate方法允許我們退出複雜的反應更新生命周期，以避免在每個re-render上一次又一次地調用它。僅當傳遞給它的道具發生更改時，它才會更新組件。

shouldComponentUpdate方法主要用於優化性能並提高網站的響應能力，但不依賴它來阻止呈現，因為它可能會導致錯誤。

用法:

shouldComponentUpdate(nextProps, nextState)

返回值：默認情況下，它返回true，如果返回false，則不會調用render()，componentWillUpdate()和componentDidUpdate()方法。

例：在此示例中，我們將構建一個計數器應用程序，該應用程序僅在其props值更改時才呈現。

App.js

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 ( 
    <div className="container"> 
      <div> 
        <Counter1 value={counter1} onClick={increase1} /> 
      </div> 
      <div> 
        <Counter2 value={counter2} onClick={increase2} /> 
      </div> 
    </div> 
  ); 
}; 
  
export default App;

不使用shouldComponentUpdate()方法：

• Counter1.js

  Javascript

  import React, { Component } from "react"; 
    
  class Counter1 extends Component { 
    render() { 
      console.log("Counter 1 is calling"); 
      return ( 
        <div> 
          <h2>Counter 1:</h2> 
          <h3>{this.props.value}</h3> 
          <button onClick={this.props.onClick}>Add</button> 
        </div> 
      ); 
    } 
  } 
    
  export default Counter1;

• Counter2.js

  Javascript

  import React, { Component } from "react"; 
    
  class Counter2 extends Component { 
    render() { 
      console.log("Counter 2 is calling"); 
      return ( 
        <div> 
          <h2>Counter 2:</h2> 
          <h3>{this.props.value}</h3> 
          <button onClick={this.props.onClick}>Add</button> 
        </div> 
      ); 
    } 
  } 
    
  export default Counter2;
• Output:
  

使用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 ( 
        <div> 
          <h2>Counter 1:</h2> 
          <h3>{this.props.value}</h3> 
          <button onClick={this.props.onClick}>Add</button> 
        </div> 
      ); 
    } 
  } 
    
  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 ( 
        <div> 
          <h2>Counter 2:</h2> 
          <h3>{this.props.value}</h3> 
          <button onClick={this.props.onClick}>Add</button> 
        </div> 
      ); 
    } 
  } 
    
  export default Counter2;
• Output: