双数据绑定

render
*参数1:需要渲染的DOM节点 或者组件 如何渲染的是标签则只需要写标签名称即可 如果是组件则需要按照标签的形式输写<App/>
* 参数2:需要将渲染的这个节点挂载在哪里
* 参数3回调

jsx语法中class需要改写成className for需要改写成htmlFor

如何创建一个组件
1.通过class来创建一个组件
语法：class 组件名称 extends React.Component{}

React.Component: 是所有组件的父类

render: 是一个生命周期 用来渲染JSX DOM节点(虚拟DOM的渲染)
语法：
render(){
return <div></div>
}
注意:必须要return出去一个节点 （只能返回一个节点 类似与vue template里面只能有一个子元素）
如果需要返回多个元素的时候

语法：
render(){
return (
<div>
...........
</div>
)
}

constructor:
作用：
生命周期

存放当前组件所需要的一些状态，状态存放在this.state中。
constructor这个函数书写完毕后必须要加super 否则this的指向会发生问题

this.setState:

1.react中如何修改this.state中的数据
2.this.setState是同步的还是异步的
3.this.setState的第二个参数的作用
4.this.setState为什么是异步的

语法
this.setState({
key:val
},()=>{})
key:需要改变状态的属性
val:需要改变成的值

第二种

this.setState(()=>({
message:val
}),()=>{})          第一个参数返回一个对象

this.setState的第二个参数的作用：
1、查看数据是否修改成功
2、获取数据更新后的DOM结构

只要this.setState被调用那么render函数就会被执行

强制更新数据
this.forceUpdate();

React中value 与 defaultValue区别
1、value属于html的属性 value会使输入框变成一个受控组件
2、defaultValue属于DOM的属性 defaultValue会使输入框变成一个非受控组件

性能优化
事件书写的方式

1、this.函数名称.bind(this)
2.this.函数名称
3.onClick = {()=>{ }}