第8章：React生命周期

第8章：React生命周期

初始化阶段

• componentWillMount: render 之前最后一次修改状态的机会
• render: 只能访问 this.props 和 this.state, 不允许修改状态和 DOM 输出
• componentDidMount: 成功 render 并渲染完成真实 DOM 之后触发, 可以修改 DOM

运行中阶段

• componentWillReceiveProps: 父组件修改属性触发
• shouldComponentUpdate: 返回 false 会阻止 render 调用
• componentWillUpdate: 不能修改属性和状态
• render: 只能访问 this.props 和 this.state, 不允许修改状态和 DOM 输出
• componentDidUpdate: 可以修改 DOM

销毁阶段

• componentWillUnmount: 在删除组件之前进行清理操作, 比如计时器和事件监听器

老生命周期的问题

• componentWillMount: 在 ssr 中 这个方法将会被多次调用, 所以会重复触发多遍, 同时在这里如果绑定事件, 将无法解绑, 导致内存泄漏, 变得不够安全高效逐步废弃
• componentWillReceiveProps: 外部组件多次频繁更新传入多次不同的 props, 会导致不必要的异步请求
• componetWillupdate: 更新前记录 DOM 状态, 可能会做一些处理, 与 componentDidUpdate 相隔时间如果过长, 会导致 状态不太信

新生命周期的替代

• getDerivedStateFromProps: 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子), 返回一个对象作为新的 state, 返回 null 则说明不需要在这里更新 state

// 老的生命周期的写法
componentDidMount()
{
    if (this.props.value !== undefined) {
        this.setState({current: this.props.value})
    }
}
componentWillReceiveProps(nextProps)
{
    if (nextProps.value !== undefined) {
        this.setState({current: nextProps.value})
    }
}
// 新的生命周期写法
static getDerivedStateFromProps(nextProps)
{
    if (nextProps.value !== undefined) {
        return {current: nextProps.value}
    }
    return null
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• getSnapshotBeforeUpdate: 取代了 componetWillUpdate, 触发时间为 update 发生的时候, 在 render 之后 dom 渲染之前返回一个值, 作为 componentDidUpdate 的第三个参数

// 新的数据不断插入数据前面, 导致我正在看的数据向下走, 如何保持可视区依旧是我之前看的数据呢？
getSnapshotBeforeUpdate()
{
    return this.refs.wrapper.scrollHeight
}
componentDidUpdate(prevProps, prevState, preHeight)
{
    // if(preHeight===200)return ;
    this.refs.wrapper.scrollTop += this.refs.wrapper.scrollHeight - preHeight
}
{height: "200px", overflow: "auto"}}} ref="wrapper" >
    < ul >
        .........