React中Component和PureComponnt组件的区别

两种组件的声明方式，都可以创建React组件
import React,{Component,PureComponent} from 'react'
class A extends Component{
//....
}

class B extends PureComponent{
//...
}

区别：

两种声明组件的方式区别不大，最主要的区别就是shouldComponentUpdate钩子函数是否可以使用

• Component组件内， 当props或state发生变化时， 会取决于shouldComponentUpdate()函数返回的值 来决定是否会重新渲染组件，true渲染 false不渲染,。当父组件的state或props更新时，无论子组件的props和state是否更新 都会重新渲染子组件， 这样会有性能消耗。
• PureComponent组件内，不可使用shouldComponentUpdate钩子函数，组件是否重新渲染会自动判断props和state是否发生变化， 浅比较：对于引用类型的数据，只比较变量的地址是否改变。对比之后 没有变化不渲染。

下面写一个例子来实践一下

import React, { PureComponent } from 'react';
class AddModal extends PureComponent<IProps, State> {
  state = {
    arr: [1,2,3,4,5],
  };
  
handleClick = () => {
    const { arr } = this.state
    arr.pop();
    this.setState({
      arr,
    })
}

render(){
  const { arr } = this.state
  return <div>
      <button onClick={this.handleClick}>click</button>
      <p>arr</p>
  </div>
}
// 页面最初展示的是 12345
// 当我们点击按钮之后 页面并没有变化 展示的还是12345
}

• Component

import React from 'react';
class AddModal extends React.Component<IProps, State> {
  state = {
    arr: [1,2,3,4,5],
  };
  
handleClick = () => {
    const { arr } = this.state
    arr.pop();
    this.setState({
      arr,
    })
}

render(){
  const { arr } = this.state
  return <div>
      <button onClick={this.handleClick}>click</button>
      <p>arr</p>
  </div>
}
// 页面最初展示的是 12345
// 当我们点击按钮之后 页面发生变化 展示的是1234
}