React 基础笔记(React缓存PureComponent与memo)(三十)

React-PureComponent 与 React-memo

无论是 PureComponent 还是 React-memo 使用场景

当父元素的数据更新的时候,子元素本来不需要重新渲染。可现在的机制它被强制渲染。这样就有了 PureComponent 与 memo 的用武之地

PureComponent

• 它主要用于类。当组件是一个类的时候 使用它可以做到不渲染

• 子组件这里必须要继承 React.PureComponent

import React, { Fragment } from 'react'
class SecondComponent extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      message: '子组件',
    }
  }
  render() {
    console.log('重新被渲染')
    return (
      <Fragment>
        <div>{this.state.message}</div>
      </Fragment>
    )
  }
}

export default SecondComponent

• 父组件

import React, { Component, Fragment } from 'react'
import SecondFragment from './Second.js'
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '首页',
      count: 0,
    }
    this.handleClick = this.handleClick.bind(this)
  }
  render() {
    return (
      <Fragment>
        <div>{this.state.message}</div>
        <div>{this.state.count}</div>
        <button onClick={this.handleClick}>点击</button>
        <SecondFragment time="22"></SecondFragment>
      </Fragment>
    )
  }
  handleClick() {
    let value = this.state.count
    this.setState({
      count: value + 1,
    })
  }
}

export default App

memo 只能用于函数

• 子组件 必须引入 memo,最外面用 memo 包裹住

import React, { memo } from 'react'

const ChildComponent = memo(function Child(props) {
  console.log('重新被渲染')
  return <div>这就是子组件{props.time}</div>
})
export default ChildComponent

• 父组件

import React, { Component, Fragment } from 'react'
import SecondFragment from './Second.js'
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '首页',
      count: 0,
    }
    this.handleClick = this.handleClick.bind(this)
  }
  render() {
    return (
      <Fragment>
        <div>{this.state.message}</div>
        <div>{this.state.count}</div>
        <button onClick={this.handleClick}>点击</button>
        <SecondFragment time="22"></SecondFragment>
      </Fragment>
    )
  }
  handleClick() {
    let value = this.state.count
    this.setState({
      count: value + 1,
    })
  }
}

export default App