React——Component的优化问题

一.Component存在的两个问题

1.只要执行SetState（）,即使不改变数据状态组件也会重新渲染render()

2.只要当前组件执行render()，就会自动执行子组件render() 

以上两个问题导致执行效率变低

 将setState()设置为空，不改变名字。

import React, { Component } from 'react'
export default class App extends Component {
  state={
    name:'张三'
  }
edit=() => {
  this.setState({})  //设置为空，不改变名字，虚晃一枪
}
  render() {
    console.log('父组件render被调用');   //父组件render被调用 
    return (
      <div>
        <p>名字：{this.state.name}</p>
        <Child Cname={this.state.name}></Child>
        <button onClick={this.edit}>点我一下</button>
      </div>
    )
  }
}
class Child extends Component{ 
  render(){
    console.log('子组件render被调用'); //子组件render被调用
    return(
      <>
      <p>{this.props.Cname}</p>
      </>
    )
  }
}

 每点击一次，父组件，子组件都被调用。但是我们让数据没改变，这样就造成性能浪费

 

 

1.高效做法

只有组件中的state或props数据改变时才重新渲染render()

2. 造成低效的原因

Component中的shouldComponerntUpdate()总是返回true

二.解决方案 

 一共有两种解决方案

1.重写 shouldComponent()方法  （了解）

2.PureComponent()  （ 项目中常见）

 1.重写shouldComponentUpdate()方法

shouldComponentUpdate(nextprops,nextstate)：可以接收两个参数

nextprops,nextstate：分别是改变后的props,state

 父组件中：

shouldComponentUpdate(nextprops,nextstate){
  console.log(this.props,this.state);
  console.log(nextprops,nextstate);
  if(this.state.name===nextstate.name){
    return false
  }
  return true
  
}

 子组件中：

shouldComponentUpdate(nextprops,nextstate){

  if(this.props.name===nextprops.name){
    return false
  }
  return true
  
}

2.PureComponent() 

1.引入PureComponent

2.使用

 

 这样问题也就完美解决

说明：PureComponent只是进行了state和props数据的浅比较，因此如果state是一个数组，要给数组添加元素不能用push......,使用[...array,newdate]