精华内容
下载资源
问答
  • React 组件生命周期

    2020-12-13 19:17:14
    React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: ...
  • react组件生命周期React components have several lifecycle methods that you can override to run your code at a particular time in the process. React组件具有几种生命周期方法,您可以重写它们以在流程中的...

    react组件生命周期

    React components have several lifecycle methods that you can override to run your code at a particular time in the process.

    React组件具有几种生命周期方法,您可以重写它们以在流程中的特定时间运行代码。

    In this video, Nick Karnik demonstrates all the React Component Lifecycle methods. You will learn when to use the methods in a React application.

    在此视频中,尼克·卡尼克(Nick Karnik)演示了所有React Component Lifecycle方法。 您将学习何时在React应用程序中使用这些方法。

    You can watch the video on the freeCodeCamp.org YouTube channel (26 minute watch).‌

    您可以在freeCodeCamp.org YouTube频道上观看视频(观看26分钟)。‌

    翻译自: https://www.freecodecamp.org/news/react-component-lifecycle/

    react组件生命周期

    展开全文
  • react生命周期

    2021-04-15 11:26:07
    react生命周期
    展开全文
  • 本篇文章主要介绍了React组件生命周期,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • React生命周期

    2019-01-05 20:33:42
    React生命周期 1 生命周期 生命周期概念(组件从生到死的过程) 生命周期的作用 2 生命周期节点 Mounting:挂载阶段 Updating:运行时阶段 Unmounting:卸载阶段 Error Handling:错误处理(只处理在render方法...

    React的生命周期

    1 生命周期

    • 生命周期概念(组件从生到死的过程)
    • 生命周期的作用(在React里添加了一些关键的节点,更加灵活)

    2 生命周期节点

    • Mounting:挂载阶段
    • Updating:运行时阶段
    • Unmounting:卸载阶段
    • Error Handling:错误处理(只处理在render方法)

    3 代码演示

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Component extends React.Component{
    	// 构造函数
    	constructor(props){
    		super(props);
    		this.state = {
    			data : 'oldState',
    		}
    		console.log('初始化数据','constructor');
    	}
    	// 组件将要加载
    	componentWillMount(){
    		console.log('componentWillMount');
    	}
    	// 组件加载完成
    	componentDidMount(){
    		console.log('componentDidMount');
    	}
    	// 将要接收父组件传来的props
    	componentWillReceiveProps(){
    		console.log('componentWillReceiveProps');
    	}
    	// 子组件是不是应该更新
    	shouldComponentUpdate(){
    		console.log('shouldComponentUpdate');
    		return true;
    	}
    	// 组件将要更新
    	componentWillUpdate(){
    		console.log('componentWillUpdate')
    	}
    	// 组件更新完成
    	componentDidUpdate(){
    		console.log('componentDidUpdate')
    	}
    	// 组件将要销毁
    	componentWillUnmount(){
    		console.log('componentWillUnmount')
    	}
    	// 处理点击事件
    	handleClick(){
    		console.log('更新数据:');
    		this.setState({
    			data: 'newState'
    		});
    	}
    	// 渲染
    	render(){
    		console.log('render');
    		return(
    			<div>
    				<div>
    					Props: {this.props.data}
    				</div>
    				<button onClick={() => {this.handleClick()}}>更新组件</button>
    			</div>
    		)
    	}
    }
    
    class App extends React.Component{
    	// 构造函数
    	constructor(props){
    		super(props);
    		this.state = {
    			data : 'oldProps',
    			hasChild: true
    		}
    		console.log('初始化数据','constructor');
    	}
    	onPropsChange(){
    		console.log('更新props:')
    		this.setState({
    			data: 'newProps'
    		})
    	}
    	onDestoryChild(){
    		console.log('干掉子组件:');
    		this.setState({
    			hasChild: false
    		})
    	}
    	render(){
    		return(
    			<div>
    				{
    					this.state.hasChild ? <Component data={this.state.data}/> : null
    				}
    				<button onClick={() => {this.onPropsChange()}}>改变Props</button>
    				<button onClick={() => {this.onDestoryChild()}}>干掉子组件</button>
    			</div>	
    		);
    	}
    }
    
    ReactDOM.render(
    	<div>
    		<App/>
    	</div>,
    	document.getElementById('app')
    );
    

    运行结果:
    在这里插入图片描述

    展开全文
  • react生命周期钩子函数

    万次阅读 2019-04-22 08:23:35
    掌握单词后会更好理解生命周期: constructor ------构造函数 component ------组件 will ------将要 get ------得到 default ------默认值 initial ------最初的 unsafe ...

    感谢内容提供者:金牛区吴迪软件开发工作室

    前言:

    你有没有遇到过这样的问题:

    • 组件的生命周期有哪些?为什么要有生命周期函数?
    • 我应该什么时候去获取后台数据? 为什么很多教程都推荐用componentDidMount? 用componentWillMount会有什么问题?
    • 为什么setState写在这里造成了重复渲染多次?
    • setState在这里写合适吗?

    读完本文希望你能对React的组件生命周期有一定的了解,编写React代码的时候能够更加得心应手,注意本文的生命周期讲的主要是浏览器端渲染,这是后端和全栈的主要使用方式,服务端渲染有些不一样,请注意区分,我们会在文中进行简单说明。

    一、首先我们先来掌握基本单词

    掌握单词后会更好理解和记住生命周期:

    单词意思
    constructor构造函数
    component组件
    will将要
    get得到
    default默认值
    initial最初的
    unsafe不安全的
    static静态的
    derived衍生的
    should应该
    update更新
    unmount取消挂载
    receive收到
    snap提前
    shot拍摄

    二、全部生命周期总体分为三个执行阶段:

    1.组件挂载

    (1)constructor

    可以理解为组件的第一个生命周期,一般会在这里初始化组件的内部状态state 或者 进行方法绑定, 如果在这里面要使用this则必须在super()之后,如果在这里面需要使用props,那么需要把props作为参数传入

    constructor(props) {
      super(props);
      this.state = {
        color: '#fff',
        num: this.props.num,
      };
    }
    

    如果你不需要初始化状态也不需要绑定handle函数的this,那么你可以不实现constructor函数,由默认实现代替。

    (2)static getDerivedStateFromProps
    这个生命周期只要父组件重新渲染时就会触发。

    设置了这个生命周期就不能设置componentWillMount()
    这是react16.3之后新增的一个生命周期,这是一个静态方法。
    这个函数会在render函数被调用之前调用,包括第一次的初始化组件以及后续的更新过程中,每次接收新的props之后都会返回一个对象作为新的state,返回null则说明不需要更新state

    静态方法没有this所以不能使用setState。

    (3)componentWillMount ------------ 17版本即将废除

    组件将要挂载,这个生命周期基本上没有什么用,而且react*17版本之后废弃。
    如果还想继续使用,可以使用UNSAFE_componentWillMount来代替,只不过不可与static getDerivedStateFromProps 混用。

    (4)render

    react最重要的步骤【React组件的核心方法】,用于根据状态state和属性props创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。
    这里是合成虚拟DOM,可以理解为,在这里实际上都还没有真实的dom。

    我们应该保持该方法的纯洁性,这会让我们的组件更易于理解,只要state和props不变,每次调用render返回的结果应当相同,所以请不要在render方法中改变组件状态,也不要在在这个方法中和浏览器直接交互。

    (5)componentDidMount ------------- ajax请求生成DOM

    componentDidMount方法会在render方法之后立即被调用,该方法在整个React生命周期中只会被调用一次。React的组件树是一个树形结构,此时你可以认为这个组件以及他下面的所有子组件都已经渲染完了,所以在这个方法中你可以调用和真实DOM相关的操作了。

    有些组件的启动工作是依赖 DOM 的,例如动画的启动,而 componentWillMount 的时候组件还没挂载完成,所以没法进行这些启动工作,这时候就可以把这些操作放在 componentDidMount 当中。

    这个生命周期就是相当重要的一个生命周期,ajax请求一般都在这里进行。

    解决一个大家的疑问,为什么不在componentWillMount里面发请求:
    1.要废除掉这个生命周期了
    2.跟服务端渲染有关系(同构),如果在 componentWillMount 里获取数据,fetch data会执行两次,一次在服务端一次在客户端,使用 componentDidMount 则没有这个问题。




    2.组件更新

    分为俩种情况,state改变和props改变
    如果state改变,会直接进行到组件更新的第二个shouldComponentUpdate,如果是props改变,会先走static getDerivedStateFromProps 或者 componentWillReceiveProps。

    (1)static getDerivedStateFromProps
    (1.1)componentWillReceiveProps ----- 17版本即将废除

    16.4之前,由于在更新阶段,没有static getDeriveStateFromProps这个生命周期,如果有根据props来生成的state,就需要在这里重新设置一次。因为之前是在constructor里面根据props来初始化的state,constructor只会执行一次,所以要在componentWillReceiveProps来修正state。在新的版本里,static getDerivedStateFromProps这个生命周期不管是在装载还是更新的时候都会触发。因此,componentWillReceiveProps也只会工作到react17.后续想要使用的话可以加前缀UNSAFE_,但不可与static getDerivedStateFromProps一同使用。

    (2)shouldComponentUpdate 性能优化

    这个生命周期用于react的性能优化,接收俩个参数(nextProps,nextState)通常会根据这俩个参数和this.state,this.props来进行对比,根据比较的结果来return true或者false,如果return的是false,将不会再执行后面的生命周期【也就是不会触发渲染】。

    注意这个函数如果返回false并不会导致子组件也不更新。

    PS: 该函数通常是优化性能的紧急出口,是个大招,不要轻易用,如果要用可以参考Immutable 详解及 React 中实践 .

    (3)componentWillUpdate -----17版本即将废除

    没什么卵用

    (4)render

    和mount阶段一样,生成虚拟DOM

    (5)getSnapshotBeforeUpdate ----- 在最近一次渲染输出(提交到DOM节点)之前调用。
    它使得组件能在发生更改之前从DOM中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为参数传递给componentDidUpdate的第三个参数。

    此方法不常用,笔者就没在实战中使用过,官方文档说它可能出现在UI处理中,如需要以特殊方式处理滚动位置的聊天线程等。

    (6)componentDidUpdate
    接收三个参数,分别是:preProps, preState, snapshot
    只有在组件使用了getSnapshotBeforeUpdate生命周期了才会用getSnapshotBeforeUpdate的返回值作为componentDidUpdate生命周期的第三个参数。否则第三个参数为undefined

    会在更新后立即被调用,首次渲染不会触发,你可以在这个方法中进行DOM操作,或者做一些异步调用。
    一般用来根据判断preProps与this.props或者preState与this.state进行比较从而发请求或进行其他的一些处理。




    3.组件销毁

    (1)componentWillUnmount

    组件将要销毁,这里一般可以用来清理定时器,解绑某些事件,取消网络请求等等。

    5.错误处理

    (1)static getDerivedStateFromError ------ 会在子组件抛出错误后被调用
    它将抛出的错误作为参数,并返回一个值更新state。

    注意事项:它会在渲染阶段调用,因此不允许出现副作用【比如请求等】,如遇此类情况,请改用componentDidCatch

    (2)componentDidCatch ------ 同上
    他接受俩个参数

    1. error 抛出的错误
    2. info 带有componentStack key的对象,其中包含有关组件引发错误的栈信息。

    它会在“组件提交”阶段被调用,因此允许执行副作用。它应该用作于记录错误之类的情况。

    三、react生命周期执行的三个步骤【速查表】

    在这里插入图片描述

    四、强制刷新组件 – forceUpdate

    默认情况下,当组件的state或props发生变化时,组件将重新渲染。如果render()方法依赖于其他数据,则可以调用forceUpdate()强制让组件重新渲染。

    调用这个方法会跳过该组件的shouldComponentUpdate()。

    展开全文
  • 主要介绍了React 组件生命周期的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
  • React Native 生命周期

    千次阅读 2017-08-17 16:01:13
    前言:  在面向对象编程中,任何对象的存在都会存在生命周期。类似我们iOS 的View,就会有LoadView,ViewWillAppear,ViewDidLoad等等生命周期。RN也不例外,这篇主要学习RN的生命周期,...React Native生命周期简介
  • React、react生命周期react生命周期运行过程 1、创建阶段 constructor(){ super() console.log('执行构造函数') this.state={ num:1 } } UNSAFE_componentWillMount(){ co...
  • React组件生命周期

    2017-03-21 22:15:39
    React组件生命周期
  • React 生命周期React中,生命周期函数是指 组件在某一时刻会自动执行的函数 组件的生命周期官方文档 生命周期图谱 生命周期函数都是对于组件的。 挂载 - 更新 - 卸载 使用示例 axios安装 yarn add axios 或 ...
  • react组件生命周期(旧) react组件生命周期(新)
  • 下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文将常用的react生命周期绘制成了一张流程图,便于理解和记忆; react中每个组件都包含“生命周期方法”,我们可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法。 react常用生命周期流程图 参考资料 ...
  • react生命周期

    2016-04-14 17:04:31
    React生命周期
  • React16生命周期React fiber架构.pdf
  • ReactNavigation 生命周期

    2020-03-08 19:59:47
    ReactNavigation 生命周期 官网的描述 In a previous section, we worked with a stack navigator that has two screens (Home and Details) and learned how to use navigation.navigate(‘RouteName’) to ...
  • react 新版生命周期

    2021-02-23 19:47:00
    官方计划在17版本完全删除这三个函数,只保留UNSAVE_前缀的三个函数,目的是为了向下兼容,但是对于开发者而言应该尽量避免使用他们,而是使用新增的生命周期函数替代它们。 目前React 16.8+ 的生命周期氛围三个...
  • React 新版生命周期

    2021-03-30 16:13:55
    与旧版生命周期相比,React生命周期即将废弃componentWillMount()、componentWillReceiveProps()、componentWillUpdate()三个钩子,现在使用会出现警告,下一个大版本需要加上UNSAFE_前缀才能使用,以后可能会被彻底...
  • [react] react15、react16生命周期对比

    千次阅读 2019-05-07 11:24:07
    一、react15生命周期 react15生命周期 初始状态 点击“挂载Child Component”按钮后 从右边的console中可以看出Child组件首次挂载的时候,依次触发了Child组件的constructor, ...
  • React16.3.0开始,生命周期进行了一些变化。本文主要介绍React16.3.0之后的生命周期React16.3.0之前生命周期:16版本之前的react组件的生命周期相信大家已经很熟悉。16版本的react对组件的生命周期函数进行了一些...
  • 详解 React 生命周期整个 React 生命周期有3个阶段:创建、更新、卸载,每个阶段有对应的工作和方法,我们可以看下面这个经典的图研究一下:第一阶段这是虚拟 DOM 创建的阶段,会依次执行 5 个方法,这 5 个方法中...
  • react生命周期

    2020-04-09 17:55:38
    react生命周期
  • React Native生命周期整理

    千次阅读 2016-05-11 22:16:05
    整理的React Native的生命周期
  • React生命周期从广义上分为三个阶段:挂载、渲染、卸载,因此可以把React生命周期分为两类:挂载卸载过程和更新过程。 目录 React生命周期图: 1. 挂载卸载过程 1.1.constructor() 1.2....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,831
精华内容 14,332
关键字:

react17生命周期