狀態、屬性、元件API、元件的生命週期

當react的狀態改變時，自動執行this.render()方法更新元件
ES6寫React的時候，事件裡不會自動繫結this，需要自己繫結，或者直接在constructor裡寫方法

constructor(props) {
    super(props);
    this.state = {
        liked: false
    };
    this.handleClick = (e) => {
        this.setState({liked: !this.state.liked});
    };
}

狀態

import React from 'react';

class LikeButton extends React.Component {
    
 
// es6用constructor代替getInitialState
    constructor(props) {
        super(props);
        this.state = {
            liked: false
        }
    }
    handleClick (e) {
        this.setState({liked: !this.state.liked})
    }
    render () {
        let text = this.state.liked ? '喜歡': '不喜歡';

        return
 
 (
            <div>
                <p onClick={this.handleClick.bind(this)}>
                    你喜歡紅茶嗎？{text}
                </p>
            </div>
        )
    }
}

export default LikeButton;

props
HelloMessage.jsx

import React from 'react';

class HelloMessage extends React.Component {
    render () {
        
 
return (
            <div>
                Hello, {this.props.name}
            </div>
        )
    }
}

export default HelloMessage;

main.js

import React from 'react';
import ReactDOM from 'react-dom';

import HelloMessage from './component/HelloMessage';

const app = document.getElementById('app');

ReactDOM.render(<HelloMessage name="Runoob"/>, app);

props驗證
可以保證應用元件被正確使用
React.PropTypes提供很多驗證器(validator)來驗證傳入資料是否有效。當props傳入無效資料時，JavaScript控制檯會丟擲錯誤。

import React from 'react';

class HelloMessage extends React.Component {
    render () {
        return (
            <div>
                Hello, {this.props.name}
            </div>
        )
    }
}

// getDefaultProps要寫在外部
HelloMessage.defaultProps = {
    name: 'this is default name'
};

HelloMessage.propTypes = {
    name: React.PropTypes.string.isRequired
};

export default HelloMessage;

更多驗證器

React.createClass({
  propTypes: {
    // 可以宣告 prop 為指定的 JS 基本資料型別，預設情況，這些資料是可選的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 可以被渲染的物件 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,

    //  React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符宣告 prop 為類的例項。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 來限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 可以是多個物件型別中的一個
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定型別組成的陣列
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定型別的屬性構成的物件
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定 shape 引數的物件
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 任意型別加上 `isRequired` 來使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意型別
    requiredAny: React.PropTypes.any.isRequired,

    // 自定義驗證器。如果驗證失敗需要返回一個 Error 物件。不要直接使用 `console.warn` 或拋異常，因為這樣 `oneOfType` 會失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

React元件API
setState 設定狀態
replaceState 替換狀態
setProps 設定屬性
replaceProps 替換屬性
forceUpdate 強制更新
findDOMNode 獲取DOM節點,查詢真實DOM

React.findDOMNode()只在mounted元件中呼叫，如果在元件的render()方法中呼叫React.findDOMNode()就會丟擲異常。

React元件的生命週期
元件生命週期的三個狀態
Mounting: 已插入真實DOM
Updating: 正在被重新渲染
Unmounting: 已移除真實DOM

生命週期方法
componentWillMount 在渲染前呼叫，在客戶端也在服務端
componentDidMount 在第一次渲染後呼叫，只在客戶端。
之後元件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。
如果你想和其他JavaScript框架一起使用，可以在這個方法中呼叫setTimeout, setInterval或者傳送AJAX請求等操作(防止異部操作阻塞UI)。
componentWillReceiveProps 在初始化render時不會被呼叫，當元件接收到一個新的prop時被呼叫
shouldComponentUpdate 返回一個布林值。當確認不需要更新元件時使用。在元件接收到新的state或新的props時被呼叫。在初始化時或使用forceUpdate時不被呼叫
componentWillUpdate 初始化不會呼叫。元件接收到新的state或者props但還沒有render時被呼叫
componentDidUpdate 初始化不會呼叫。元件完成更新後立即呼叫。
componentWillUnmount 元件從DOM中移除的時候立刻被呼叫。

用state判斷是否已經插入真實DOM

componentWillMount() {
    this.mounted = false;
}
componentDidMount() {
    this.mounted = true;
}

需求：寫一個例項，在元件載入以後，通過componentDidMount設定一個定時器，改變元件的透明度並重新渲染
HelloMessage.jsx

import React from 'react';

class HelloMessage extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            opacity: 1.0
        };
    }
    componentDidMount () {
        this.timer = setInterval(() => {
            let opacity = this.state.opacity;
            opacity -= 0.05;
            if(opacity <= 0.1) {
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity
            });
        }, 100);
    }
    render () {
        let myStyle = {
            fontFamily: 'microsoft yahei',
            width: '100%',
            height: '100px',
            background: 'red',
            opacity: this.state.opacity
        };

        return (
            <div style={myStyle}>
                Hello, {this.props.name}
                <p>{this.state.opacity}</p>
            </div>
        )
    }
}

// getDefaultProps要寫在外部
HelloMessage.defaultProps = {
    name: 'this is default name'
};

HelloMessage.propTypes = {
    name: React.PropTypes.string.isRequired
};

export default HelloMessage;

另一個例項，體現react的生命週期

import React from 'react';

class Content extends React.Component {
    componentWillMount () {
        console.log('元件將被插入到真實DOM');
    }
    componentDidMount () {
        console.log('已經插入真實DOM');
    }
    componentWillReceiveProps (newProps) {
        console.log('元件將要接收屬性，新屬性是：');
        console.log(newProps);
    }
    shouldComponentUpdate (newProps, newState) {
        return true;
    }
    componentWillUpdate (nextProps, nextState) {
        console.log('元件將要更新，下一個屬性：' + nextProps + '，下一個狀態：' + nextState);
        console.log(nextProps);
    }
    componentDidUpdate (prevProps, prevState) {
        console.log('元件已更新，上一個屬性：' + prevProps + '，上一個狀態：' + prevState);
        console.log(prevProps);
    }
    componentWillUnmount () {
        console.log('已經移除真實DOM');
    }
    render () {
        return (
            <div>
                次數：{this.props.myNum}
            </div>
        )
    }
}

class Increment extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            data: 0
        };
    }
    setNewNumber () {
        this.setState({
            data: this.state.data + 1
        });
    }
    render () {
        return (
            <div>
                <button onClick={this.setNewNumber.bind(this)}>Increment</button>
                <Content myNum={this.state.data}/>
            </div>
        )
    }
}

export default Increment;

未完待續 ... ...