响应生命周期方法嵌套组件

分享于 

11分钟阅读

Web开发

  繁體

介绍

本文讨论了响应生命周期方法和嵌套组件,我觉得很重要,可以保持注释的完整。

背景

在早期的注释,我讨论了生命周期方法的执行顺序( 在非嵌套的单个响应组件中)。 在本文中,我将给出一个示例,以显示嵌套React组件的生命周期方法执行顺序。

附加的是一个 Java Maven 项目。 示例在"nested-component-life-cycle。html"文件中实现。 如果你对探索 Maven 项目感兴趣,可以查看这个链接和这个链接。 如果不使用 Java,就可以了,因为附加的是 static"html"文件,你可以从任何web服务器加载它。 加载"nested-component-life-cycle。html"时,它将按如下所示在浏览器中显示:

  • React组件嵌套在 3层;
  • 每个复选框都由对应组件的"shouldComponentUpdate ( )"方法"使用。 如果选中,则该方法将为 return true,否则为 false。

这个注释很简单,我建议先看一下简单的非嵌套案例,这将使你的阅读更容易。 如果你是新的React,我将强烈建议你看一下它,以便你熟悉本文的React语法和上下文。 我尽量让这个注释变得简单,但是我必须承认这是一个相对高级的话题。

"nested-component-life-cycle。html"文件

嵌套结构

为了更容易实现嵌套组件,我将嵌套结构保存在Json对象中。


var tree = {


 label: 'Root',


 bgColor: 'lightpink',


 level: 0,


 children: [


 {


 label: 'A',


 bgColor: 'lightblue',


 level: 1,


 children: [


 {


 label: 'A-1',


 bgColor: 'lightyellow',


 level: 2


 },


 {


 label: 'A-2',


 bgColor: 'lightyellow',


 level: 2


 }


 ]


 },


 {


 label: 'B',


 bgColor: 'lightblue',


 level: 1,


 children: [


 {


 label: 'B-1',


 bgColor: 'lightyellow',


 level: 2


 },


 {


 label: 'B-2',


 bgColor: 'lightyellow',


 level: 2


 }


 ]


 }


 ]


};



  • Json对象表示从"root"到叶" a-1"。" a-2"。" b-1"和" b-2"的树结构;
  • 我将遍历Json树生成嵌套的React组件。
复选框

通过遍历Json树,以下代码创建一个响应类,它可以用来将所有复选框呈现到浏览器。 每个复选框的HTML属性"id"都是"ck"+,即Json节点的标签。


var chkClass = function(node) {


 return React.createClass({


 render: function() {


 var renderNestedNode = function(node) {


 var label = node.label;


 var children = node.children;



 var o = {type: 'checkbox',


 id: 'ck' + label,


 defaultChecked: true


 };


 var current = React.createElement('label', null,


 React.createElement('input', o), label);



 if (!children || children.length == 0) {


 return React.createElement('ul', null,


 React.createElement('li', null, current));


 }



 var lis = [];


 lis.push(React.createElement('li', {key: 0}, current));


 for (var i = 0; i <children.length; i++) {


 lis.push(React.createElement('li', {key: i + 1},


 renderNestedNode(children[i])));


 }



 return React.createElement('ul', null, lis);


 };



 return renderNestedNode(node);


 }


 });


}(tree);



测试的嵌套React类

通过遍历Json树,下面的代码创建一个嵌套的响应类。 嵌套类中的每个组件都有它的自己的生命周期方法实现。 我们将使用这个嵌套类来测试生命周期方法的执行顺序。


var nestedClass = function(node) {


 var getReactClass = function(node, children) {


 var label = node.label;


 var bgColor = node.bgColor;


 var level = node.level;



 var indent = '';


 for (var i = 0; i <level; i++) {


 indent = indent + ' ';


 }


 var log = function(method) {


 console.log(indent + label + ': ' + method);


 };



 return React.createClass({


 getInitialState: function() {


 log('getInitialState');


 return {updateid: 0}; 


 },


 componentWillMount: function() {


 log('componentWillMount');


 },


 componentDidMount: function() {


 log('componentDidMount'); 


 },


 shouldComponentUpdate: function(nextProp, nextState) {


 var id = 'ck' + label;


 var ckd = document.getElementById(id).checked;


 if (ckd) {


 log('shouldComponentUpdate - true');


 return true;


 }



 log('shouldComponentUpdate - false');


 return false;


 },


 componentWillUpdate: function() {


 log('componentWillUpdate');


 },


 componentDidUpdate: function() { 


 log('componentDidUpdate');


 },


 componentWillUnmount: function() {


 log('componentWillUnmount'); 


 },


 update: function() {


 this.setState({updateid: this.state.updateid + 1});


 },


 unmount: function() {


 var node = ReactDOM.findDOMNode(this);


 ReactDOM.unmountComponentAtNode(node.parentNode);


 },


 render: function() {


 var updateBtn = React.createElement('button',


 {onClick: this.update}, 'Update');


 var unmountBtn = React.createElement('button',


 {onClick: this.unmount}, 'Unmount');



 var buttons = React.createElement('div',


 null, updateBtn, unmountBtn);



 var updateLbl = label


 + ' update - ' + this.state.updateid;



 var cElements = [];


 if (children) {


 for (var i = 0; i <children.length; i++) {


 var c = React.createElement(children[i]);



 cElements.push(React.createElement('div', {key: i}, c));


 }


 }



 return React.createElement('div',


 {className: 'border', style: {backgroundColor: bgColor}},


 updateLbl, buttons, cElements);


 }


 });


 };



 var getNestedClass = function(node) {


 var children = node.children;


 if (!children || children.length == 0) {


 return getReactClass(node);


 }



 var classes = [];


 for (var i = 0; i <children.length; i++) {


 classes.push(getNestedClass(children[i]));


 }



 return getReactClass(node, classes);


 };



 return getNestedClass(node);



}(tree);



挂载到 DOM

下面的代码在浏览器中加载页时将响应类装载到"窗口。onload"事件中。


<div id="checks" class="border"></div>


<div id="content"></div>




window.onload = function() {


 ReactDOM.render(React.createElement(chkClass),


 document.getElementById('checks'));



 ReactDOM.render(React.createElement(nestedClass),


 document.getElementById('content'));


};



响应生命周期方法的执行顺序

挂载过程

在 Chrome 浏览器中,你可以通过" CTL-SH*T-J"启动开发者工具。 如果将"nested-component-life-cycle。html"加载到浏览器中,并查看开发人员工具中的"控制台"选项卡,可以看到以下日志:

  • 在安装过程中,每个组件的"getInitialState ( ) 和"componentWillMount ( ) 方法都被调用。 从"root"到叶的调用顺序是先从到深度,再到深度;
  • 调用所有组件的"getInitialState ( )"和"componentWillMount ( )"方法后,调用每个组件的"componentDidMount ( )"方法。 调用"componentWillMount ( )的顺序是从叶到"root";
  • "root"组件中的"componentWillMount ( )"方法称为最后一个。 此时,HTML内容在浏览器中完全呈现。
更新过程

如果我们点击任何"更新"按钮,我们可以检查与更新过程相关的生命周期方法。 当我们单击" a-2"组件中的"更新"按钮时,以下是日志:

日志显示只更新" a-2"组件。 更新子组件不会触发父组件上的更新。 如果现在单击"root"组件中的"更新"按钮,可以看到以下日志:

  • 如果触发父组件的更新,所有子组件都将被更新;
  • 在每个组件上的"shouldComponentUpdate ( ) 和"componentWillMount ( ) 方法都将在深度中被调用:;;
  • 对所有组件调用"shouldComponentUpdate ( )"和"componentWillMount ( )"方法后,调用"componentDidUpdate ( )"从叶到"root";
  • "root"组件中的"componentDidUpdate ( ) 称为最后一个。 此时,浏览器中的HTML内容已经完全更新。

如果取消选中与组件"a"相关的复选框并单击"root"组件中的"更新"按钮,可以看到以下日志:

"a"组件中的"shouldComponentUpdate ( )"方法返回了 false,它停止了"a"组件的更新。 它还停止了"a"中任何子组件的更新。

卸载进程

如果单击任何"卸载"按钮,我们就开始卸载元素的卸载过程。 但是,如果点击"卸载"按钮并不是"root"元素,我们会得到一条错误消息,告诉我们不能挂载子元素。

如果单击"root"元素中的"卸载"按钮,则可以看到以下日志:

  • 每个元素的"componentWillUnmount ( )"方法在深度第一步中调用;
  • 卸载过程完成后,由响应呈现的所有HTML内容都将从DOM中清除。

Points of Interest

  • 本文讨论了嵌套组件的React生命周期方法;
  • 如果你单独创建网页,则这里主题对你可能不重要。 但是如果想使用第三方或者你自己的Javascript库来更新 DOM,那么生命周期方法及其执行顺序将发挥重要作用;
  • 希望你喜欢我的帖子,我希望这张便条能帮你或者其他的。

历史记录

第一个修订版- 6/9/2016.


COM  react  component  组件  method  NEST