React 初探 [五] React 组件的生命周期

编程入门行业动态更新时间:2024-10-07 08:19:43

React 初探 [五] React 组件的<a href=https://www.elefans.com/category/jswz/34/1766643.html style= 生命周期"/>

React 初探 [五] React 组件的生命周期

说起生命周期，最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期，再者是Vue 组件，那么今天要梳理的是React 组件的生命周期，可见对生命周期的理解和掌握对组件化开发时非常重要的。

概述

生命周期是什么？生命周期就是指一个对象的生老病死，而此处的对象就是React 组件，组件的生命周期也就是从其创建到销毁的过程，而且在整个过程中，React 组件暴露出来了一些函数，在特定的阶段进行回调，我们称之为生命周期回调函数或者钩子函数，这些回调函数主要是给开发暴露了操作的入口，在某个特定的阶段可以做一些需要的操作。

主要钩子函数

constructor()
componentWillMount()
render()
componentDidMount()
componentWillUpdate()
componentWillUnmount()

主要执行过程

1、第一次初始化渲染显示：ReactDOM.render()

constructor() 创建对象初始化 state
componentWillMount() :将要插入的回调
render(): 用于插入虚拟DOM 回调
componentDidMount() 已经插入回调

2、每次更新state ：this.setState()

componentWillUpdate():将要更新回调
render() : 更新重新渲染

3、移除组件：ReactDOM.unmountComponentAtNode(containerDom)

componentWillUnmount() 组件将要被移除回调

小案例练习

需求：

让指定的文本做显示/隐藏的动画
切换时间为2s
点击按钮从界面中移除组件界面

gif图我还不会弄，所以效果把代码贴出来需要的自己跑起来看效果吧

code:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>组件生命周期</title>
</head><body><div id="example"></div><script src=".4.0/umd/react.development.js"></script><script src=".4.0/umd/react-dom.development.js"></script><script src=".7.2/prop-types.js"></script><script src=".26.0/babel.min.js"></script><script type="text/babel">/* 需求 ：自定义组件 1、让指定的文本做显示/隐藏的动画2、切换时间为2s3、点击按钮从界面中移除组件界面*/class Life extends React.Component{constructor(props){super(props)console.log('===constructor===')//初始化化状态this.state ={opacity:1}this.distoryComponent = this.distoryComponent.bind(this)}distoryComponent(){// 组件销毁也要把定时器销毁ReactDOM.unmountComponentAtNode(document.getElementById('example'))}render(){console.log('===render====')const {opacity} = this.statereturn (<div><h2 style={{opacity}}>{this.props.msg}</h2><button onClick={this.distoryComponent}>不活了</button></div>)}componentWillMount(){console.log("===componentWillMount===")}componentDidMount(){console.log("===componentDidMount===")// 启动循环定时器this.intervalId =  setInterval(() => {let {opacity} = this.stateopacity-=0.1if(opacity<=0){opacity=1}this.setState({opacity})}, 200);}componentWillUpdate(){console.log("===componentWillUpdate===")}componentWillUnmount(){console.log('===componentWillUnmount===')clearInterval(this.intervalId)}}ReactDOM.render(<Life msg="react 太难了"/>,document.getElementById('example'))</script>
</body></html>

总结及注意：