React纯组件的使用

1. 有无必要使用纯组件

• 如果应用不是很大型,页面渲染效率使用纯组件与非纯组件差别不大,尽量使用组件
• 应用一定注意,setState时子组件依赖渲染的属性一定要传递给子组件,不然父组件setState之后,子组件接收到的props未变,子组件不会render
• 纯组件的比较是浅比较,引用地址未变,内部值发生变化并不会render,即使用问题2所指
• dva的connect会对组件也进行一个纯组件的处理
• 更多情况下使用需要看具体需求

2. 使用可能产生的问题

• 1). 如果子组件依赖于父组件的重新渲染,而进行重新渲染,纯组件会导致不渲染
• 2). 如果子组件依赖的数据只是内部数据变更,引用地址未变则会导致子组件不会重新渲染

// 父组件
export default class Parent extends Component {
  state = {
    Arr: [1]
  }
  changeArr = () => {
    this.state.push(2)
    this.setState(this.state)
  }
  render() {
    return (
      <div>
        <Children Arr={Arr} />
        <button onClick={this.changeArr}>修改Arr</button>
      </div>
    )
  }
}
 
class Children extends Component {
  render() {
    const { Arr } = this.props
    return <div>{Arr.map(item => item)}</div>
  }
}