React--组件更新机制&组件性能优化

1.1setState{}的两个作用：

• 修改state
• 更新组件（UI）

1.2过程：父组件重新渲染时，也会重新渲染子组件。但只会渲染当前组件子树（当前组件及其所有子组件）

 2.减轻state

class Hello extends Component{
    componentDidMount(){
//timeId存储到this中，而不是state中
        this.timeId = setInterval(()=>{},2000)
    }
    commponentWillUnmount(){
        clearInterval(this.timerId)
    }
    render(){...}
}

• 减轻state：只存储跟组件渲染相关的数据（比如：count/列表数据/loading等）
• 注意：不用做渲染的数据不要放在state中，比如定时器id等
• 对于这种需要在多个方法中用到的数据，应该放在this中

3.避免不必要的重新渲染

• 组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
• 问题：子组件没有任何变化时也会重新渲染
• 如何避免不必要的重新渲染呢？
• 解