初识React

React起源于Facebook的内部项目，该公司积极尝试引入HTML5技术用来架设Instagram网站，开发中发现HTML5的性能下降明显，达不到预期的效果。他们就自己开发了React框架。

React中文官方地址：https://reactjs.bootcss.com/docs/getting-started.html

1、JSX即Javascript XML，它使用XML标记来创建虚拟DOM和声明组件。

const element = (

    <div>

        <h1>Hello!</h1>

        <h2>Good to see you here.</h2>

    </div>

);

2、数组的输出方法   map((参数名) =>{})

function NumberList(props) {

    const numbers = props.numbers;

    return (

        <ul>{numbers.map((number) =>

            <ListItem key={number.toString()} value={number} />

        )}</ul>

    );

}

3、props和state

props：组件的参数、只可以读取，不可修改

state：初始化的constructor方法里可以直接给state赋初始值

                eg：this.state={date:newDate()};

            只能通过setState()方法来修改state；state的修改是异步的；分别调用 setState() 来单独地更新它们：

4、事件的处理

        // 为了在回调中使用 `this`，这个绑定是必不可少的

        this.handleClick=this.handleClick.bind(this);

5、生命周期

    实例化阶段

        componentWillMount() 组件将要挂载到页面

        render()     组件挂载中

        componentDidMount()  组件挂载完成

    组件更新：

        componentWillUpdate(object nextProps, object nextState)

        componentDidUpdate(object prevProps, object prevState)

    组件销毁     componentWillUnmount()

6、组件传值

    父组件向子组件传值直接用props

    子组件向父组件可以通过方法来传值，示例如下

父组件：

<TemperatureInput scale="c" temperature={celsius} onTemperatureChange={this.handleCelsiusChange} />

handleCelsiusChange(temperature) {       

    console.log('handleCelsiusChange' + temperature);       

    this.setState({ scale: 'c', temperature }); 

} 

子组件

handleChange(event) {        

    console.log('etv' + event.target.value);        

    this.props.onTemperatureChange(event.target.value)    

}    

render() {        

    const temperature = this.props.temperature;        

    const scale = this.props.scale;        

    return (            

        <fieldset>               

         <legend>Enter temperature in {scaleNames[scale]}:</legend>                

        <input value={temperature} onChange={this.handleChange} />            

        </fieldset>       

     )    

}