响应生命周期方法和杂项

分享于 

20分钟阅读

Web开发

  繁體

介绍

本文是对 JSX 生命周期方法和其他主题以及与响应相关的浏览器内存集合的示例。 React支持嵌套组件,但这里注释仅限于非嵌套组件以简化。 本笔记只适用于浏览器侧面的React。

背景

响应具有事件样式方法的列表。 要使用与信心相关的React,尤它的是如果我们想使用它的他Javascript库,请清楚了解这些生命周期方法。 对于一个简单的非嵌套响应组件,这些方法的列表如下所示:

  • getInitialState() - 在组件装入之前调用一次。 返回值将被用作组件的初始状态;
  • 在初始呈现之前,调用一次 componentWillMount()
  • componentDidMount() - 在初始呈现发生后立即调用一次。 如果希望与其他JavaScript框架集成,请在此方法中执行这些操作;
  • shouldComponentUpdate ( nextProp,nextState ) - 在接收新的道具或者状态时调用之前调用。 对于初始呈现,不调用这里方法;
  • componentWillUpdate() - 在接收新的道具或者状态时立即调用它。 对于初始呈现,不调用这里方法;
  • 在组件更新到DOM之后立即调用 componentDidUpdate()。 这里方法不是为初始渲染而调用的。 当组件更新时,可以使用这里方法作为对DOM进行操作的机会;
  • 在组件未从DOM挂载之前立即调用 componentWillUnmount()。 你可以在这里方法中执行任何必要的清理工作;
  • 这里方法返回组件的HTML内容。

本文提供了示例,以说明这些事件样式方法何时激发,以及它们在何时发生火灾。 official React文档中,"getInitialState ( ) 和"渲染( ) 方法没有列出为生命周期方法,但我觉得它们在组件生命周期中扮演重要角色。

附加的是一个 Java Maven 项目。 这个"index.html"文件包含了其他示例"html"文件的超级链接。

如果你对探索 Maven 项目感兴趣,可以查看这个链接和这个链接。 如果不使用 Java,就可以了,因为附加的是 static"html"文件,你可以在任何web服务器上运行。 CDN"https://cdnjs.cloudflare.com/", 相关的Javascript库从链接,因此你需要使用因特网访问来运行示例。

Babel或者不 Babel? 这个问题就是

在生命周期方法的例子之前,我想先讨论一下" JSX"。 "渲染( ) 方法是用于响应返回组件的HTML内容的方法。 我们可以在"渲染( )"中使用两种类型的语法:

  • 我们可以使用Javascript函数"。react ( createelement ) ) ;
  • 我们还可以使用"jsx"语法,让我们可以输入类似HTML语法的HTML内容。

" 0.jsx-or-not-babel。html"使用"jsx"语法," 0.jsx-or-not-javascripts。html"使用"。react ( createelement ) )"函数:


<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title>0.JSX-or-Not-babel.html</title>


<link rel="stylesheet" type="text/css" href="styles/app.css">



</head>


<body>


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


<div>


</div>


<div><a href="index.html">Go back</a></div>


</body>


<script type="text/javascript">


console.time('execution');


</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>



<script type="text/babel">


var myclass = React.createClass({


 componentDidMount: function() {


 console.timeEnd('execution');


 },


 render: function() {


 return <div></div>;


 }


});



ReactDOM.render(


 React.createElement(myclass, null),


 document.getElementById('content')


);



</script>



</html




<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title>0.JSX-or-Not-javascripts.html</title>


<link rel="stylesheet" type="text/css" href="styles/app.css">



</head>


<body>


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


<div>


</div>


<div><a href="index.html">Go back</a></div>


</body>


<script type="text/javascript">


console.time('execution');


</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>



<script type="text/javascript">


var myclass = React.createClass({


 componentDidMount: function() {


 console.timeEnd('execution');


 },


 render: function() {


 return React.createElement('div', null);


 }


});



ReactDOM.render(


 React.createElement(myclass, null),


 document.getElementById('content')


);



</script>



</html>



  • 使用React,我们需要将" react.js"文件和"响应 dom。js"文件链接在HTML文件中;
  • 如果我们想使用"jsx"语法,我们需要链接" browser.min.js"文件并使Javascript类型="文本/babel";
  • 两个示例在浏览器上呈现一个空的"div";
  • " console.time('execution')"和" console.timeEnd('execution')"函数测量第一个Javascript代码执行之间的时间和空"div"的呈现时间。

If go,least,load,,Chrome,load,load,load,load,load,load,load,load,load,load,load,load,load,load,least,open,open,open。

  • 重要的是要注意,在缓存所有Javascript文件之后测量时间,所以没有进一步的缓存来提高性能。
  • 我们必须注意的是,我们通过响应来呈现一个空的"div"。 这表明,如果我们使用JSX的React,我们需要容忍 0.5第二个启动开销,而不管我们想要呈现什么。
  • 在尝试&错误之后,我发现大部分 0.5秒都被浏览器用来评估/运行" browser.min.js"文件中的代码。
babel或者不 babel? 这个问题就是

jsx/babel语法提供了很多便利,因为它与HTML语法相似。 对于一些真正的单页应用程序,0.5第二个开销可以能是可以接受的,因为" browser.min.js"文件只需要一次。 但是如果网页需要重新加载,每个负载将花费用户额外 0.5秒。 无论你的决定是什么,都很好地告知你 0.5秒的开销。 当然,我希望可以在未来的响应版本中删除 0.5秒的开销。

生命周期方法- 挂载过程

" 1.life-cycle-mount。html"用于试验与安装过程相关的生命周期方法以及它们的触发顺序。


<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title>1.life-cycle-mount.html</title>


<link rel="stylesheet" type="text/css" href="styles/app.css">



</head>


<body>


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


<div>


</div>


<div><a href="index.html">Go back</a></div>


</body>


<script type="text/javascript">


</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>



<script type="text/javascript">


var myclass = React.createClass({


 getInitialState: function() {


 console.log('getInitialState called');


 return {};


 },


 componentWillMount: function() {


 console.log('componentWillMount called');


 },


 componentDidMount: function() {


 console.log('componentDidMount called');


 },


 render: function() {


 console.log('render called');



 return React.createElement('div', null, "Mount methods example");


 }


});



window.onload = function() {


 var element = React.createElement(myclass, null);


 ReactDOM.render(element, document.getElementById('content'));


};



</script>



</html>



  • " 1.life-cycle-mount。html"在浏览器上呈现一个简单的"div";
  • 在每个方法中调用" console.log ( )"函数,以便检查方法是否被调用,以及从开发人员工具中调用的顺序。

结束语
  • 可以通过"reactdom。渲染( )"方法将响应组件装载到HTML元素中;
  • 生命周期方法按以下顺序激发:
    • getInitialState
    • componentWillMount
    • 呈现
    • componentDidMount
  • 一旦安装过程开始,就没有办法阻止这些方法的射击;
  • 当"componentDidMount"方法激发时,HTML内容通过响应在DOM中完全呈现。

生命周期方法- 更新过程

" 2.life-cycle-update。html"用于试验与更新过程相关的生命周期方法以及它们的触发顺序。


<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title>2.life-cycle-update.html</title>


<link rel="stylesheet" type="text/css" href="styles/app.css">



</head>


<body>


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


<div>


</div>


<div><a href="index.html">Go back</a></div>


</body>


<script type="text/javascript">


</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>



<script type="text/javascript">


var myclass = React.createClass({


 getInitialState: function() {


 return {


 title: 'Update methods example',


 updateid: 0


 };


 },


 shouldComponentUpdate: function(nextProp, nextState) {


 if (! nextState.updateui) {


 console.log('shouldComponentUpdate called - return false');


 return false;


 }



 console.log('shouldComponentUpdate called - return true');


 return true;


 },


 componentWillUpdate: function() {


 console.log('componentWillUpdate called');


 },


 componentDidUpdate: function() {


 console.log('componentDidUpdate called');


 },


 updateButtonClick: function() {


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


 },


 noupdateButtonClick: function() {


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


 },


 render: function() {


 console.log('render called');



 var s = this.state;


 var label = s.title + ' - ' + s.updateid;


 var title = React.createElement('div', null, label);



 var noupdateButton = React.createElement('button',


 {onClick: this.noupdateButtonClick}, 'No-update button');


 var updateButton = React.createElement('button',


 {onClick: this.updateButtonClick}, 'Update button');



 var buttons = React.createElement('div', null, noupdateButton, updateButton);


 return React.createElement('div', null, title, buttons);


 }


});



window.onload = function() {


 var element = React.createElement(myclass, null);


 ReactDOM.render(element, document.getElementById('content'));


};



</script>



</html>



  • 在本例中,将向浏览器呈现两个按钮。 每个按钮触发"setstate ( )"的更新;
  • "无更新按钮"设置了"{updateui: false}"还有"更新按钮"集合集"{updateui: false}";
  • "shouldComponentUpdate ( )"方法检查"nextstate"中的"updateUI"属性并相应返回 true 或者 false。

将页面载入浏览器,我们可以看到这两个按钮,我们可以看到"updateid"被呈现为 0,与初始状态匹配。 让我们在开发工具中打开控制台选项卡,然后点击"无更新按钮"几次。

在实验中,我单击了"无更新按钮" 15次,"shouldComponentUpdate ( )"方法被称为 15时间。 但是"shouldComponentUpdate ( )"方法返回 false,没有其他生命周期方法被触发。 "updateid"在浏览器中保持 0.

如果现在单击"更新按钮",我们可以看到"updateid"在浏览器中被更新为 16. 在控制台中,我们可以看到所有更新相关的生命周期方法都被激发,因为"shouldComponentUpdate ( ) 返回了 true。

结束语
  • ui/dom的更新可以由"setstate ( )的方法触发;
  • 在"setstate ( )"调用时,调用"shouldComponentUpdate ( ) ;
    • 如果"shouldComponentUpdate ( ) 返回 false,则只更新数据状态,不更新任何 ui/dom ;
    • 如果"shouldComponentUpdate ( ) 返回 true,则数据状态和 ui/dom都将被更新。
  • 在"shouldComponentUpdate ( )"true,其他生命周期方法按以下顺序激发:
    • componentWillUpdate
    • 呈现
    • componentDidUpdate
  • 在开始更新DOM之前,"componentWillUpdate ( )"方法让我们有机会完成必要的清理工作;
  • 当"componentDidUpdate ( )"方法激发时,对DOM的更改就完全准备好对它的他Javascript代码进行处理了。

生命周期方法- 卸载进程

" 3。life-cycle-unmount。html"在un过程中的生命周期方法"componentWillUnmount ( ) 实验。


<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title>3.life-cycle-unmount.html</title>


<link rel="stylesheet" type="text/css" href="styles/app.css">



</head>


<body>


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


<div>


</div>


<div><a href="index.html">Go back</a></div>


</body>


<script type="text/javascript">


</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>



<script type="text/javascript">


var myclass = React.createClass({


 getInitialState: function() {


 var size = 20 * 1024 * 1024;


 var a = new Array(size);


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


 a[i] = i;


 }



 return {a: a}; 


 },


 unmountButtonClick: function() {


 var node = ReactDOM.findDOMNode(this);


 ReactDOM.unmountComponentAtNode(node.parentNode);


 },


 componentWillUnmount: function() {


 console.log('componentWillUnmount called');


 },


 render: function() { 


 var title = React.createElement('div', null, 'Unmount method example');



 var unmountButton = React.createElement('button',


 {onClick: this.unmountButtonClick}, 'Unmount from DOM button');



 var buttons = React.createElement('div', null, unmountButton);


 return React.createElement('div', null, title, buttons);


 }


});



window.onload = function() {


 var element = React.createElement(myclass, null);


 ReactDOM.render(element, document.getElementById('content'));


};



</script>



</html>



  • 在这里示例中,将向DOM中添加一个按钮。 如果我们点击按钮,组件将被从DOM装载;
  • 在"getInitialState ( ) 方法中,我人为地将 20M array 添加到初始状态。 如果我们不将来自DOM的响应组件装载到部分,那么我将使用这个大的内存块来演示是否在浏览器上使用垃圾。

如果单击"从DOM按钮卸载",组件将从DOM中删除。 我们可以看到,在从控制台中的DOM清除组件之前调用"componentWillUnmount ( )"方法。

结束语
  • 可以通过"reactdom。unmountcomponentatnode ( )"方法将装入的响应组件从DOM装载;
  • 一旦联合国安装过程开始,它就不能停止;
  • 在从DOM中删除该组件之前,"componentWillUnmount ( )"激发给我们一些机会来完成某些工作。

浏览器内存随React而清理

在研究 Angular 内存泄漏问题时,我学习了通过来检查浏览器内存的技术( 这是一个链接)。 在 Chrome 浏览器中,我们可以使用"shift + ESC"启动 Chrome 任务管理器。

加载" 3。life-cycle-unmount。html"分页后,我们可以看到处理这里页面的进程所使用的内存。 如果我们点击"从DOM按钮卸载"按钮来安装React组件,我们应该希望发生垃圾 Collection 来收集未使用的内存。

在组件未安装后,垃圾 Collection 可能不会立即发生。 可能需要一段时间。 如果不发生,我们可以转到开发工具中的"时间线"选项卡,通过单击"回收站"icon 触发垃圾 Collection。

在这个小测试中,如果我们觉得自己的代码不会丢失对组件及它的状态的引用,应该自由的。 至少它是 true 中使用的React版本。

Points of Interest

历史记录

修订- 5/12/2016


react  method  方法  
相关文章