React 是什么？
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
安装React
npx create-react-app my-app
运行React
npm run start
条件渲染
{isLog?"欢迎回来":"请登录"}
//&&左右两边都为真，结果才为真
{isLog&&"已登录"}
列表渲染
1.jsx 中的数组里面可以包含html Dom 结构，在jsx数组会自动展开
let list = [react,vue,angular]
list.map((item,index)=>{return(<div key="index">{item}</div>)})
[<div key="0">react</div>,<div key="1">vue</div>,<div key="2">angular</div>
表单绑定
<input value={this.state.msg}>
//双向
<input value={this.state.msg} onChange={this.changeMsg.bind(this)}>
事件响应
1.需要驼峰写法
onClick onFocus
2.执行
onClick={this.showMsg} //特别注意方法不要（）
3.改变事件响应函数的this指向（默认响应函数的this指的是当前dom元素）
修改this指向
onClick={this.addNum.bind(this)}
onClick = {()=>{this.addNum( )}}
state使用
定义
constructor(props){
super(props);
this.state = {name:"yaya"}
}
使用 {this.state.name}
修改 this.setState({"yaya":"hsy"}) //在更新state 也会同时更新dom
props使用
定义
父传子的数据
定义过程
1.在调用组件得时候传入
<Child age="20">
2.Child 组件得获取
{this.props.age}
特点
只读，不可变
默认
Child.defaultProps={age:18} //默认props设置
子元素给父元素传递参数
核心思想 传入的props是一个函数
<child myfun ={this.changelt.bind(this)}>
//在child内部
<button onClick={this.props.myfun('数据')}>
