React事件、函数式声明组件、有状态组件

事件

• 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>