内容：props、状态机、事件、
组件通信、模拟表单双向绑定
一、组件的props
1.类组件
定义：
import React from 'react'
class Home extends React.Component{
constructor(){
super();
console.log("构造函数先执行")
}
//渲染页面的钩子函数
render(){
console.log("渲染函数执行")
return(
<div>
<h2>这是一个es6类定义的组件</h2>
</div>
)
}
}
export default Home;
拥有构造函数等生命周期函数（业务组件/状态组件）
类组件中可以定义很多个函数、初始数据等，通过this.props接收父组件传递的数据
2.函数组件
定义：
import React from 'react'
var Movie = (props)=>{
return(
<div>
<h3>这是一个函数式组件</h3>
</div>
)
}
export default Movie;
它没有生命周期等函数（无状态组件/木偶组件）、没有状态机。
函数组件要接收父组件传递的数据需要通过函数的形参来接收。
二、状态机
state是react中内置的状态管理器，设置一些初始数据（数据格式是对象）。
setState，react中不建议我们直接通过state.变量名来进行赋值，即使赋值成功，但是页面上的数据不会发生变化（没有重新调用render函数），推荐我们使用setState方法来改变状态机中的数据。
setState会把新的数据合并到原来的数据中，重新调用render方法。
三、事件
1.事件绑定
(1)es5方式进行绑定
<button onClick={ this.自定义函数名 }
注意：this.自定义函数名()这种方式的写法，指定的函数会自动执行
保持this指向：
<button onClick={ this.自定义函数名.bind(this) }
(2)es6方式进行绑定
<button onClick={ ()=>this.addNum() }>es6-保持this指向</button><br/>
<button onContextMenu={ (e)=>this.handle1(e) }>es6-保持this指向-事件</button>
2.传递参数
(1)es5传递参数
①事件
不需要显示的在函数中进行传递，在定义函数的形参中直接使用即可
②额外参数
如果要在函数中继续获取事件和其他参数，那么在使用bind时应该加上this，然后再传递其他参数。
<button onContextMenu={ this.handle1.bind() }>es5--事件--无参数</button>
<button onClick={ this.handle2.bind(this,'haha') }>es5--事件--有参数</button>
es5传递参数的方式，在定义函数时，形参中的事件参数应该放到所有普通参数的最后。
(2)es6传递参数
<button onClick={ (e)=>this.handle2('hehe',e) }>es6-保持this指向-事件-有参数</button>
es6要获取事件和其他额外参数时，实参传递和形参接收的顺序是一致的。
四、组件通信
1.父子组件
在父组件上使用子组件时，通过自定义属性名=属性值进行数据的传递
在子组件中，如果是类组件通过this.props.自定义属性名来接收数据
如果是函数组件通过形参props.自定义属性名来接收数据
父组件：
import React,{ Component } from 'react'
//引入子组件
import Child from './Child'
export default class Parent extends Component{
render(){
return(
<div>
<h1>这是一个父组件</h1>
<Child gift="宝马"></Child>
</div>
)
}
}
子组件：
import React from 'react'
var Child = (props)=>{
return(
<div>
<h2>这是一个子组件，这是父组件给的礼物:{ props.gift }</h2>
</div>
)
}
export default Child;
2.子父组件
在父组件使用子组件时，除了可以传递普通数据，还可以传递事件。
父组件：
state = {
msg:''
}
setMsg(e){
console.log('此事件被子组件执行了',e)
this.setState({
msg:e
})
}
render(){
return(
<div>
<h1>这是一个父组件</h1>
<Child gift="宝马" toParent={ (e)=>this.setMsg(e) }></Child>
<hr/>
<h1>这是子组件发送过来的数据：{ this.state.msg }</h1>
</div>
)
}
子组件：
render(){
return(
<div>
<h2>这是一个子组件，这是父组件给的礼物:{ this.props.gift }</h2>
<button onClick={ ()=>this.props.toParent('口罩100个') }>发送数据</button>
</div>
)
}
3.DOM节点操作
ref
(1)字符串
可以给子组件设置一个ref属性，然后可以通过this.refs.属性名来获取/设置子组件中的数据。
<Song ref="mySong"></Song>
可以通过this.refs.mySong来获取到组件。
(2)回调函数
可以给子组件设置一个ref属性，它的属性值不是字符串，而是一个函数（自动执行）。可以把子组件当成参数进行传递，然后就可以对组件中的数据进行获取或者修改。
<Song ref={ (el)=>this.getChild2(el) }></Song>
回调函数的写法不会在this.refs存在子组件。
不推荐直接使用ref，只有万不得已才去使用。
五、模拟表单数据双向绑定
六、初始化项目失败
[图片上传失败...(image-f0df1e-1582630015203)]
解决办法：
在命令行中执行命令：npm cache clean --force 清除缓存
然后再重新执行初始化操作
七、作业
用react实现用户注册、登录界面，点击注册或者登录按钮时获取到用户输入的内容
表格页面
（可以使用bootstrap，样式要好看）
