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>
)
}
