react中component效率低的原因以及解决办法

component效率低的原因以及解决办法：

（1）父组件并没有给子组件传递数据，但是父组件中

this.setState({

carName:‘迈巴赫’

})

的状态被改变的时候，子组件也会跟着重新渲染

import React, { Component } from 'react'
import './index.css'

export default class Parent extends Component {
    state = {
        carName:"奔驰c36"
    }
    changeCar = ()=> {
      const {carName} = this.state
      this.setState({
        carName:'迈巴赫'
      })
    }
    render() {
        console.log('Parent--render')
        return (
            <div className="parent">
              <h3>我是parent组件</h3>
              <span>我的车名字是{this.state.carName}</span>
              <button onClick={this.changeCar}>点我换车</button>
              <Child />
              {/* carName={this.state.carName} */}
            </div>
        )
    }
}

class Child extends Component {
    render() {
        console.log('Child--render')
        return (
            <div className="child">
              <h1>我是child组件</h1>
              {/* <h3>我是{this.props.carName}</h3> */}
            </div>
        )
    }
}

（2）父组件中的状态改变this.setState里边是空的，即使这样，父组件还是会重新render一下，子组件也会跟着render一下

import React, { Component } from 'react'
import './index.css'

export default class Parent extends Component {
    state = {
        carName:"奔驰c36"
    }
    changeCar = ()=> {
      const {carName} = this.state
      this.setState({
      
      })
    }
    render() {
        console.log('Parent--render')
        return (
            <div className="parent">
              <h3>我是parent组件</h3>
              <span>我的车名字是{this.state.carName}</span>
              <button onClick={this.changeCar}>点我换车</button>
              <Child />
              {/* carName={this.state.carName} */}
            </div>
        )
    }
}

class Child extends Component {
    render() {
        console.log('Child--render')
        return (
            <div className="child">
              <h1>我是child组件</h1>
              {/* <h3>我是{this.props.carName}</h3> */}
            </div>
        )
    }
}

解决办法：

引入PureComponent，然后把conponent换成PureComponent

import React, { PureComponent } from 'react'
import './index.css'

export default class Parent extends PureComponent {
    state = {
        carName:"奔驰c36"
    }
    changeCar = ()=> {
      const {carName} = this.state
      this.setState({
        carName:'迈巴赫'
      })
    }
    render() {
        console.log('Parent--render')
        return (
            <div className="parent">
              <h3>我是parent组件</h3>
              <span>我的车名字是{this.state.carName}</span>
              <button onClick={this.changeCar}>点我换车</button>
              <Child />
              {/* carName={this.state.carName} */}
            </div>
        )
    }
}

class Child extends PureComponent {
    render() {
        console.log('Child--render')
        return (
            <div className="child">
              <h1>我是child组件</h1>
              {/* <h3>我是{this.props.carName}</h3> */}
            </div>
        )
    }
}