React入門筆記（一）

環境配置

新版的React要求統一使用babel做爲JSX的編譯工具，所以咱們選擇babel，新建.babelrc文件，內容以下

{
    "presets":["es2015","react"]       //設置候選版本爲es6和react-jsx
}

這裏由於要用到ES6，因此把在babel候選版本里加入對ES6的支持

React組件

React裏引入的組件這個概念：
React裏的組件就像Android，ios裏的控件同樣，能方便快捷的做爲界面的一部分實現必定功能，咱們能夠把數據傳入：

var Hello = React.createClass({
    render: function () {
        return (
            <div>
                <h1>
                    {this.props.name}
                </h1>
            </div>
        );
    }
});

這裏咱們用React.createClass方法建立了一個React組件，render函數的返回值爲要渲染的內容。

一樣的組件咱們用ES6實現以下：

class Hello extends React.Component {

    render() {
        return (
            <div>
                <h1>
                    {this.props.name}
                </h1>
            </div>
        );
    }

}

這裏用到了ES6的class、extends等關鍵詞

接下來咱們用ReactDOM.render方法將其render到頁面上

let names = [
    'flypie ',
    'flyboy '
];

ReactDOM.render(
    <Hello name={names}/>,
    document.body
);

組件的生命週期

組件的生命週期分紅三個狀態：

Mounting：已插入真實 DOM
Updating：正在被從新渲染
Unmounting：已移出真實 DOM

React 爲每一個狀態都提供了兩種處理函數，will 函數在進入狀態以前調用，did 函數在進入狀態以後調用，三種狀態共計五種處理函數。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

下圖是官方文檔裏對各類函數執行位置的表述

這裏咱們作個實驗：

let Hello = React.createClass({

    getInitialState: function () {
        console.log('getInitialState');
        return {};
    },

    getDefaultProps: function () {
        console.log('getDefaultProps');
        return {};
    },

    componentWillMount: function () {
        console.log('componentWillMount');
    },

    componentDidMount: function () {
        console.log('componentDidMount');
    },

    componentWillReceiveProps: function () {
        console.log('componentWillReceiveProps');
    },

    shouldComponentUpdate: function () {
        console.log('shouldComponentUpdate');
        return true;
    },

    componentWillUpdate:function(){
        console.log('componentWillUpdate');
    },

    componentDidUpdate:function(){
        console.log('componentDidUpdate');
    },

    componentWillUnmount:function(){
        console.log('componentWillUnmount');
    },

    render: function () {
        return (
            <div>
                <h1>
                    {this.props.name}
                </h1>
            </div>
        );
    }
});

let names = [
    'flypie ',
    'flyboy '
];

ReactDOM.render(
    <Hello name={names}/>,
    document.body
);

運行程序，控制檯輸出結果以下：