澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

React Native 生命周期

近日手足团队让自家去协理优化七个页面,前端用的react全家桶,后端用的python,上贰遍写react代码都过去一年了,顺着从前的的上学思路,再捋顺一下react的中心

title:’哈哈哈哈’

实例化

当组件在客户端被实例化,第二次被创立时,以下办法依次被调用:

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount

当组件在服务端被实例化,第叁遍被创制时,以下措施依次被调用:

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render

componentDidMount 不会在服务端被渲染的经过中调用。

getDefaultProps

var U  serInformation = React.createClass({
    getDefaultProps: function() {
        return {
            name: 'Nobody', 
            score: 0
        }
    }
});

在开立组件的其余实例在此以前,只调用getDefaultProps()方法一回。 所以你应当制止在getDefaultProps()方法中选用this.props。其回到的对象能够用来安装暗许的 props(properties的缩写卡塔尔国 值。

getInitialState

const userScore = [
  {
        name: 'Tom', 
        score: 55
    },
    {
        name: 'Jerry', 
        score: 80
    }
]

var UserInformation = React.createClass({
    getInitialState: function() {
        return {
            players: userScore
        }
    },
});

开首化组件的 state 的值,其归来值会赋值给组件的 this.state 属性。getInitialState()方法仅在实例化组件在此以前调用叁遍。

componentWillMount

劳务器端和客户端都只调用贰次,在伊始化渲染推行在此之前及时调用。
它也是在组件WillMount()中装置开头状态值的好地点。

class UserInformation extends React.Component {
    componentWillMount() {
        this.setState({
            isPassed: this.props.score >= 60
        });

        alert('componentWillMount => ' + this.props.name);
        console.log('componentWillMount => ' + this.props.name);   
    }

    // ...
}

render

该方法会成立三个假造DOM,用来代表组件的出口。对于二个组件来说,render方法是天下无双一个供给的措施。render方法需求满意下边几点:

  • 只好因此 this.props 和 this.state 访谈数据(无法校订)
  • 能够重返 null,false 恐怕别的React组件
  • 只能冒出一个五星级组件,不可能回到少年老成组成分
  • 不可能校勘组件的景色
  • 不能够改改DOM的出口

据书上说 state 的值,生成页面必要的假造 DOM 构造,并赶回该组织。

componentDidMount

在渲染达成后调用此办法,那时的DOM已为真实DOM,能够再该格局中经过 this.getDOMNode(卡塔尔(قطر‎ 访谈到真实的 DOM(推荐用ReactDOM.findDOMNode(卡塔尔国卡塔尔。

class Scroll extends React.Component {
    constructor(props) {
        super(props);
        this._handleScroll = this.handleScroll.bind(this);
    }
    handleScroll() {}
    componentDidMount() {
        alert('componentDidMount in NoticeBoard');
        window.addEventListener('scroll', this._handleScroll);
    }

    // ...
}

鉴于组件并非真正的 DOM 节点,而是存在于内部存款和储蓄器之中的风度翩翩种数据结构,叫做虚拟 DOM (virtual DOM)。唯有当它插入文书档案现在,才会化为实际的 DOM 。一时须求从组件获取真实 DOM 的节点,当时将要用到 ref 属性。
急需注意的是,由于 this.refs.[refName] 属性获取的是真正 DOM ,所以必需等到虚构 DOM 插入文书档案未来,工夫应用那性子子,不然会报错。

 澳门官方网站平台 1

构件是还是不是应该渲染新的props或state,重返false表示跳过继续的生命周期方法,平常无需运用避防止现身bug。在现身应用的瓶颈时,可透过该措施实行妥善的优化。

组件的生命周期


零器件在react的生命周期中重视经验四个阶段:实例化、存在期和销毁时。
React.js在组件生命周期的各样阶段揭破接口或关系情势。

澳门官方网站平台 2

react组件的生命周期概念图

  和装载进度差异,这里的componentDidUpdate,不仅能够在浏览器端实行,也得以在服务器端施行

零部件已存在时的情状改善

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

销毁时

componentWillUnmount

在组件被卸载或从DOM中移除在此之前及时调用。
行使它看抓牢行清理操作的空子。 例如,在这里处消弭绑定事件、销毁无效侦听器以幸免内部存款和储蓄器泄漏。

class App extends React.Component {
    componentWillUnmount() {
        window.removeEventListener('scroll', this._handleScroll);
    }
}

  

  onRadChange = () => {

存在期

此刻组件已经渲染好还要顾客能够与它进行相互作用,比方鼠标点击,手引导按,或然此外的片段事件,导致应用状态的改观,你将会见到上面包车型大巴不二秘技依次被调用

1、componentWillReceiveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate

componentWillReceiveProps

当组件选择到新的 props 时,会触发该函数。在改函数中,常常能够调用 this.setState 方法来变成对 state 的改正。

class App extends React.Component {
    componentWillReceiveProps(nextProps) {
        // Calculate state according to props changes
        this.setState({
            isPassed: nextProps.score
        });
    }
}

shouldComponentUpdate

在收受到新的props或state时,就要渲染从前调用该函数。 在开班渲染时不会调用此方式。
shouldComponentUpdate()私下认可情况下重返true。
这种办法经常是三个机缘,以幸免考虑品质的不要求的渲染。 只要让shouldComponentUpdate()再次来到false,那么组件的render()方法将被全然跳过,直到下一个props或state爆发变动。

class App extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        // Don't rerender if score doesn't change, 
        if ( nextProps.score == this.props.score ) {
            return false;
        }

        return true;
    }
}

componentWillUpdate

以此办法和 componentWillMount 相似,在组件选择到了新的 props 可能 state 将要进展重新渲染前,componentWillUpdate(object nextProps, object nextState卡塔尔 会被调用,注意不要在这里方面里再去改良 props 大概 state。

componentDidUpdate

其后生可畏法子和 componentDidMount 相符,在组件的纠正刷新到DOM后componentDidUpdate(object prevProps, object prevState卡塔尔国 会被调用。 这种方法不是始于渲染的办法。能够在这里地拜见并修正DOM。

  那一个函数的机要,稍差于render,稳坐第二把交椅,render函数决定了改渲染什么,而shouldComponentUpdate决定了无需渲染什么,这两位大佬都亟需回到函数,那风度翩翩经过能够抓实品质,忽视掉未有要求重新渲染的历程

});

卸载进度(unmount),组件从DOM中被移除的长河

 getInitialState 废弃  使用constructor(props){  }

  

7.shouldComponentUpdate

参照他事他说加以考查资料

this.state.title

装载进程(mont),就是组件在率先次在DOM树中渲染的长河

10.componentWillUnmount  零零部件将在移除销毁内部存款和储蓄器警示调用

生命周期对照表

成效于组件的实例,在实例创设时调用三遍,用于带头化种种实例的state,那时候能够访谈this.props。

 

5.componentDidMount  消耗质量的操作 都在这里间去操作 : 加载互联网乞求 , 停车计时器…

 

      otherChecked: false,

  React:组件的生命周期

第三次实例化

getDefaultProps

getInitialState

componentWillMount

render

componentDidMount

实例化实现后的翻新

getInitialState

componentWillMount

render

componentDidMount

二、更新进度

1.getDefaultProps  不得以改善这些中的值

这里以为没啥好说的,实际中也少之又少用到,这里只有四个componentWillUnmount,作者最先前还很灵活的发掘,前多少个进程皆有will和DId俩个措施,怎么到此处就唯有Will了,后来精心生机勃勃想,连dom都早已删除掉了,你还did干啥。。。哈哈

意义于组件类,只调用二遍,重临对象用于安装私下认可的props,对于援引值,会在实例中国共产党享。

 

                bool: true

组件的生命周期正是Reac的行事经过,就好比人有生育养老治疗出殡和安葬,大自然有日月轮流,各种组件在网页中也可能有被创建、更新和删除,仿佛有评释的有机体相符       

});

  2、getInitialState和getDefaultProps

this.setState({

  就是Es6里的布局函数,成立叁个组件类的实例,在这里生机勃勃经过中大家要开展两步操作:起首化state,绑定成员函数的this意况

    name :'hhhhh',

 

设置值

 

    this.state = {

更新进程(update),组件被重新渲染的历程

改值 -> 重新绘制 : update

  不过componentDidMount函数功能就大得多,由于那生机勃勃进程通常只好在浏览器端调用,从而我们在此收获异步数据,何况在componentDidMount调用的时候,组件已经棉被服装载到DOM树上了,还应该有,能够在这里间实行此外库的代码,比方Jquery(很皮~)

componentWillUnmount

  那多个函数分别在render前后实践,componentWillMonut显得有个别鸡肋,还不曾经担任何事物展现,操作完全能够提前到constructor中来进展

title : ‘哈哈哈’

  1、componentWillReceiveProps(nextProps)

取值

  react入门实例-阮豆蔻梢头峰

            this.setState({

  不浮夸的说render是React组件中可是关键的叁个函数。这些react中举世无双不足忽略的函数,在render函数中,只好有叁个父成分。

2.getInitialState  澳门官方网站平台,能够修正那其间的值

   《深入浅出react和redux》程墨

es6允许将props和propTypes当做静态属性在类外开始化

回顾的话就是props和state被涂改的进程,依次调用compWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

  name:React.PropTypes.string.isRequired,

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:React Native 生命周期

相关阅读