一、项目搭建

注意事项：node>=6 and npm>=5.2

1、npx create-react-app hello-world
2、cd hello-world
3、npm start

二、components与props：

注意事项：1、props属性为只读属性。2、修改双向绑定值，需引入state

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

1、方式一：

注意事项：修改Welcome实例内容，需要重复创建Welcome实例，如setInterval(function(){React.Component(<Welcome name={new Date()} />,RootDOM)},1000)

function Welcome(props){
    return (<div>展示数据：{props.name}</div>)
}

2、方式二：

class Welcome extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <div>
                <span>展示数据{this.props.name}</span>
                <span>展示数据2</span>
            </div>
        )
    }
}

ReactDOM.render(<Welcome name="wqqq" />, document.getElementById('root'));

三、state与lifecycle：

解析：1、state在constructor中注入对象。2、state中的值通过this.setState()进行修改。方式一【object】：this.setState({propertyName:propertyValue})；方式二【function(上次修改的state对象，props){}】。3、此处用React的lifecycle中有：componentDidMount、componentWillUnmount。

class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date(),
            secondForm: 0
        }
    }

    tick() {
        this.firstFormSetState();
        this.secondFormSetState();
    }
    
    *新值不依赖旧值或props，计算出新值*
    firstFormSetState() {
        this.setState({
            date: new Date()
        })
    }

    *new value reply on old value or props*
    secondFormSetState() {
        this.setState((lastState, props) => {
            return ({secondForm: lastState.secondForm + 1})
        })
    }

    componentDidMount() {
        this.timerID = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.timerID)
    }

    render() {
        return (
            <div>
                <div>this is {this.state.date.toLocaleTimeString()}.</div>
                <div>second form of setState{this.state.secondForm}</div>
            </div>
        )
    }
}

ReactDOM.render(<Clock/>, document.getElementById('root'));

四、事件绑定

总结：1、改变this指向方法：bind()方法【this.handleClick=this.handleClick.bind(this);，或者<button onClick={this.handleClick.bind(this,'21')}>测试</button>}】、或者定义函数时使用arrow function【handleClick=()=>{}】。2、阻止默认行为，必须使用event.preventDefault()

class EventConstants1 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            isToggleOn:true
        };
        // This binding is necessary to make `this` work in the callback
        // this.handleClick=this.handleClick.bind(this);
    }
    actionClick(e){
        e.preventDefault();
    }
    handleClick(...params){
        console.log(params);
        this.setState(()=>({
            isToggleOn:!this.state.isToggleOn
        }))
    }
    render(){
        return (
            <div>
                <a href="http://192.168.0.242:80" onClick={this.actionClick}>Click me to explain event.preventDefault()</a>
                <button onClick={this.handleClick.bind(this,'21')}>{this.state.isToggleOn?'YES':'NO'}</button>
            </div>
        )
    }
}