生命周期

• 意义 ：组件的生命周期有助于理解组件的运行方式、完成更复杂的功能、分析组件错误原因等
• 组件的生命周期：从组件被创建到挂载到页面中运行，再到组件不用时卸载的过程
• 钩子函数的作用：为开发人员在不同阶段操作组件提供子时机
• 只有 类组件 才有生命周期

React lifecycle methods diagram (wojtekmaj.pl) (opens new window)

挂载阶段

钩子函数	触发时机	作用
constructor	创建组件时，最新执行	1.初始化state 2.创建Ref等
render	每次组件渲染都会触发	渲染 UI （注意不能调用 setState()）
componentDidMount	组件挂载 (完成DOM渲染) 后	1.发送网络请求 2.DOM操作

除了 render() 其它都执行一次

更新阶段

有三种情况会导致 render() 的触发更新

• New props : 来自父组件的数据更新
• setState : 对自己的数据的更新
• forceUpdate : 强制跟 UI

钩子函数 componentDidUpdate 触发执行顺序

1. 触发父组件的 render 函数
2. 触发子组件的 render 函数
3. 触发子组件的 componentDidUpdate 函数
4. 触发父组件的 componentDidUpdate 函数

卸载阶段

componentWillUnmount 组件卸载，执行清理工作（比如：清理定时器）

todo案例优化

自动聚焦

在之前写到 todo 案例中，所有的 input 都写在一个 ul 列表之中，而创建的 Ref = React.createRef() 加到 input 属性的时候，多个 input 使用的同一个 Ref 属性，所以在双击的时候触发的 this.inputRef.current.focus() 方法，只能在最后一个被覆盖加上了属性的 input 框才能正常使用 this.inputRef.current 的打印是最后一个被覆盖的

setState

setState() 函数是异步更新的，多次调用修改同一数据会有覆盖效果

function = ()=>{
    this.setState({
        count:this.state.coun+1
    })
    this.setState({
        count:this.state.coun+1
    })
     this.setState({
        money:2000
    }) 
    this.setState({
        count:this.state.coun+1
    })
     this.setState({
        count:this.state.coun+2
    })
}

此处的数据更新调用相当于

this.setState({
  count:this.state.coun+2,
  money:2000
})

需要解决这种覆盖问题，多次调用 setState()

this.setState((state)=>{
    return {
        count:state.count+1
    }
})
this.setState((state)=>({count:state.count+1})
this.setState((state)=>({count:state.count+1})              

组件更新机制

setState() 的两个作用：1. 修改 state 2.更新 UI

过程：父组件重新渲染时，也会重新渲染子组件，但是只会更新子组件树

一些性能优化

1.减轻 state

• 减轻 state ：只存储跟组件渲染相关的数据
• 注意：不用做渲染的数据不要放在 state 中，比如定时器
• 对于需要在多个方法中用到的数据，应该直接放在 this 中

componentDidMount(){
    this.timerId = setInterval(()=>{},1000)
}

2.shouldComponentUpdate

shouldComponentUpdate(nextProps){
    //nextProps 下一个要渲染组件的参数
    if(this.props.money === nextProps.money){
       return false //如果不需要改动就不更新
    }else {
       return true //如果有发送改变就更新
    }
}

这是一个不常用的 钩子函数 ， 在复杂的数据类型中可能不适用

第二个参数 nextState 和下一个要渲染的 state 做对比

shouldComponentUpdate(nextProps,nextState){
    //nextProps 下一个要渲染组件的参数
    if(this.state.current === nextState.current){
       return false //如果不需要改动就不更新
    }else {
       return true //如果有发送改变就更新
    }
}

纯组件

React.PureComponent

其功能与 ReactComponent 相似，别去在于 PureComponent 内部自动实现了 shouldComponentUpdate 钩子函数，不需要手动去实现

原理： 纯组件内部通过分别对比前后两次 props 和 state 的值，来绝对是否重新渲染组件