react---生命周期

目录

1.新旧生命周期对比

2.常用的3个钩子函数

3.生命周期（旧）

4.生命周期（新）

---

React 中为我们提供了一些生命周期钩子函数，让我们能在 React 执行的重要阶段，在钩子函数中做一些事情。

1.新旧生命周期对比

新的生命周期 对于 旧的生命周期 ，废弃（即将废弃）了 三个 生命钩子: componentWillMount、componentWillReceiveProps、componentWillUpdate；

新提出了两个生命钩子：getDerivedStateFromProps(获取派生状态)、getSnapshotBeforeUpdate（存快照，比如用于存放滚动条更新前位置）

阶段	旧生命周期	新生命周期
初始化阶段：由ReactDOM.render() 触发 -----初次渲染	1. constructor() 2. componentWillMount() 3. render() 4. componentDidMount()	1. constructor() 2. getDerivedStateFromProps()  3. render()  4. componentDidMount()
更新阶段： 由组件内部this.setState() 或父组件render()触发	1. shouldComponentUpdate()----更新的阀门，要有return值，true或false 2. componentWillUpdate() 3. render()   4. componentDidUpdate()	1. getDerivedStateFromProps（） 2. shouldComponentUpdate() 3. render() 4. getSnapshotBeforeUpdate() 5. componentDidUpdate()
卸载组件：由ReactDOM.unmount ComponentAtNode() 触发	componentWillUnmount()

2.常用的3个钩子函数

•  render(): 初始化渲染或更新渲染调用
•  componentDidMount()：一般在这做一些初始化的事，例如：开启定时器、发送ajax请求、订阅消息
• componentWillUnmount()：一般在这做一些收尾的事，例如：清理定时器、取消订阅消息

3.生命周期（旧）

• componentWillMount()---组件将要挂载
•  componentDidMount()---组件已经挂载
• componentWillUnmount() ---组件将要卸载
• shouldComponentUpdate()---组件是否应该更新--更新的阀门，必须return true/false.主要用于性能优化，会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。不建议深层比较，会影响性能。如果返回false，则不会调用componentWillUpdate、render和componentDidUpdate
• componentWillUpdate()---组件将要更新
• componentDidUpdate()---组件已经更新
• componentWillReceiveProps(props)---组件将要接收props,当父组件改变的时候,子组件会调这个钩子，初次渲染是不会执行这个钩子的。

componentWillMount、componentWillReceiveProps、componentWillUpdate生命周期方法经常被误解和滥用，新版本中并不推荐持有这三个函数，取而代之的是带有UNSAFE_ 前缀的三个函数，比如: UNSAFE_ componentWillMount。即便如此，其实React官方还是不推荐大家去使用，在以后版本中有可能会去除这几个函数。

【例子】

4.生命周期（新）

getDerivedStateFromProps

• 首先，该函数会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用；
• 该函数必须是静态的；
• 给组件传递的数据（props）以及组件状态（state），会作为参数到这个函数中；
• 该函数也必须有返回值，返回一个Null或者state对象。因为初始化和后续更新都会执行这个方法，因此在这个方法返回state对象，就相当于将原来的state进行了覆盖，所以倒是修改状态不起作用。
• 注意：如下代码【return props】时，state的值在任何时候都取决于传入的props，不能被改变

 // 若state值在任何时候都取决于props,那么可以使用getDerivedStateFromProps
 static getDerivedStateFromProps(props, state) {
    console.log("count--getDerivedStateFromProps--", props, state);
    // return props;
    return null
  }
....

 ReactDOM.render(, document.getElementById("app"));

getSnapshotBeforeUpdate

可以使组件在 DOM 真正更新之前捕获一些信息（例如滚动位置），此生命周期返回的任何值都会作为参数传递给componentDidUpdate(）。如不需要传递任何值，那么请返回 null

getSnapshotBeforeUpdate() {
  return this.refs.list.scrollHeight;
}
 //组件已经更新
componentDidUpdate(prevProps, prevState, snapshotValue) {
    console.log(prevProps, prevState, snapshotValue);
    this.refs.list.scrollTop+=this.refs.list.scrollHeight-snapshotValue
}

【例子-getSnapshotBeforeUpdate()用于记录上次滚动的位置】