第二十九章：memo

memo 作用

• 组件仅在它的props 发生变化的时候进行重新渲染

memo 与PureComponent 区别

• PureComponent 只能用于class组件，memo 用于function组件

示例

效果

import React, { Component , memo} from 'react'

export default class App extends Component {
  state = {
    father: 'kkk',
    child: 'hhh'
  }
  render() {
    return (
      <div>
        <Child value={this.state.child}></Child>
        <button onClick={() => {
          this.setState({
            father: '222'
          })
        }}>clikc</button>
        <button onClick={() => {
          this.setState({
            child: 'kkk'
          })
        }} >click2</button>
      </div>
    )
  }
}

const Child = memo((props) => {
  console.log('111')
  return (
    <div>Child-{props.value}</div>
  )
})