1. npm install create-react-app –g
2. create-react-app app-demo
3. 创建react reactdom 脚手架使用react （react.createElement（…） reactDom.render()）
4. JSX(jsx 跟html一样更直观友好) jsx不是标准ECMScript语法，是其扩展，经过babel处理后，转换为virtualDom
   通过@babel/preset-react 转换的
   注意：class –》className for—》htmlFor tabindex—》tabIndex
   小括号包裹jsx const dv=（

   111

   ）
   4.2 Jsx中嵌入js 加{}
   4.3 属性命名驼峰命名法
   4.4 条件渲染 if else 三元运算符
   4.5 列表渲染 map
   4.6 样式处理 style className
   React完全利用js语言自身的能力来编写ui，而不是造*增强html功能，vue创建了新的语法v-if v-show等
5. 组件学习 导入react 创建组件，导出
   5.1 react组件介绍 可复用 、独立 、可组合
   5.2react组件两种创建方式
   1.函数创建组件 function Hello(){return ( )} 函数名字作为组件标签名 必须有返回值
   2.类组件 es6中class创建组件
   Class Hello extends React.component{ render(){return hello class componet }}
   5.3 react事件处理
   On+事件名称={事件处理程序}，onClick={()=>{}}
   事件对象 e，react中的对象叫做：合成对象：兼容所有浏览器，无需兼容性问题
   5.4 有状态组件和无状态组件
   函数组件叫做无状态组件，类组件叫做有状态组件
   状态state即数据
   函数组件没有自己的状态，只负责数据展示
   类组件有自己的状态，负责更新ui，让页面动起来
   5.5 组件中的state 和setState
   简化语法初始化state（推荐）
   State={
   Count:10
   }
   State基本使用：组件内部私有数据，只能在组件内部使用
   State的值是对象，表示一个组件中可以多个数据
   setSate 1.修改状态的值，2.更新ui
   5.6 事件绑定this指向
   箭头函数
   Bind 在构造函数中
   5.6 表单处理
   受控组件 HTMl中的表单元素是可输入的，也就是有自己的可变状态，而react中可变状态通常保存在state中，并且只能通过setState方法来修改
   React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值。
   在state中添加一个状态，作为表单元素的value值，给表单元素绑定change事件，改变state的值
   优化：
6. 给表单元素添加name属性，名称与state相同
7. 根据表单元素类型获取对应值
8. 在change事件处理程序中通过【name】来修改对应的state
   非受控组件（dom方式）
   借助于ref，react.createFef()方法创建一个ref对象
   Constructor(){
   Super()
   this.txtRef=React.createRef()
   }
   2.将创建好的ref对象添加到文本框中
   
9. 通过ref对象获取到文本框的值
   This.txtRef。current.value------

能够使用props接收数据
能够实现父子组件之间的通讯
能够实现兄弟组件之间的通讯
能够给组件添加props校验
能够说出生命周期常用的钩子函数
能够知道高阶组件的作用

1. 组件通讯介绍
2. 组件的props
   组件是封闭的，要接收外部数据应该通过props来实现
   传递数据：给组价标签添加属性< Hello name=”jack” age={19}>
   接受数据：函数组件通过参数props接收数据，类组件通过this.props接收数据
   Function Hello(props){ console.log(props)}
   类组件通过this.props
   可传递对象、数组、函数、jsx等
   可传递任意类型的数据
   Props中的值不允许修改
   使用类组件时，如果写了构造函数，应该将props传递给super() 否则，无法在构造函数中获取到props
   Class Hello extends React.Component{
   Constructor(props){super(props) //推荐奖props传递给父类构造函数}
   }
3. 组件通讯的三种方式
   父组件—》子组件
   1父组件提供要传递的state数据
   2.给子组件标签添加属性，值为state中的数据
   3.子组件中通过props接收父组件中传递的数据
   子组件—》父组件
   思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
   兄弟组件
   将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态：状态提升
   要通讯的子组件只需要通过props接收状态或者操作状态的方法
4. Context
   调用React.createContext() 创建provider（提供数据） 和Consumer（消费数据）两个组件const {Provider,Consumer} =React.createContext()
5. Props深入
   Child 属性：表示组件标签的子节点。当组件标签有子节点是，props就会有该属性
   Child可以为jsx、 函数、文本等任意值
   2.props校验
   允许在创建组件的时候，就指定props的类型，格式等。
6. 安装包 prop-types
7. 导入prop-types import PropTypes from ‘prop-types’
8. 使用组件名.propTypes={}来给组件的props添加校验规则
   App.propTypes={ colors：PropTypes.array}

3.约束规则
常见类型：array、bool、func、number、object、string
React元素类型 ：element
必填项：isRequired
特定结构对象：shape（{}）
4.默认值
App.defaultProps={page：10}
给props设置默认值，在未传入props时生效
6. 组件的生命周期
意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等
组件的生命周期：组件从创建到挂载到页面中运行，再到组件不用时卸载的过程
生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数
钩子函数的作用：为开发人员在不同阶段操作组件提供了时机
只有类组件才有生命周期+

创建时（挂载阶段 页面加载时）
Constructor（） render（） componentDidMount（）
Constructor 创建组件时，最先执行 初始化state，为事件处理程序绑定this)
Render 每次组件渲染都会触发， 徐然ui，不能调用setState

更新时
New props 时 setState时 forceUpdate时
Render（） componentDidUpdate（）
componentDidUpdate 组件挂载 dom渲染完后， 发送网络请求，dom操作
如果直接调用setState也会导致递归更新状态，！！必须放在if 中
比较更新前后的props是否相同，proProps 当前 this.props
卸载时
ComponentWillUnmount() 清除定时器

7. Render-props和高阶组件
   如果两个组件中的部分功能相同或者相似，该如何处理？
   处理方式：组件复用，复用相似功能
   复用什么？1.state 2.操作state的方法
   两种方式：1.render props模式 2.高阶组件（HOC）

8. 如何拿到组件中复用的state？
   在使用组件时，添加一个值为函数的prop，通过函数参数来获取
   <Mouse render={(mouse)=>{}}

9. 如何渲染任意UI
   使用该函数的返回值作为要渲染的UI内容
   Class Mouse extends React.Component{
   // 状态
   state={
   x:0,
   y:0
   }
   handleMouseMove= e=>{
   this.setState({
   x:e.clientX
   y:e.clentY
   })
   }
   componentDidMounted(){
   window.addEventListener(‘mouseMove’,this.handleMouseMove)
   }
   Render(){
   Return (this.props.render(this.state))
   }
   <Mouse render={(mouse)=>{return

   {mouse.x}{mouse.y}

   }>
   }
   使用children代替render属性
   {(mouse)=>{return

   {mouse.x}{mouse.y}

   }
   Render(){
   Return this.props.child(this.state)
   }
   高阶组件
   目的：实现状态逻辑复用
   采用包装（装饰）模式 例如:手机壳
   高阶组件（HOC ，Higher-Orider Component）是一个函数，接收要包装的组件，返回增强后的组件
   高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent
   Const EnhancedComponent=withHoc(WrappedComponent)

使用步骤：

1. 创建一个函数名称约定以with开头
2. 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
3. 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
4. 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
5. 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中
   Function withMouse(WrappedComponent){
   Class Mouse extends React.Component{
   }
   Return Mouse

}
//Mouse组件的render方法
Return <WrappedComponent {…this.state} /
设置dispalyName
使用高阶组件存在问题：得到两个组件名称相同
原因：默认情况下，React使用组件名称作为displayName
解决方式：为高阶组件设置displayName便于调试时区分不同的组件
displayName的作用：用于设置调试信息（React Developer Tools信息）
Mouse.dispalyName=WithMouse${getDispalyName(WrappedComponent)}
Function getDispalyNmae(){
Return WrappedComponent.dispalyName ||WrappedComponent.name || ‘Component’
}

传递props
高阶组件没有往下传递props，
解决方式: 渲染WrappedComponent时，将state和this.props一起传递给组件

React组件进阶

1. 组件通讯是构建react应用必不可少的一环
2. 2.props的灵活性让组件更加强大
3. 状态提升是react组件的常用模式
4. 组件生命周期有助于理解组件的运行guocheng
5. 钩子函数让开发者在特定的时间执行某些功能
6. Render props模式和高阶租金都可以实现组件状态逻辑复用
   7.组件寄件 state 内部状态 porps外部传递进来 ==》ui