服务分类
联系我们

长沙市华融劳务派遣有限公司 
电话:0731-88084518
传真:0731-88084518
手机:15111173115
联系人:陈先生
邮编:410200
网址:http://www.hsyush.com
地址:长沙市望城县高塘岭镇郭亮南路49号

 

贝斯特娱乐城
贝斯特娱乐城_贝斯特娱乐城平台_贝斯特娱乐城官网
作者:admin  来源:未知 阅读: 次 时间:2017-02-03 09:42 字体:[  复制 打印 网址

componentWillMount()方法是这个阶段最先调用的,它只在刚好初始渲染(initialrendering)发生之前被调用一次,也就是React在DOM插入组件之前。需要注意的是在此处调用this.setState()方法将不会触发重复渲染(re-render)。如果添加下面的代码到计数器组件我们将会看到此方法在getInitialState()之后且render()之前被调用。

Axios是一个基于priomise的跨浏览器和Node.js的HTTP客户端。

基本上所有的React组件的生命周期方法都可以被分割成四个阶段:初始化、挂载阶段(mounting)、更新阶段、卸载阶段(unmounting)。让我们来近距离分别研究下各个阶段。

现在我们拥有了一个可定制化的组件。

原文链接

假设我们想要通过API拉取数据来初始化组件。我们应该直接在计数器组件的componentDidMount()方法拉取数据,但是这让组件看起来有太多逻辑了,更可取的方案是使用容器组件来做:

componentDidMount()是这个阶段第二个被调用的方法,刚好发生在React插入组件到DOM之后,且也只被调用一次。现在可以更新DOM元素了,这意味着这个方法是初始化其他需要访问DOM或操作数据的第三方库的最佳时机。

当组件的属性或者状态更新时也需要一些方法来供我们执行代码,这些方法也是组件更新阶段的一部分且按照以下的顺序被调用:

这个方法的一个常见使用场景是当我们使用需要操作更新后的DOM才能工作的第三方库——如jQuery插件的时候。在componentDidMount()方法内初始化第三方库,但是在属性或state更新触发DOM更新之后也需要同步更新第三方库来保持接口一致,这些必须在componentDidUpdate()方法内来完成。为了验证这一点,让我们看看如何开发一个Select2库包裹(wrapper)React组件:

前言

看起来我们需要对组件(运行)的各个阶段进行控制,组件运行所有涉及的各个阶段叫做组件的生命周期,并且每一个React组件都会经历这些阶段。React提供了一些方法并在组件处于相应的阶段时通知我们。这些方法叫做React组件的生命周期方法且会根据特定并可预测的顺序被调用。

在先前的文章里我们涵盖了React基本原理和如何构建更加复杂的交互组件。此篇文章我们将会继续探索React组件的特性,特别是生命周期。

getDeultProps()方法被调用一次并缓存起来——在多个类实例之间共享。在组件的任何实例被创建之前,我们(的代码逻辑)不能依赖这里的this.props。这个方法返回一个对象并且属性如果没有通过父组件传入的话相应的属性会挂载到this.props对象上。

我们通过getDeultProps()方法配置一个“title”属性,如果没有传入则提供一个默认值。然后通过getInitialState()为组件设置一个初始state值“{count:0}”。如果运行这段代码你将会看到控制台输出如下结果:

稍微思考一下React组件所做的事,首先想到的是一点是:React描述了如何去渲染(DOM)。我们已经知道React使用render()方法来达到这个目的。然而仅有render()方法可能不一定都能满足我们的需求。如果在组件rendered之前或之后我们需要做些额外的事情该怎么做呢?我们需要做些什么以避免重复渲染(re-render)呢?

它将在组件从DOM卸载之前被调用。可以在内部执行任何可能需要的清理工作,如无效的计数器或者清理一些在componentDidMount()/componentDidUpdate()内创建的DOM。比如在Select2组件里边我们可以这样子:

初始化阶段

增长(Mounting)阶段

当接收到新的属性或者state时在render之前会立刻调用componentWillUpdate()方法。可以利用此时机来为更新做一些准备工作,虽然这个阶段不能调用this.setState()方法:

此阶段React组件已经被插入DOM了,因此这些方法将不会在首次render时被调用。

卸载阶段(unmounting)

初始化阶段就是我们分别通过getDeultProps()和getInitialState()方义this.props默认值和this.state初始值的阶段。

更新阶段

React为我们提供了一种在创建组件时申明一些将会在组件生命周期的特定时机被自动调用的方法的可能。现在我们很清晰的理解了每一个组件生命周期方法所扮演的角色以及他们被调用的顺序。这使我们有机会在组件创建和时执行一些操作。也允许我们在当属性和状态变化时做出相应的反应从而更容易的整合第三方库和追踪性能问题。

getInitialState()方法也只会被调用一次,(调用时机)刚好是mounting阶段开始之前。返回值将会被当成this.state的初始值,且必须是一个对象。

现在我们来证明的猜想,实现一个显示的值可以被增加和减少的组件,基本上就是一个拥有“+”和“-”按钮的计数器。

此阶段React只提供了一个方法:

最先被调用的方法是componentWillReceiveProps(),当组件接收到新属性时被调用。我们可以利用此方法为React组件提供一个在render之前修改state的机会。在此方法内调用this.setState()将不会导致重复render,然后可以通过this.props访问旧的属性。例如计数器组件,如果我们想要在任何时候父组件传入“initialCount”时更新状态,可以这样做:

shouldComponentUpdate()方法允许我们自行决定下一个state更新时是否触发重复render。此方法返回一个布尔值,且默认是true。但是我们也可以返回lse,这样下面的(生命周期)方法将不会被调用:

一段探索React自建内部构造的旅程

Mounting阶段发生在组件即将被插入到DOM之前。这个阶段有两个方法可以用:componentWillMount()和componentDidMount()。

作者:@dmyang

当从父组件接收到新的属性时:

这里通过Function.prototype.bind使用偏函数应用(PartialApplication)来达到复用代码的目的。

正文从这开始~

此例中无论何时父组件传入一个“text”属性到TextComponent并且text属性等于当前的“text”属性时,组件将会不会重复render。

昨天的文章【第696期】React性能优化,大家记住了多少呢?今天继续这个react话题,本文由魅族科技开发团队@dmyang童鞋翻译分享的。

概述

componentWillUnmount()

关于

版权所有:长沙市贝斯特娱乐城劳务派遣有限公司 联系人:陈先生  电话:15111173115 传真:0731-88084518 
邮政编码:410200  地址:长沙市望城县高塘岭镇郭亮南路49号。 备案许可证编号为:湘ICP备11001510号