【译】React组件的生命周期
原文:https://medium.com/react-ecos...
github issue:https://github.com/chemdemo/c... 一段探索React自建内部构造的旅程在先前的文章里我们涵盖了React基本原理和如何构建更加复杂的交互组件。此篇文章我们将会继续探索React组件的特性,特别是生命周期。 稍微思考一下React组件所做的事,首先想到的是一点是:React描述了如何去渲染(DOM)。我们已经知道React使用 看起来我们需要对组件(运行)的各个阶段进行控制,组件运行所有涉及的各个阶段叫做组件的生命周期,并且每一个React组件都会经历这些阶段。React提供了一些方法并在组件处于相应的阶段时通知我们。这些方法叫做React组件的生命周期方法且会根据特定并可预测的顺序被调用。 基本上所有的React组件的生命周期方法都可以被分割成四个阶段:初始化、挂载阶段(mounting)、更新阶段、卸载阶段(unmounting)。让我们来近距离分别研究下各个阶段。 初始化阶段 初始化阶段就是我们分别通过 getInitialState()方法也只会被调用一次,(调用时机)刚好是mounting阶段开始之前。返回值将会被当成 现在我们来证明上面的猜想,实现一个显示的值可以被增加和减少的组件,基本上就是一个拥有“+”和“-”按钮的计数器。 var Counter = React.createClass({
getDefaultProps: function() {
console.log('getDefaultProps');
return {
title: 'Basic counter!!!'
}
},getInitialState: 'getInitialState');
return {
count: 0
}
},render: 'render');
return (
<div> <h1>{this.props.title}</h1> <div>{this.state.count}</input type='button' value='+' onClick={this.handleIncrement} /> <'-' {this.handleDecrement} /> </div> ); },handleIncrement: function() { var newCount = this.state.count + 1; this.setState({count: newCount}); },handleDecrement: function() { var newCount = this.state.count - 1; this.setState({count: newCount}); },propTypes: { title: React.PropTypes.string } }); ReactDOM.render( React.createElement(Counter),document.getElementById('app-container') );
我们通过
现在我们想要让Counter组件可以设置 var Component = React.createClass({
getDefaultProps: "Basic counter!!!",step: 1
}
},0)">return {
count: (this.props.initialCount || 0)
};
},0)">var step = this.props.step;
{this.updateCounter.bind(this, step)} /> <-step)} /> </
更新阶段当组件的属性或者状态更新时也需要一些方法来供我们执行代码,这些方法也是组件更新阶段的一部分且按照以下的顺序被调用: 1、当从父组件接收到新的属性时: 2、当通过 此阶段React组件已经被插入DOM了,因此这些方法将不会在首次render时被调用。 最先被调用的方法是 ...
componentWillReceiveProps: function(newProps) {
this.setState({count: newProps.initialCount});
},...
shouldComponentUpdate()方法允许我们自行决定下一个state更新时是否触发重复render。此方法返回一个布尔值,且默认是true。但是我们也可以返回false,这样下面的(生命周期)方法将不会被调用:
当有性能瓶颈时也可以使用 var TextComponent = React.createClass({
shouldComponentUpdate: function(nextProps,nextState) {
this.props.text === nextProps.text) return false;
return true;
},210)">textarea {this.props.text} />;
}
});
此例中无论何时父组件传入一个“text”属性到 当接收到新的属性或者state时在render之前会立刻调用 ...
componentWillUpdate: 'componentWillUpdate',nextProps,nextState);
},244)">componentDidUpdate()方法在React更新DOM之后立刻被调用。可以在此方法里操作被更新过的DOM或者执行一些后置动作(action)。此方法有两个参数:
卸载阶段(unmounting)此阶段React只提供了一个方法:
它将在组件从DOM卸载之前被调用。可以在内部执行任何可能需要的清理工作,如无效的计数器或者清理一些在 ...
componetWillUnmount: function(){
$(this._ref).select2('destroy');
},...
概述React为我们提供了一种在创建组件时申明一些将会在组件生命周期的特定时机被自动调用的方法的可能。现在我们很清晰的理解了每一个组件生命周期方法所扮演的角色以及他们被调用的顺序。这使我们有机会在组件创建和销毁时执行一些操作。也允许我们在当属性和状态变化时做出相应的反应从而更容易的整合第三方库和追踪性能问题。 希望您觉得此文对您有用,如果是这样,请推荐之!!! 原文地址:https://segmentfault.com/a/1190000006807631?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |