React 实现父组件更新子组件不更新[不重新执行render函数]

彭小华

一步一步

概述：

父组件有包含有任意个子组件；
在父组件重新执行 render 函数的时候，同更改的状态没有直接相关的子组件，实现不调用 render 函数；
例如：

子组件接受父组件的一个能够改变父组件count状态值的方法；
要求 count 发生改变，父组件重新执行 render函数的时候，子组件不执行 render 函数

实现实例：

父组件是类组件 - 子组件是类组件

import React from "react"
export default class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      count: 0
  // update count
  onClick = () => {
    this.setState(state => ({...this.state, count: this.state.count + 1}))
  render(){
    console.log('update App')
    return(
        {/* this.onClick 没有发生更改 */}
        <Button onClick={this.onClick}></Button>
        <div>{this.state.count}</div>
// PureComponent 组件会自动比对 传递过来的
// props 如果 props 没有发生更改 
// 当前组件不更新
class Button extends React.PureComponent{
  render(){
    console.log('update Button')
    return(
      <button onClick={this.props.onClick}>INCREMENT</button>

父组件是类组件 - 子组件是函数组件

import React from "react"
// React.memo 类似 React.PureComponent
// 会浅比props
// 如果props没有发生改变
// 组件不会重新 调用 render
const Button = React.memo(props => {
  return(
    <button onClick={props.onClick}>INCREMENT</button>
export default class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      count: 0
  // update count
  onClick = () => {
    this.setState(state => ({...this.state, count: this.state.count + 1}))
  render(){
    console.log('update App')
    return(
        {/* this.onClick 没有发生更改 */}
        <Button onClick={this.onClick}></Button>
        <div>{this.state.count}</div>