屬性與狀態以及組件的生命週期(初始化階段)

時間 2019-12-08

標籤屬性狀態以及組件生命週期初始化階段简体版

原文原文鏈接

1.屬性和狀態

1.屬性props

含義：props = properties
屬性：一個事物的性質與關係，屬性每每是與生俱來的，沒法本身改變的
屬性的兩種用法：
a). "?"中的內容能夠是：字符串，對象{}，數組{[1,2,3]}，變量{var}
b). <Demo {...props} />
var props = { one : "123", two : "456" }
getDefaultProps : 設置默認屬性第一個調用

2.狀態state

狀態：事務所處的情況
情況是由食物自行處理，不斷變化的。父組件與子組件都沒法改變他的狀態。
狀態的用法：
a). getInitialState : 初始化狀態
b). setState : 更新狀態

屬性和狀態類似點：
a). 都是純js對象，使用{}建立的對象
b). 都會觸發render更新
c). 都具備肯定性，給定相同的屬性或者相同的狀態，結果是相同的html

屬性和狀態的區分：組件在運行時須要修改的數據就是狀態，全部的數據均可以變成狀態react

如下是例子數組

//demo1 :屬性的第一種寫法
<div id="demo1"></div>
<script type="text/babel">
    var oDemo = document.getElementById("demo1"),
        Demo = React.createClass({
        render(){
            return <div>{this.props.title}</div>
        } 
    });
    ReactDOM.render(<Demo title={"Demo"}/>, oDemo);
    //this.props.title表示的就是title={"Demo"}，所以在瀏覽器上會顯示出Demo這個單詞
</script>
複製代碼

//demo2 :屬性的第二種寫法
<div id="demo2"></div>
<script type="text/babel">
    var oDemo = document.getElementById("demo2"),
        Demo = React.createClass({
            render(){
                return (<div>
                    <div>{this.props.title}</div>
                    <a {...this.props}>{this.props.title}</a>
                </div>)
    {/*
        ...this.props
        props提供的一個語法糖，能夠將父組件中的所有屬性複製給子組件，
        若是是這個標籤自己擁有的這個屬性，則所有複製給子組件；反之沒有效果
    */}
                );
            }
        });
    var props = {
        title : "百度",
        href : "http://www.baidu.com"
    };
    ReactDOM.render(<Demo {...props}/>, oDemo);
</script>
複製代碼

3.this.props.children屬性

children沒有與組件的屬性一一對應，表示組件的全部子節點，通常用於列表。瀏覽器

例子bash

<div id="demo3"></div>
<script type="text/babel">
    var oDemo = document.getElementById("demo3"),
        List = React.createClass({
            render(){
                return (<ul>
                    {   /*
                            列表項的數量以及內容不肯定，在建立模板的時候菜肯定。
                            利用this.props.children從父組件獲取須要的內容。
                            利用React.Children.map方法進行children的遍歷。
                            用遍歷的時候須要加{}。
                            map函數會返回值，存在child中。
                        */
                        React.Children.map(this.props.children, function(child){
                            return <li>{child}</li>;
                        });   
                    }
                </ul>);
            }   
        });
    ReactDOM.render(<List>
                        <h1>百度</h1>
                        <a href="http://www.baidu.com">http://www.baidu.com</a>
                    </List>, oDemo);
</script>
複製代碼

demo3運行後html會變成以下：babel

<div id="demo3">
    <ul data-reactroot="">
        <li>
            <h1>百度</h1>
        </li>
        <li>
            <a href="http://www.baidu.com">http://www.baidu.com</a>
        </li>
    </ul>
</div>
複製代碼

狀態state的例子函數

//demo4 state
<div id="demo4"></div>
<script type="text/babel">
    var oDemo = document.getElementById("demo4"),
        Demo = React.createClass({
            //設置初始的狀態 getInitialState
            getInitialState(){
                return {
                    // 這裏的值能夠是一個boolean，string，function
                    onOff : true;
                };
            },
            handleClick(){
                // 經過點擊事件來修改狀態值，原來的狀態值須要使用this.state獲取
                this.setState({
                    //取反
                    onOff: !this.state.onOff
                });
            },
            render(){
                return (<div onClick={this.handleClick}>{this.state.onOff ? "data1":"data2"}</div>);
                //當點擊時，按照onOff屬性的改變而改變值
            }
        )};
    ReactDOM.render(<Demo />, oDemo);
</script>
複製代碼

小案例：本地時間的顯示ui

//demo5
<div id="demo5"></div>
<script type="text/babel">
    var oDemo = document.getElementById("demo5"),
        Demo = React.createClass({
            //設置默認的屬性
            getDefauleProps(){
                return{
                    name : "如今的時間是："
                };
            },
            //設置初始的狀態 getInitialState
            getInitialState(){
                return {
                    time: new Date().toLocaleTimeString(); 
                };
            },
            change(){
                // 在定時器中使用this.setState的時候須要將這個this變保存起來
                var that = this;
                setInterval(function(){
                    that.setState({
                        time: new Date().toLocaleTimeString(); 
                    });
                },1000);
            },
            render(){
                return (<div onClick={this.change()}>{this.props.name}{this.state.time}</div>);
            }
        )};
    ReactDOM.render(<Demo name="北京時間: "/>, oDemo);
</script>
複製代碼

2.組件的生命週期(初始化階段)

生命週期：組件的本質是狀態機，輸入肯定，輸出必定肯定。一個state對應一個render，狀態轉換的時候會觸發不一樣的函數。this

生命週期的三個階段：spa

初始化階段 : 設置初始的屬性與狀態
a). getDefaultProps: 設置初始的屬性，只在第一次調用，實例之間共享引用。
b). getInitialState: 設置初始的狀態。
c). componentWillMount: 組件將要加載，render以前最後一次修改狀態的機會。
d). render: 只能訪問this.props和this.state，只有一個頂層標籤（組件），不容許修改狀態和DOM輸出。
e). componentDidMount: 成功render並渲染完成真實DOM以後出發，能夠修改DOM，要操做DOM也必須在這個階段完成。

例子

//demo1
<div id="demo6"></div>
<script type="text/babel">
    var oDemo = document.getElementById("demo6"),
        Demo = React.createClass({
            //第一步：設置初始的屬性，只執行一次
            getDefaultProps(){
                return {
                    name1: "一個盒子",
                    title: "box"
                };
            },
            
            //第二步：設置初始的狀態(能夠將屬性改爲狀態)
            getInitialState(){
                return {
                    name2: this.props.name1
                };
            },
            
            //第三步：組件將要加載的時候，最後一次能夠修改狀態的機會
            componentWillMount(){
                this.setState({
                    name2: "最後一次修改機會"
                });
                //第三步中是沒法獲取到節點的
            },
            
            //第四步：render渲染
            render(){
                var styles = {
                    position:'absolute',
                    width: '100px',
                    height: '100px',
                    color: 'red',
                    background: 'lime'
                };
                return <div ref="box" style={styles}>{this.props.title}{this.state.name2}</div>;
            },
            
            //第五步：組件完成加載，只有在這一個階段，才能夠操做DOM節點
            componentDidMount(){
                var box = this.refs.box, //父級引用子級
                    timer = null,
                    n = 0;
                    box.onclick = function(){
                        var that = this;
                        timer = setInterval(function(){
                            n++;
                            that.style.left = n + "px";
                        },100);
                    };
                
            }
        });
    ReactDOM.render(<Demo />, oDemo);
</script>
複製代碼