Loading... ## 理解 1. 组件从创建到死亡它会经历一些特定的阶段。 2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。 3. 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。 ![20210615230015219.png][1] ### 初始化阶段 > 由ReactDOM.render()触发---初次渲染 - constructor() - componentWillMount() - render() - componentDidMount() ### 更新阶段 > 由组件内部this.setSate()或父组件重新render触发 - shouldComponentUpdate() - componentWillUpdate() - render() - componentDidUpdate() ### 卸载组件 > 由ReactDOM.unmountComponentAtNode()触发 - componentWillUnmount() ![20210615230015519.png][2] ### 初始化阶段 > 由ReactDOM.render()触发 --- 初次渲染 - constructor() - *getDerivedStateFromProps* - render() - componentDidMount() ### 更新阶段 > 由组件内部this.setSate()或父组件重新render触发 - *getDerivedStateFromProps* - shouldComponentUpdate() - render() - *getSnapshotBeforeUpdate* - componentDidUpdate() ### 卸载组件 > 由ReactDOM.unmountComponentAtNode()触发 - componentWillUnmount() ## 重要的勾子 - render：初始化渲染或更新渲染调用 - componentDidMount：开启监听, 发送ajax请求 - componentWillUnmount：做一些收尾工作, 如: 清理定时器 ## 即将废弃的勾子 - componentWillMount - componentWillReceiveProps - componentWillUpdate > 注意：现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。 [1]: /usr/uploads/2022/12/1547236435.png [2]: /usr/uploads/2022/12/3943770602.png 最后修改：2022 年 12 月 07 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏