React基礎語法 state和props初始化方式

阿新 • • 發佈：2019-01-11

React基礎語法

1.什麼是React
2.React元件
3 State和Props
4 React元件生命週期

1、React

React 是一個用於構建使用者介面的 JAVASCRIPT 庫。
React主要用於構建UI，很多人認為 React 是 MVC 中的 V（檢視）。
React 起源於 Facebook 的內部專案，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人已開始關注和使用它。

React使用JSX來代替常規的JavaScript。JSX是一個看起來很像XML的JavaScript語法擴充套件。
注意

JSX 中HTML標籤用小寫字母，React元件大寫字母開頭
屬性使用小駝峰命名，第一個單詞首字母小寫其他大寫字母開頭
注意HTML標籤的屬性onclick和onchange等，在JSX中，必須寫出onClick，寫出小駝峰命名才有效。
為了支援JSX，需要在WebStrom中設定javascript為JSX Harmony

React 特性：
1.宣告式設計 −React採用聲明範式，可以輕鬆描述應用。
2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的互動。
3.靈活 −React可以與已知的庫或框架很好地配合。
4.JSX − JSX 是 JavaScript 語法的擴充套件。React 開發不一定使用 JSX ，但我們建議使用它。
5.元件 − 通過 React 構建元件，使得程式碼更加容易得到複用，能夠很好的應用在大專案的開發中。
6.單向響應的資料流 − React 實現了單向響應的資料流，從而減少了重複程式碼，這也是它為什麼比傳統資料繫結更簡單。

2、React元件兩種實現方式與不同之處

因為React是一個用於構建使用者介面的 JAVASCRIPT 庫，所以首先引用三個js檔案，也可以下載下來再本地引用。

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="babel.min.js"></script>
    <script src="01.js" type="text/babel"></script>
</head>
<body>
<div id="content"></div>

</body>
</html>

 react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
babel.min.js - Babel 可以將 ES6 程式碼轉為 ES5 程式碼，這樣我們就能在目前不支援 ES6 瀏覽器上執
 行 React 程式碼。Babel 內嵌了對 JSX 的支援。通過將 Babel 和 babel-sublime 包（package）
一同使用可以讓原始碼的語法渲染上升到一個全新的水平。

2.1 方式一：

class MyTextView extends React.Component{


    render(){
        return <p>hello react</p>;
    }
}
//元件渲染到DOM中  
ReactDOM.render(<MyTextView></MyTextView>,document.body);

必須繼承React.Componet
render()渲染函式是必須的
>必選的方法，建立虛擬DOM，該方法具有特殊的規則：
1、只能通過this.props和this.state訪問資料
2、可以返回null、false或任何React元件
3、不能改變元件的狀態
4、不能修改DOM的輸出

2.2方式二：

var MyTexTiew2  = React.createClass(
    {
        render:function () {
            return  <p>hi react</p>;
        }
    }
    );
ReactDOM.render(<MyTexTiew2></MyTexTiew2>,document.body);

使用createClass方法，傳入物件，結構賦值render等方法和屬性
使用這個方式才會執行元件的宣告周期函式，才可以訪問元件的state和props屬性。

State和Props

State主要用於更新介面，元件的State屬性在生命週期函式 getInitialState中初始化，當呼叫元件的this.setState改變state的時候，元件會重新渲染重新整理。
Props主要用於元件之間傳遞資料，也就是標籤的屬性這裡的pname屬性就可以在MyText中通過this.props.pname得到

var MyTextView = React.createClass(
    {
     render:function(){
         return <p>content:{this.props.contentText}</p>;
     }
    }
);
var MyViewGroup = React.createClass({
    getInitialState:function () {
    //生命週期函式，返回一個物件
      return {text:""};
    },
    handleChange:function (e) {
    //改變元件的state屬性
        this.setState({text:e.target.value});
    },
    render:function () {

        return <div>
            <MyTextView contentText ={this.state.text}/>
            //注意屬性onChange大寫
            <input type="text" onChange={this.handleChange} ></input>
        </div>;
    }
});
ReactDOM.render(<MyViewGroup/>,document.getElementById("content"));

React元件生命週期

例項化

首次例項化
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount

例項化完成後的更新
getInitialState
componentWillMount
render
componentDidMount

存在期
元件已存在時的狀態改變
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

銷燬&清理期
componentWillUnmount

生命週期共提供了10個不同的API。

1.getDefaultProps
作用於元件類，只調用一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。

2.getInitialState
作用於元件的例項，在例項建立時呼叫一次，用於初始化每個例項的state，此時可以訪問this.props。

3.componentWillMount
在完成首次渲染之前呼叫，此時仍可以修改元件的state。

4.render
必選的方法，建立虛擬DOM，該方法具有特殊的規則：
只能通過this.props和this.state訪問資料
可以返回null、false或任何React元件
只能出現一個頂級元件（不能返回陣列）
不能改變元件的狀態
不能修改DOM的輸出

5.componentDidMount
真實的DOM被渲染出來後呼叫，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。
在服務端中，該方法不會被呼叫。

6.componentWillReceiveProps
元件接收到新的props時呼叫，並將其作為引數nextProps使用，此時可以更改元件props及state。
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}

7.shouldComponentUpdate
元件是否應當渲染新的props或state，返回false表示跳過後續的生命週期方法，通常不需要使用以避免出現bug。在出現應用的瓶頸時，可通過該方法進行適當的優化。
在首次渲染期間或者呼叫了forceUpdate方法後，該方法不會被呼叫

8.componentWillUpdate
接收到新的props或者state後，進行渲染之前呼叫，此時不允許更新props或state。

9.componentDidUpdate
完成渲染新的props或者state後呼叫，此時可以訪問到新的DOM元素。

10.componentWillUnmount
元件被移除之前被呼叫，可以用於做一些清理工作，在componentDidMount方法中新增的所有任務都需要在該方法中撤銷，比如建立的定時器或新增的事件監聽器。

通過整合extends React.Component 給元件初始化不會執行getDefaultProps、getInitialState
只有通過以下方式給元件初始化state和props

1、state的初始化，通過建構函式

  //在建構函式中對狀態賦初始值
    constructor(props){
        super(props);//第一步，這是必須的
        //不能呼叫state
        this.state = {//第二步，賦初始值
            time:0,
            on:false,
            log:[] //陣列
        };
    }

2、props的初始化

class Button extends React.Component{
//靜態屬性，給屬性賦預設值
static defaultProps = {
    onClick : null,
    className : '',
    text : '預設'
};

render(){
    return <button className={`Button ${this.props.className}`} onClick={this.props.onClick}>{this.props.text}</button>;
}

}

React基礎語法 state和props初始化方式