React 生命週期介紹

時間 2019-11-09

標籤 react 生命週期介紹欄目 React 简体版

原文原文鏈接

[組件生命週期]css

1、理論html

　　組件本質上是狀態機，輸入肯定，輸出必定肯定react

　　生命週期的三個階段，三者時間是不固定的，只是在邏輯上的分類：函數

2、初始化階段：ui

　　getDefaultProps:獲取實例的默認屬性(即便沒有生成實例，組件的第一個實例被初始化CreateClass的時候調用，只調用一次,)this

　　getInitialState:獲取每一個實例的初始化狀態（每一個實例本身維護）es5

　　componentWillMount：組件即將被裝載、渲染到頁面上（render以前最好一次修改狀態的機會）spa

　　render:組件在這裏生成虛擬的DOM節點（只能訪問this.props和this.state；只有一個頂層組件，也就是說render返回值值職能是一個組件；不容許修改狀態和DOM輸出）code

　　componentDidMount:組件真正在被裝載以後，能夠修改DOMcomponent

3、運行中狀態：

　　componentWillReceiveProps:組件將要接收到屬性的時候調用（趕在父組件修改真正發生以前,能夠修改屬性和狀態）

　　shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（能夠返回false，接收數據後不更新，阻止render調用，後面的函數不會被繼續執行了）

　　componentWillUpdate:不能修改屬性和狀態

　　render:只能訪問this.props和this.state；只有一個頂層組件，也就是說render返回值只能是一個組件；不容許修改狀態和DOM輸出

　　componentDidUpdate:能夠修改DOM

4、銷燬階段：

　　componentWillUnmount:開發者須要來銷燬（組件真正刪除以前調用，好比計時器和事件監聽器）

5、demo查看：

　　5.1 簡單查看組件的初始化階段的各個方法

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5     <title>daomul's example</title>
 6     <link rel="stylesheet" href="../shared/css/base.css" />
 7   </head>
 8   <body>
 9     <h1>Text demo</h1>
10     <div id="container">
11 
12     </div>
13 
14     <script src="../shared/thirdparty/es5-shim.min.js"></script>
15     <script src="../shared/thirdparty/es5-sham.min.js"></script>
16     <script src="../shared/thirdparty/console-polyfill.js"></script>
17     <script src="../../build/react.js"></script>
18     <script src="../../build/JSXTransformer.js"></script>
19     <script type="text/jsx">
20 
21     var style = {
22       color : "red",
23       border : "1px #000 solid",
24     };
25 
26     var TextClass = React.createClass({
27         getDefaultProps:function(){
28             console.log("getDefaultProps,1");
29         },
30         getInitialState:function(){
31             console.log("getInitialState,2");
32             return null;
33         },
34         componentWillMount:function(){
35             console.log("componmentWillMount,3");
36         },
37         render:function(){
38           console.log("render,4");
39           return <p ref = "childp">Hello{(function (obj){
40                   if (obj.props.name)
41                     return obj.props.name
42                   else
43                     return "World"
44                 })(this)} </p>;
45         },
46         componentDidMount:function(){
47             console.log("componmentDidMount,5");
48         },
49     });
50 
51     React.render(<div style = {style}> <TextClass></TextClass> </div>,document.body);
52 
53     </script>
54   </body>
55 </html>

　　5.2 運行階段的函數

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5     <title>daomul's example</title>
 6     <link rel="stylesheet" href="../shared/css/base.css" />
 7   </head>
 8   <body>
 9     <h1>Text demo</h1>
10     <div id="container">
11 
12     </div>
13 
14     <script src="../shared/thirdparty/es5-shim.min.js"></script>
15     <script src="../shared/thirdparty/es5-sham.min.js"></script>
16     <script src="../shared/thirdparty/console-polyfill.js"></script>
17     <script src="../../build/react.js"></script>
18     <script src="../../build/JSXTransformer.js"></script>
19     <script type="text/jsx">
20 
21     var style = {
22       color : "red",
23       border : "1px #000 solid",
24     };
25 
26     var TextClass = React.createClass({
27         componentWillReceiveProps:function(newProps){
28           console.log("componentWillReciveProps,1");
29           console.log(newProps);
30         },
31         shouldComponentUpdate:function(){
32           console.log("shouldComponentUdate,2");return true;
33         },
34         componentWillUpdate:function(){
35           console.log("componentWillUpdate,3");
36         },
37         render:function(){
38           console.log("render,4");
39           return <p>hello:{this.props.name ? this.props.name : "world!"}</p>;
40         },
41         componentDidUpdate:function(){
42           console.log("componentDidUpadate,5");
43         },
44     });
45     var TextSourceClass = React.createClass({
46       getInitialState:function(){
47         return {name :''};
48       },
49       handleChange:function(event){
50         this.setState({name : event.target.value});
51       },
52       render:function(){
53         return <div>
54           <TextClass name = {this.state.name}></TextClass>
55           <br/><input type="text"onChange = {this.handleChange}/>
56         </div>;
57       },
58     });
59 
60     React.render(<div style = {style}> <TextSourceClass></TextSourceClass> </div>,document.body);
61 
62     </script>
63   </body>
64 </html>

　　5.3 銷燬階段

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5     <title>daomul's example</title>
 6     <link rel="stylesheet" href="../shared/css/base.css" />
 7   </head>
 8   <body>
 9     <h1>Text demo</h1>
10     <div id="container">
11 
12     </div>
13 
14     <script src="../shared/thirdparty/es5-shim.min.js"></script>
15     <script src="../shared/thirdparty/es5-sham.min.js"></script>
16     <script src="../shared/thirdparty/console-polyfill.js"></script>
17     <script src="../../build/react.js"></script>
18     <script src="../../build/JSXTransformer.js"></script>
19     <script type="text/jsx">
20 
21     var style = {
22       color : "red",
23       border : "1px #000 solid",
24     };
25 
26     var TextClass = React.createClass({
27 
28         render:function(){
29           console.log("render,4");
30           return <p>hello:{this.props.name ? this.props.name : "world!"}</p>;
31         },
32         componentDidUpdate:function(){
33           console.log("componentDidUpadate,5");
34         },
35     });
36     var TextSourceClass = React.createClass({
37       getInitialState:function(){
38         return {name :''};
39       },
40       handleChange:function(event){
41         this.setState({name : event.target.value});
42       },
43       render:function(){
44         if(this.state.name == "1"){
45           return <div>123</div>;
46         }
47         return <div>
48             <TextClass name = {this.state.name}></TextClass>
49             <br/><input type="text"onChange = {this.handleChange}/>
50           </div>;
51       },
52     });
53 
54     React.render(<div style = {style}> <TextSourceClass></TextSourceClass> </div>,document.body);
55 
56     </script>
57   </body>
58 </html>

1. React生命週期介紹
2. React-生命週期的相關介紹
3. React常用生命週期介紹
4. react 生命週期函數介紹
5. React 生命週期 React 生命週期
6. vue生命週期介紹
7. Maven生命週期介紹
8. VUE生命週期介紹
9. React16 新生命週期和 Hooks 介紹
10. React-生命週期
更多相關文章...
• Rust 生命週期 - RUST 教程
• SVN 生命週期 - SVN 教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• Docker 清理命令

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。