``` import React, { Component } from 'react' class Foo extends Component { // 加上這個后，會比較傳入的 props 值，如果前后一致，則不渲染 shouldComponentUpdate(nextProps, nextState) { if (nextProps.name === this.props.name) { return false } return true } render() { console.log('foo render') return null } } export default class App extends Component { state = { count: 0 } render() { return ( <div> // 原本點擊事件觸發時，Foo組件會重新渲染 <button onClick={() => this.setState({count: this.state.count+1})} >add</button> <Foo name="Mike"/> </div> ) } } ``` 或者使用PureComponent 聲明組件 ``` import React, { Component, PureComponent } from 'react' class Foo extends PureComponent { render() { console.log('foo render') return null } } ``` 但是PureComponent只會對比傳入的屬性第一級，不會對比屬性內部,如下，傳入 Foo組件的person中age發生了變化，但是Foo組件沒有重新渲染 ``` import React, { Component, PureComponent } from 'react' // PureComponent 只會對比傳入屬性的對比，不會判斷內部屬性 class Foo extends PureComponent { render() { console.log('foo render') return <div>{this.props.person.age}</div> } } export default class App extends Component { state = { count: 0, person: { age: 1 } } render() { const person = this.state.person return ( <div> <button onClick={() => {person.age++;this.setState({person})}} >add</button> <Foo person={person}/> </div> ) } } ``` 或者用 memo 包裹無狀態組件，相當于 PureComponent ``` const Foo = memo((props) => { console.log('foo render') return <div>{props.person.age}</div> }) ```