生命周期概述
事物从生到死的过程, 我们称之为生命周期
什么是生命周期方法
事物在从生到死过程中, 在特定时间节点调用的方法, 我们称之为生命周期方法
例如像我们人类，从生到死的过程有这么几个特定的时间点，就是上，幼儿园，小学，中学...
React 组件生命周期方法
组件从生到死的过程, 在特定的时间节点调用的方法, 我们称之为组件的生命周期方法
官方文档：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
- constructor 函数: 组件被创建的时候, 就会调用
- render 函数: 渲染组件的时候, 就会调用
- componentDidMount 函数：组件已经挂载到 DOM 上时，就会回调
- componentDidUpdate 函数：组件已经发生了更新时，就会回调
- componentWillUnmount 函数：组件即将被移除时，就会回调
经过了如上的介绍方法之后，我们再来一一的写个 demo 试一下就好了，该知识点就可以过掉了。
挂载时阶段
App.js:
import React from 'react'; class Home extends React.Component { constructor(props) { super(props); console.log('挂载时-constructor'); } render() { console.log('挂载时-render'); return ( <div> </div> ) } componentDidMount() { console.log('挂载时-componentDidMount'); } } class App extends React.Component { render() { return ( <div> <Home/> </div> ) } } export default App;
更新时阶段
App.js:
import React from 'react'; class Home extends React.Component { constructor(props) { super(props); this.state = { count: 0 } } render() { if (this.state.count === 0) { console.log('挂载时-render'); } else { console.log('更新时-render'); } return ( <div> <button onClick={() => { this.btnClick() }}>Home按钮 </button> </div> ) } componentDidUpdate(prevProps, prevState, snapshot) { console.log('更新时-componentDidUpdate'); } btnClick() { this.setState({ count: 1 }); } } class App extends React.Component { render() { return ( <div> <Home/> </div> ) } } export default App;
卸载时阶段
App.js:
import React from 'react'; class Home extends React.Component { render() { return ( <div> <p>Home</p> </div> ) } componentWillUnmount() { console.log('卸载时-componentWillUnmount'); } } class App extends React.Component { constructor(props) { super(props); this.state = { flag: true } } render() { return ( <div> {this.state.flag && <Home/>} <button onClick={() => { this.btnClick() }}>App按钮 </button> </div> ) } btnClick() { this.setState({ flag: false }); } } export default App;
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
