react 生命周期

1.组件从创建到死亡它会经历一些特定的阶段。
2.React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。
3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

一、react生命周期（旧的）

生命周期的三个阶段（旧）

 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染1.constructor()2.componentWillMount()3.render()4.componentDidMount() 常用一般在这个钩子中做一些初始化的事情，比如开启定时器、发送网络请求、订阅消息2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发1.shouldComponentUpdate()2.componentWillUpdate()3.render()   必须使用的一个4.componentDidUpdate()3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发1.componentWillUnmount()  常用一般在这个钩子中做一些收尾的事情，比如：关闭定时器、取消订阅消息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="test"></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script src="../js/babel.min.js"></script><!-- 引入prop-types，用于对组件标签属性进行限制 --><script src="../js/prop-types.js"></script><script type="text/babel">// 创建组件class Count extends React.Component {constructor(props) {console.log('Count---constructor')super(props);// 初始化状态this.state = {count: 0}}add = () => {const {count} = this.statethis.setState({count: count+1})}death = () => {ReactDOM.unmountComponentAtNode(document.getElementById('test'))}componentWillMount() {console.log('Count---componentWillMount')}componentDidMount() {console.log('Count---componentDidMount')}componentWillUnmount() {console.log('Count---componentWillUnmount')}shouldComponentUpdate(nextProps, nextState, nextContext) {console.log('Count---shouldComponentUpdate')return true}componentWillUpdate(nextProps, nextState, nextContext) {console.log('Count---componentWillUpdate')}componentDidUpdate(prevProps, prevState, snapshot) {console.log('Count---componentDidUpdate')}render() {console.log('Count---render')const {count} = this.statereturn(<div><h2>当前求和为:{count}</h2><button onClick={this.add}>点我+1</button><button onClick={this.death}>卸载组件</button></div>)}}// 渲染组件ReactDOM.render(<Count/>, document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="test"></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script src="../js/babel.min.js"></script><!-- 引入prop-types，用于对组件标签属性进行限制 --><script src="../js/prop-types.js"></script><script type="text/babel">class A extends React.Component{state = {carName: '奔驰'}changeCar = () => {this.setState({carName: '奥托'})}render() {return (<div><div>我是A组件</div><button onClick={this.changeCar}>换车</button><B carName={this.state.carName}></B></div>)}}class B extends React.Component{componentWillReceiveProps(nextProps, nextContext) {console.log('B---componentWillReceiveProps', nextProps)}shouldComponentUpdate(nextProps, nextState, nextContext) {console.log('B---shouldComponentUpdate')return true}componentWillUpdate(nextProps, nextState, nextContext) {console.log('B---componentWillUpdate')}componentDidUpdate(prevProps, prevState, snapshot) {console.log('B---componentDidUpdate')}render() {return (<div>我是B组件，从A组件中接收到的车是：{this.props.carName}</div>)}}// 渲染组件ReactDOM.render(<A/>, document.getElementById('test'))</script>
</body>
</html>

二、react生命周期（新的）

生命周期的三个阶段（新）
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染1.constructor()2.getDerivedStateFromProps 3.render()4.componentDidMount()2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发1.getDerivedStateFromProps2.shouldComponentUpdate()3.render()4.getSnapshotBeforeUpdate5.componentDidUpdate()3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发1.componentWillUnmount()

componentDidUpdate：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.list {width: 200px;height: 150px;background-color: skyblue;overflow: auto;}.news {height: 30px;}</style>
</head>
<body><div id="test"></div><!-- 引入react核心库 --><script src="../17.0.1/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script src="../17.0.1/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script src="../17.0.1/babel.min.js"></script><!-- 引入prop-types，用于对组件标签属性进行限制 --><script src="../17.0.1/prop-types.js"></script><script type="text/babel">class NewsList extends React.Component {state = {newsArr: []}componentDidMount() {setInterval(() => {// 获取原状态const {newsArr} = this.state// 模拟一条新闻const news = '新闻' + (newsArr.length + 1)// 更新状态this.setState({newsArr: [news, ...newsArr]})}, 1000)}getSnapshotBeforeUpdate(prevProps, prevState) {return this.refs.list.scrollHeight}componentDidUpdate(prevProps, prevState, height) {this.refs.list.scrollTop += this.refs.list.scrollHeight - height}render() {return (<div className="list" ref="list">{this.state.newsArr.map((n, index) => {return <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM.render(<NewsList/>, document.getElementById('test'))</script>
</body>
</html>

三、重要的钩子

render：初始化渲染或更新渲染调用
componentDidMount：开启监听, 发送ajax请求
componentWillUnmount：做一些收尾工作, 如: 清理定时器

四、即将废弃的钩子

componentWillMount
componentWillReceiveProps
componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

react 生命周期相关推荐

深入react技术栈(5):React生命周期
我是歌谣放弃很容易但是坚持一定很酷微信搜一搜前端小歌谣 React生命周期挂载和卸载过程组件得挂载组件得卸载数据更新过程整体流程文章参考深入学习React技术栈
react学习(9)----react生命周期
react生命周期1.1.constructor() constructor()中完成了React数据的初始化,它接受两个参数 :props和context,当想在函数内部使用这两个参数时 ,需使用s ...
react生命周期（自己的方式理解）
react生命周期(自己的方式理解) react的生命周期函数有:挂载,渲染/更新,卸载首先要知道react生命周期最初始的要有哪些?最后生命中出现的又有哪些?我本人喜欢把react比作是一个人的一 ...
你不可不知道的React生命周期
点小蓝字加关注! 作者:kim 来源:原创写在前面咱今天聊的话题是React生命周期,灵感来自于最近在网上发现一篇关于react生命周期的文章,里面记录的知识点竟然与小编所get到的有出入.作为一 ...
ES6中的React生命周期详解
太长时间没写react了,有点生.重新捡起来练练手. import React,{ Component } from 'react';class Demo extends Component {con ...
react生命周期方法介绍
react生命周期 react生命周期主要包括三个阶段:初始化阶段.运行中阶段.销毁阶段 react在不同的生命周期会触发不同的钩子函数初始化阶段 getDefaultProps() 设置组件默认的 ...
react生命周期详细介绍
目录挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...
vue生命周期和react生命周期对比。
生命周期指的是组件从初始化开始到结束的过程或者是生命周期是描述组件从开始到结束的过程,每个组件都具有生命周期,都对组件通过生命周期给予的钩子函数进行管理. 钩子函数指的是系统某些状态和参数发生改 ...
React、react生命周期、react生命周期运行过程、shouldComponentUpdate的用法
React.react生命周期.react生命周期运行过程 1.创建阶段 constructor(){super()console.log('执行构造函数')this.state={num:1}}UN ...
【React生命周期】
React 生命周期从图上可以知道react 生命周期可以分为三个状态挂载时更新时卸载时挂载阶段 constructor :初始化阶段可以接受来自super(props)或者父组件传递的p ...

react 生命周期

一、react生命周期（旧的）

二、react生命周期（新的）

三、重要的钩子

四、即将废弃的钩子

react 生命周期相关推荐

最新文章

热门文章