事件

• react的事件到底常不常用我也不清楚，因為js裡是能不用行內事件就堅決不用行內事件，但是既然html裡有事件這一屬性，那麼react實現其功能也是無可厚非的。

事件觸發呼叫函式

• 利用好插值符號，因為插值符號裡就是給你寫js的地方；

<script type="text/babel">
    function alertThis() {
        alert("Clicked once");
    }
    //事件屬性是用駝峰命名規則，記著就不用翻api了
    const element = (
        <div>
            <
 
input type="button" defaultValue="測試" onClick={alertThis}/>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('app')
    );
</script>

React給事件函式傳遞引數

• 通過bind：

<script type="text/babel">
    function alertThis(pa) {
        alert("Clicked once and get parms:"
 
+pa);
    }
    const element = (
        <div>
            <input type="button" defaultValue="測試" onClick={alertThis.bind(this,"引數")}/>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('app')
    );
</script>

• 通過函式呼叫函式：

因為插值符號裡可以執行js程式碼，而不僅限於呼叫函式，所以，實際應用中react的渲染帶動的事件和相關程式碼可以非常強大。

<script type="text/babel">
    function alertThis(pa,event) {
        alert("Clicked once and get parms:"+pa+"事件："+ event.type);
    }
    const element = (
        <div>
            <input type="button" defaultValue="測試" onClick={function(e) {
                alertThis("引數",e)                   
            }}/>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('app')
    );
</script>

React元件

• 宣告式元件：

es5函式宣告

function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
}

es6函式宣告

class Welcome extends React.Component {
	constructor(){
		super();//如果使用了建構函式，一定要顯示的呼叫父級的建構函式，不然會報錯。	
	}
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

• 使用元件：

const element = <Welcome name="Sara" />;
ReactDOM.render(
    element,
    document.getElementById('app')
);

元件最大的特點，高複用性！，你可以重複使用元件，非常的爽，非常的方便！

有狀態的元件

• state，用資料驅動檢視，後臺傳送的資料都是用狀態儲存，為的就是有狀態渲染。

<script type="text/babel">
    class Welcome extends React.Component {
        constructor(){
            super();//如果使用了建構函式，一定要顯示的呼叫父級的建構函式，不然會報錯。

            this.state ={
                name:"Bob"
            }
            setTimeout(() => {
                this.setState({
                    name:"Lucy"
                })
            }, 3000);
        }
        render() {
            return <h1>Hello, {this.state.name}</h1>;
        }
    }
    const element = <Welcome name="Sara" />;
    ReactDOM.render(
        element,
        document.getElementById('app')
    );
    //我這裡設定了一個定時器檢測狀態的改變
    setInterval(() => {
		console.log(document.getElementById('app').firstChild.innerHTML)
    }, 1000)
</script>