React知识点回忆（六）之生命周期钩子

最新推荐文章于 2023-08-03 10:35:45 发布
最新推荐文章于 2023-08-03 10:35:45 发布
阅读量253 收藏
点赞数
分类专栏： React 文章标签： react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46198981/article/details/120609316
版权

一、旧的生命周期钩子

1、流程图
在这里插入图片描述
2、解释

从上图我们不难看出React 16.0 版本之前的钩子的具体执行流程是怎么样的，下面让我们具体解释一下每个钩子的意义，以及在实战中的使用。
 
注意：这里测试使用钩子时用的是React 15.6.2 版本，可自行在 bootCDN 官网获取不同版本的React依赖

  • setup props and state

    初始化属性和状态

    • 在此阶段我们可以对组件的 props 和 state 做一些初始化的操作
    class Clock extends React.Component {
	constructor (props) {
		super(props) // 注意，这里必须传递 props ，否则，下面打印的 this.props 为 undefined
		console.log(this.state) // { name: 'ralph' }
		console.log(this.props) // { desc: 'Encounter with React Lifecycle' }
	}

	state = { name: 'ralph' }
}

const props = {
	desc: 'Encounter with React Lifecycle'
}
ReactDOM.render(<Clock {...props} />, document.getElementById('box'))

  • componentWillMount

    组件即将渲染到页面上，但是还没渲染

    • 由于在这个阶段数据还没有渲染至页面，我们可以对 state 中的数据进行直接修改，不需要通过 setState api也能正确渲染更新后的数据至页面
    • 在这个阶段可以对请求回来的数据进行状态更新
    class Clock extends React.Component {
	constructor (props) {
		super(props) // 注意，这里必须传递 props ，否则，下面打印的 this.props 为 undefined
		console.log(this.state) // { name: 'ralph' }
		console.log(this.props) // { desc: 'Encounter with React Lifecycle' }
	}

	componentWillMount () {
		this.state.name = 'rickey'
		console.log('componentWillMount')
	}

	state = { name: 'ralph' }
}

const props = {
	desc: 'Encounter with React Lifecycle'
}
ReactDOM.render(<Clock {...props} />, document.getElementById('box'))

  • render

    创建虚拟DOM，更新DOM树，计算diff算法

    class Clock extends React.Component {
	constructor (props) {
		super(props) // 注意，这里必须传递 props ，否则，下面打印的 this.props 为 undefined
		console.log(this.state) // { name: 'ralph' }
		console.log(this.props) // { desc: 'Encounter with React Lifecycle' }
	}

	componentWillMount () {
		this.state.name = 'rickey'
		console.log('componentWillMount')
	}

	render () {
		const { name } = this.state
		return (
			<div>{ name }</div>
		)
	}

	state = { name: 'ralph' }
}

const props = {
	desc: 'Encounter with React Lifecycle'
}
ReactDOM.render(<Clock {...props} />, document.getElementById('box'))

  • componentDidMount

    组件已经成功渲染至页面上

    • 在这个阶段我们可以获取到组件的真实DOM并对它进行DOM操作
    class Clock extends React.Component {
	constructor (props) {
		super(props) // 注意，这里必须传递 props ，否则，下面打印的 this.props 为 undefined
		console.log(this.state) // { name: 'ralph' }
		console.log(this.props) // { desc: 'Encounter with React Lifecycle' }
	}

	componentWillMount () {
		this.state.name = 'rickey'
		console.log('componentWillMount')
	}

	render () {
		const { name } = this.state
		// 创建虚拟DOM
		return (
			<div ref='div'>{ name }</div>
		)
	}

	componentDidMount () {
		console.log('componentDidMount')
		console.log(this.refs.div); // 真实DOM --> <div>rickey</div>
	}

	state = { name: 'ralph' }
}

const props = {
	desc: 'Encounter with React Lifecycle'
}
ReactDOM.render(<Clock {...props} />, document.getElementById('box'))

  • componentWillReceiveProps

    组件中的 props 被更新时调用

    class Clock extends React.Component {
  constructor (props) {
    super(props) // 注意，这里必须传递 props ，否则，下面打印的 this.props 为 undefined
    console.log(this.state) // { name: 'ralph' }
    console.log(this.props) // { desc: 'Encounter with React Lifecycle' }
  }

  componentWillMount () {
    this.state.name = 'rickey'
    console.log('componentWillMount')
  }

  render () {
    const { name } = this.state
    // 创建虚拟DOM
    return (
      <div>
        <div ref='div'>{ name }</div>
        <Child { ...this.state } />
        <button onClick={ this.btnclick }>点击修改</button>
      </div>
    )
  }

  componentDidMount () {
    console.log('componentDidMount')
    console.log(this.refs.div); // 真实DOM --> <div>rickey</div>
  }

  btnclick = () => {
    this.setState({ name: 'Ralph' })
  }

  state = { name: 'ralph' }
}

class Child extends React.Component {
  render () {
    return <div>{ this.props.name }</div>
  }
  // nextProps接收到的数值是修改后的 props 
  componentWillReceiveProps (nextProps) {
    console.log('componentWillReceiveProps', nextProps) // componentWillReceiveProps {name: "ralph"}
  }
}

const props = {
  desc: 'Encounter with React Lifecycle'
}
ReactDOM.render(<Clock {...props} />, document.getElementById('box'))

  • shouldComponentUpdate

    这个钩子将决定此次组件是否需要更新，返回 true 表示更新，false 表示不更新

    • 注意：这个钩子函数必须设有返回值，否则会报错
    • 在这个函数内部可对数据进行逻辑处理，符合条件则让组件继续更新
    class Clock extends React.Component {
  constructor (props) {
    super(props) // 注意，这里必须传递 props ，否则，下面打印的 this.props 为 undefined
    console.log(this.state) // { name: 'ralph' }
    console.log(this.props) // { desc: 'Encounter with React Lifecycle' }
  }

  componentWillMount () {
    this.state.name = 'rickey'
    console.log('componentWillMount')
  }

  render () {
    const { name } = this.state
    // 创建虚拟DOM
    return (
      <div>
        <div ref='div'>{ name }</div>
        <Child { ...this.state } />
        <button onClick={ this.btnclick }>点击修改</button>
      </div>
    )
  }

  componentDidMount () {
    console.log('componentDidMount')
    console.log(this.refs.div); // 真实DOM --> <div>rickey</div>
  }

  shouldComponentUpdate (...args) {
    console.log('shouldComponentUpdate', ...args);// 'shouldComponentUpdate' nextprops nextstate nextcontext
    return true;
  }

  btnclick = () => {
    this.setState({ name: 'Ralph' })
  }

  state = { name: 'ralph' }
}

class Child extends React.Component {
  render () {
    return <div>{ this.props.name }</div>
  }
  // nextProps接收到的数值是修改后的 props 
  componentWillReceiveProps (nextProps) {
    console.log('componentWillReceiveProps', nextProps) // componentWillReceiveProps nextprops nextcontext
  }
}

const props = {
  desc: 'Encounter with React Lifecycle'
}
ReactDOM.render(<Clock {...props} />, document.getElementById('box'))

  • componentWillUpdate

    组件即将更新，但是还没有更新

    class Clock extends React.Component {
  constructor (props) {
    super(props) // 注意，这里必须传递 props ，否则，下面打印的 this.props 为 undefined
    console.log(this.state) // { name: 'ralph' }
    console.log(this.props) // { desc: 'Encounter with React Lifecycle' }
  }

  componentWillMount () {
    this.state.name = 'rickey'
    console.log('componentWillMount')
  }

  render () {
    const { name } = this.state
    // 创建虚拟DOM
    return (
      <div>
        <div ref='div'>{ name }</div>
        <Child { ...this.state } />
        <button onClick={ this.btnclick }>点击修改</button>
      </div>
    )
  }

  componentDidMount () {
    console.log('componentDidMount')
    console.log(this.refs.div); // 真实DOM --> <div>rickey</div>
  }

  shouldComponentUpdate (...args) {
    console.log('shouldComponentUpdate', ...args); // 'shouldComponentUpdate' nextprops nextstate nextcontext
    return true;
  }

  componentWillUpdate (...args) {
    console.log('componentWillUpdate', ...args); // 'componentWillUpdate' nextprops nextstate nextcontext
  }

  btnclick = () => {
    this.setState({ name: 'Ralph' })
  }

  state = { name: 'ralph' }
}

class Child extends React.Component {
  render () {
    this.state = this.props
    return <div>{ this.props.name }</div>
  }
  // nextProps接收到的数值是修改后的 props 
  componentWillReceiveProps (nextProps) {
    console.log('componentWillReceiveProps', nextProps) // componentWillReceiveProps {name: "ralph"}
  }
}

const props = {
  desc: 'Encounter with React Lifecycle'
}
ReactDOM.render(<Clock {...props} />, document.getElementById('box'))

  • componentDidUpdate

    组件已经完成了更新

        class Clock extends React.Component {
  constructor (props) {
    super(props) // 注意，这里必须传递 props ，否则，下面打印的 this.props 为 undefined
    console.log(this.state) // { name: 'ralph' }
    console.log(this.props) // { desc: 'Encounter with React Lifecycle' }
  }

  componentWillMount () {
    this.state.name = 'rickey'
    console.log('componentWillMount')
  }

  render () {
    const { name } = this.state
    // 创建虚拟DOM
    return (
      <div>
        <div ref='div'>{ name }</div>
        <Child { ...this.state } />
        <button onClick={ this.btnclick }>点击修改</button>
      </div>
    )
  }

  componentDidMount () {
    console.log('componentDidMount')
    console.log(this.refs.div); // 真实DOM --> <div>rickey</div>
  }

  shouldComponentUpdate (...args) {
    console.log('shouldComponentUpdate', ...args); // 'shouldComponentUpdate' nextprops nextstate nextcontext
    return true;
  }

  componentWillUpdate (...args) {
    console.log('componentWillUpdate', ...args); // 'componentWillUpdate' nextprops nextstate nextcontext
  }

  componentDidUpdate (...args) {
    console.log('componentDidUpdate', ...args); // 'componentWillUpdate' nextprops nextstate nextcontext
  }

  btnclick = () => {
    this.setState({ name: 'Ralph' })
  }

  state = { name: 'ralph' }
}

class Child extends React.Component {
  render () {
    this.state = this.props
    return <div>{ this.props.name }</div>
  }
  // nextProps接收到的数值是修改后的 props 
  componentWillReceiveProps (nextProps) {
    console.log('componentWillReceiveProps', nextProps) // componentWillReceiveProps {name: "ralph"}
  }
}

const props = {
  desc: 'Encounter with React Lifecycle'
}
ReactDOM.render(<Clock {...props} />, document.getElementById('box'))

  • componentWillUnmount

    组件即将被卸载

    • 本文中通过使用 ReactDOM 模块中的 unmountComponentAtNode API卸载一个组件
    • 在此处我们可以对一些连接进行释放，提高性能
      constructor (props) {
    super(props) // 注意，这里必须传递 props ，否则，下面打印的 this.props 为 undefined
    console.log(this.state) // { name: 'ralph' }
    console.log(this.props) // { desc: 'Encounter with React Lifecycle' }
  }

  componentWillMount () {
    this.state.name = 'rickey'
    console.log('componentWillMount')
  }

  render () {
    const { name } = this.state
    // 创建虚拟DOM
    return (
      <div>
        <div ref='div'>{ name }</div>
        <Child { ...this.state } />
        <button onClick={ this.btnclick }>点击修改</button>
        <button onClick={ this.unmountCurrentComponent }>点击卸载组件</button>
      </div>
    )
  }

  componentDidMount () {
    console.log('componentDidMount')
    console.log(this.refs.div); // 真实DOM --> <div>rickey</div>
  }

  shouldComponentUpdate (...args) {
    console.log('shouldComponentUpdate', ...args); // 'shouldComponentUpdate' nextprops nextstate nextcontext
    return true;
  }

  componentWillUpdate (...args) {
    console.log('componentWillUpdate', ...args); // 'componentWillUpdate' nextprops nextstate nextcontext
  }

  componentDidUpdate (...args) {
    console.log('componentDidUpdate', ...args); // 'componentWillUpdate' nextprops nextstate nextcontext
  }

  componentWillUnmount () {
    console.log('componentWillUnmount');
  }

  btnclick = () => {
    this.setState({ name: 'Ralph' })
  }

  unmountCurrentComponent = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('box'))
  }

  state = { name: 'ralph' }
}

class Child extends React.Component {
  render () {
    this.state = this.props
    return <div>{ this.props.name }</div>
  }
  // nextProps接收到的数值是修改后的 props 
  componentWillReceiveProps (nextProps) {
    console.log('componentWillReceiveProps', nextProps) // componentWillReceiveProps {name: "ralph"}
  }
}

const props = {
  desc: 'Encounter with React Lifecycle'
}
ReactDOM.render(<Clock {...props} />, document.getElementById('box'))

const props = {
  desc: 'Encounter with React Lifecycle'
}
ReactDOM.render(<Clock {...props} />, document.getElementById('box'))

二、新的生命周期钩子

1、流程图
在这里插入图片描述
2、解释

新版本生命周期更新详情

  • 被移除的钩子
    • componentWillMount
    • componentWillUpdate
  • 被重名的钩子
    • UNSAFE_componentWillReceiveProps

  • getDerivedStateFromProps

    在此阶段无论是创建阶段还是更新阶段都会触发此函数的调用，这个方法是一个派生方法，所以需要通过 static 修饰。此函数应返回一个 对象 来更新 state，如果返回 null 则不更新任何内容。
    作用：

    • getDerivedStateFromProps 的存在只有一个目的：让组件在 props 变化时更新 state

  • getSnapshotBeforeUpdate

    此方法需要返回一个 snapshot 值或者 null
    这个函数会在每次更新之前调用，返回值将作为 componentDidUpdate 的第三个参数返回。
    此方法可用于以特殊方式处理滚动位置的聊天线程中。

@Ralph
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react 生命周期钩子详解（1）
哪有那么可爱的小蝈蝈的博客
04-15 1428
react 生命周期钩子详解（1） 本文章使用react环境版本为17.0.1，文章中出现的 （已废弃）等标识皆对react 17+版本而言 React中组件也有生命周期，也就是说也有很多钩子函数供我们使用 1、早期的react生命周期钩子 根据下图我们可以将react的生命周期钩子分为四个阶段：初始化、挂载阶段、更新阶段，销毁阶段 (1)初始化 初始化时期的生命周期钩子是constructor 只要这个组件被实例化，被挂载的时候，这个钩子就会被优先调用，他有一个参数 pros 可以调用 super(pr
Python—实训day8—掌握DataFrame的常用操作
#请假条的博客
09-25 1941
2掌握DataFrame的常用操作 2.1基础属性 detail.columns #列名 detail.index #索引/行名 detail.shape #形状 detail.dtypes #类型 2.2查改增删DataFrame数据 2.2.1查看访问DataFrame中的数据 （1）对单列数据的访问 DataFrame的单列数据为一个Series。根据DataFrame的定义可以知晓DataFrame是一个带有标签的二维数组，每个标签相当每一列的列名。 有以下两种方式来实现对单列数
React 生命周期：方法和钩子解释 The React lifecycle: methods and hooks explained
禅与计算机程序设计艺术
11-23 8772
但请注意，它必须包含在如上例所示的条件中，否则会导致无限循环。通常，您不需要显式设置它，因为它是从定义组件的函数或类的名称推断出来的。如果您出于调试目的想要显示不同的名称，或者当您创建高阶组件时，您可能需要明确设置它，有关详细信息，请参阅包装显示名称以便轻松调试。错误边界是 React 组件，可以在其子组件树中的任何位置捕获 JavaScript 错误，记录这些错误，并显示后备 UI 而不是崩溃的组件树。如果您单击它顶部的“显示不太常见的生命周期”复选框，您可以在此生命周期图中看到下面的大多数方法。
【react】react生命周期钩子函数：
SunPeng的博客
08-03 1264
【react】react生命周期钩子函数：
生命周期 用户可以操作dom_React 生命周期的打怪升级之路
weixin_39777464的博客
11-26 99
号外号外！走过路过千万不要错过！截止目前为止 React 已经发布了 v16.12.0 版本, React 生命周期也是日常开发低头不见，抬头见的狗子，可惜狗子它变了。改变原因v16.3 版本之前， React 中的更新操作是同步的，这可能会导致性能问题。举个例子，假如有一个庞大的模块里面嵌套超级多的组件，一旦最顶部的 render 方法执行了，然后依次执行组件的 render 方法，直到最底层组...
react入门学习文档
08-29
生命周期是 React 组件的生命周期钩子函数，包括 Mounting、Updating、Unmounting 等阶段。了解生命周期有助于我们更好地理解和使用 React。 组件事件 组件事件是 React 组件的交互方式。我们可以使用 React 事件...
react-patterns:使用类和钩子解决方案React模式
05-30
然而，随着React 16.8的发布，引入了`useEffect`钩子，它将这些生命周期方法合并为一个功能，提供更灵活和优化的状态管理。 3. **高阶组件（HOC）**：HOC是一种函数，它接受一个组件并返回一个新的组件，以实现代码...
react_go：React钩子+ redux-toolkit + redux-saga +故事书+ go
02-06
React的亮点之一是使用虚拟DOM（Virtual DOM）提高性能，同时提供了状态管理和组件生命周期管理。 2. **React Hooks**： 在React 16.8版本引入的Hooks是一个强大的特性，它允许在不编写类组件的情况下使用状态和...
react-基于react的自定义滚动条组件
08-14
在React组件中，我们可以使用`useEffect`或`componentDidMount`生命周期方法来添加事件监听器，使用`useEffect`的`cleanup`函数或`componentWillUnmount`来移除监听器，以避免内存泄漏。 4. **自定义滚动逻辑**：...
react系列（6）组件生命周期钩子函数
@黄小泽的个人博客
11-27 5937
“钩子”就是在某个阶段给你一个做某些处理的机会。生命周期钩子函数就是在组件预备、创建、使用和销毁的过程中的函数监听。 React 组件生命周期： componentWillMount ：在渲染前调用,在客户端也在服务端。 componentDidMount：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 compo...
React生命周期钩子函数
onlyJoy001的博客
10-21 271
React 生命周期钩子函数 当前版本16.x 定义：React中组件有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，我们会分为四个阶段，初始化、运行中、销毁、错误处理(16.3之后) 注意：生命周期钩子函数一定不要写成箭头函数 React 16.x 版本中共有 10个钩子函数 ，四个阶段、分别为： 初始化 运行中 销毁 错误处理 初始化阶段： 1、constructor...
React生命周期钩子函数（新版）
xuezenghua的博客
04-11 537
React生命周期钩子函数（新版） 实例化 渲染前 static getDerivedStateFromProps(nextProps,nextState) {} 无法访问this nextProps,nextState是更新后的 必须返回 一个对象，用来更新state 或者 返回 null不更新 必须要初始化state state 的值在任何时候都取决于 props时 渲染中 r...
React新生命周期
paper_crane的博客
08-14 3692
react官方打算在未来提出一种实现异步渲染的方法以提高性能，主要的特点就是在渲染完成之前可以被中断，中断之后不会继续执行生命周期，而是重头开始执行生命周期。 所以官方决定，从v17开始删除以下三个生命周期钩子： componentWillMount componentWillReceiveProps componentWillUpdate 作为补偿，新增两个新的生命周期钩子 sta...
这一次，彻底搞懂React生命周期
Always-Learning
07-17 414
阅读指南 本文采用总分总的结构，首先给出React生命周期流程图，让大家知道我们的研究目标是什么，第二部分则分别对React生命周期中的重点难点的生命钩子函数进行介绍。第三部分给出React生命周期的总结。 React生命周期流程图 1. getDerivedStateFromProps(props, state) 官方解释：调用这个钩子函数，会使得state在任何时候的状态值都取决于props. 这个函数是静态的，所以前面要加static. 返回的是什么？ 返回的应该是状态对象（或者null）
React 较难理解的生命周期钩子函数
Vin1992的博客
09-26 2490
1. constructor 在react中，class 里的constructor 方法 用来初始化state和绑定事件方法 其中，super作为方法执行父类的构造函数，参数为props 即接受父组件传入的props如果没有执行super, react会报错 componentWillReceiveProps（nextProps） 执行时间：当一个已mount的react组件接收到新的p
react生命钩子的执行顺序
chunmeizhang_88的博客
11-03 694
React的生命周期钩子跟Vue有些相似 初始化阶段 Vue: beforeCreate、created、beforeMount、mounted React：constructor、componentWillMount【旧】、render、componentDidMount 运行阶段：【可能会执行多次】 Vue：beforeUpdate、updated React: state变化：shouldC...
React从15.6.2升至16.13.1，不要怂就是干
weixin_41559882的博客
06-19 684
颜值不够，实力来凑。但仔细想想，好像实力也不太行，心中顿生伤感，不说了，学习去。 第一步，升至React16.2.0 按照计划参考这篇文章将React升至16.2.0就好，一步一步来。 React16废弃点 1、React.createClass 解决方案：npm install create-react-class import createReactClass from 'create-react-class'; const Greeting = createReactClass({ // ....
React生命周期总结（新旧版本都有），React即将废弃的勾子
ChuanyangChen的博客
04-14 823
旧版生命周期（16版本） 初始化阶段：由ReactDOM.render()触发 – 初次渲染 constructor() componentWillMount()「新版本不推荐使用」 render() componentDidMount() 更新阶段：由组件内部this.setState() 或父组件重新render触发 shouldComponentUpdate() componentWillUpdate()「新版本不推荐使用」 render() componentDidUpdate() 卸载组
升级React16
lzr_must的博客
04-17 2896
升级react依赖 npm install react@^16.2.0 npm install react-dom@^16.2.0 npm install prop-types@^15.6.0 问题1：React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替 //安装prop-types库 npm install pr...
react生命周期钩子
最新发布
09-14
React生命周期钩子是在组件的不同阶段执行特定的操作的函数。根据引用提供的信息，React组件的生命周期可以分为实例化、存在期和销毁期。在实例化阶段，以下方法会被调用（按顺序执行）：getDefaultProps、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Ralph

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值