react组件生命周期?

2020-06-11 20:09发布

8条回答
miss shi
2楼 · 2020-06-11 20:37

组件的生命主要包括3个阶段: 挂载、更新、卸载

挂载:     

  • constructor()

  • componentWillMount()

  • render()

  • componentDidMount()

更新

  • componentWillReceiveProps()

  • shouldComponentUpdate()

  • componentWillUpdate()

  • render()

  • componentDidUpdate()

卸载

  • componentWillUnmount()



奥利给
3楼 · 2020-06-11 21:03

React 组件的生命周期方法

按渲染顺序:

1: UNSAFE_componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行。

2: componentDidMount() – 仅在第一次渲染后在客户端执行。

3: UNSAFE_componentWillReceiveProps()– 当从父类接收到 props 并且在调用另一个渲染器之前调用,父组件初始化的时候不会调用。一个常见的误解是,当props“改变”时,getDerivedStateFromPropscomponentWillReceiveProps才会被调用。事实上,只要父组件重新渲染,这些生命周期函数就会被调用,不管这些props是否与以前“不同”

3: shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件,请返回true 否则返回 false。默认情况下,它返回 false。当这个方法返回false的时候,整个组件(类)都不会再执行(渲染)下去,所以最好在不会影响其他组件的组件里使用此方法。shouldComponentUpdate最好作为性能优化使用,而不是为了确保派生状态的正确性

4: UNSAFE_componentWillUpdate() – 在 DOM 中进行渲染之前调用。

5: componentDidUpdate() – 在渲染发生后立即调用。

6: componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。

7:  getDerivedStateFromProps() - 在组件实例化以及接收新props后调用。它可以返回一个对象来更新state,或者返回null来表示新的props不需要任何state更新。 与componentDidUpdate一起,这个新的生命周期应该覆盖传统componentWillReceiveProps的所有用例。

8: getSnapshotBeforeUpdate() -  在更新之前被调用(例如,在DOM被更新之前)。此生命周期的返回值将作为第三个参数传递给componentDidUpdate。 与componentDidUpdate一起,这个新的生命周期将覆盖旧版componentWillUpdate的所有用例。

9: componentDidCatch(error, info)如果 render() 函数抛出错误,则会触发该函数。

10: getDerivedStateFromError(error) - 此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数,并返回一个值以更新 state


lemon
4楼 · 2020-06-12 13:45
  • componentWillMount 在渲染前调用,在客户端也在服务端。

  • componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

  • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
    可以在你确认不需要更新组件时使用。

  • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

  • componentWillUnmount在组件从 DOM 中移除之前立刻被调用。


li大哥
5楼 · 2020-06-12 14:48
  • 1. 挂载卸载过程

    • 1.1.constructor()

    • 1.2.componentWillMount()

    • 1.3.componentDidMount()

    • 1.4.componentWillUnmount ()

  • 2. 更新过程

    • 2.1. componentWillReceiveProps (nextProps)

    • 2.2.shouldComponentUpdate(nextProps,nextState)

    • 2.3.componentWillUpdate (nextProps,nextState)

    • 2.4.componentDidUpdate(prevProps,prevState)

    • 2.5.render()

  • 3. React新增的生命周期(个人补充)

    • 3.1. getDerivedStateFromProps(nextProps, prevState)

    • 3.2. getSnapshotBeforeUpdate(prevProps, prevState)


王可夫斯基
6楼 · 2020-06-12 17:24

组件的生命周期可分成三个状态:

  • Mounting:已插入真实 DOM

  • Updating:正在被重新渲染

  • Unmounting:已移出真实 DOM

生命周期的方法有:

  • componentWillMount 在渲染前调用,在客户端也在服务端。

  • componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

  • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
    可以在你确认不需要更新组件时使用。

  • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

  • componentWillUnmount在组件从 DOM 中移除之前立刻被调用。


可口可乐
7楼 · 2021-01-08 17:21

React 组件的生命周期方法

按渲染顺序:

1: UNSAFE_componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行。

2: componentDidMount() – 仅在第一次渲染后在客户端执行。

3: UNSAFE_componentWillReceiveProps()– 当从父类接收到 props 并且在调用另一个渲染器之前调用,父组件初始化的时候不会调用。一个常见的误解是,当props“改变”时,getDerivedStateFromPropscomponentWillReceiveProps才会被调用。事实上,只要父组件重新渲染,这些生命周期函数就会被调用,不管这些props是否与以前“不同”

3: shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件,请返回true 否则返回 false。默认情况下,它返回 false。当这个方法返回false的时候,整个组件(类)都不会再执行(渲染)下去,所以最好在不会影响其他组件的组件里使用此方法。shouldComponentUpdate最好作为性能优化使用,而不是为了确保派生状态的正确性

4: UNSAFE_componentWillUpdate() – 在 DOM 中进行渲染之前调用。

5: componentDidUpdate() – 在渲染发生后立即调用。

6: componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。

7:  getDerivedStateFromProps() - 在组件实例化以及接收新props后调用。它可以返回一个对象来更新state,或者返回null来表示新的props不需要任何state更新。 与componentDidUpdate一起,这个新的生命周期应该覆盖传统componentWillReceiveProps的所有用例。

8: getSnapshotBeforeUpdate() -  在更新之前被调用(例如,在DOM被更新之前)。此生命周期的返回值将作为第三个参数传递给componentDidUpdate。 与componentDidUpdate一起,这个新的生命周期将覆盖旧版componentWillUpdate的所有用例。

9: componentDidCatch(error, info) - 如果 render() 函数抛出错误,则会触发该函数。

10: getDerivedStateFromError(error) - 此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数,并返回一个值以更新 state


猜不到结尾
8楼 · 2021-01-12 09:28

React 组件的生命周期有三个不同的阶段:

*初始渲染阶段:*这是组件即将开始其生命之旅并进入 DOM 的阶段。

*更新阶段:*一旦组件被添加到 DOM,它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。

*卸载阶段:*这是组件生命周期的最后阶段,组件被销毁并从 DOM 中删除。

React,现在学习前端肯定要学到的知识,想了解更多知识,可以看黑马程序员react视频教程,里面知识还是蛮多的!


猫的想法不敢猜
9楼 · 2021-01-19 14:09

组件生命周期一般指的是:组件从被创建到它消亡的过程,因此,组件生命周期方法就是指:在这个过程(创建 ->消亡)中,在一个特定的点会被调用的方法。  
简单点说,我们可以把组件的生命周期看作是一根平铺于桌面的线,这根线上系了很多钩子,钩子都钩着一个方法,当从线的一头提起这根线,那么钩子(连同它们上面的方法)都会被逐一提起,这个过程,就是React组件生命周期方法被逐一调用的过程了

相关问题推荐

  • 回答 10

    不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。接下来,我们实现一个简单的实例了解路由拦截的基本流程。...

  • 回答 6

    无论是大厂或者一般公司的招聘对框架的要求是熟悉或者至少掌握vue,react,angular中的一门,而且一般在大厂里每个团队的技术框架相对来说比较稳定,一般会挑选一门主要的技术框架,其它的作为辅助,除非有重大原因,否则一般不会轻易变更主要技术栈。...

  • react中的key的作用2020-07-24 10:56
    回答 4
    已采纳

    通常认为当 React 元素内包含数量或顺序不确定的子元素时,需要提供 key 属性来定位元素是否已经存在。在实际使用中可以认为 key是一个接口,用来对哪些元素新建,哪些元素删除。比如现有一个List,每个组件新增时需要用ID向后端发起请求(函数应该放在didmou...

  • 前端react 按钮的处理2021-03-23 09:47
    回答 5

    react 按钮代码[removed][removed][removed][removed][removed][removed][removed]//在这里写react代码const element=Hello React;//function Square(props){   return(         {props.value}          );}ReactDOM.render(,d......

  • 回答 3

    前端常用的一个框架

  • 回答 2

    我们一般使用React是是做SPA单页面应用,也就是数据影响视图,性能更优化向对于传统的MPA多页面应用。

  • 回答 1

    创建更新查询:可使用更新查询在一次操作中更改多个行中的内容。创建删除查询:可以通过使用删除bai查询删除表中的所有行。

  • 回答 5

    import React, { Component } from 'react'import ReactEcharts from 'echarts-for-react'import Background from '../../assets/img/background2.png'import Background3 from '../../...

没有解决我的问题,去提问