react流程拿数据---->生成虚拟dom------>生成页面
react主件三大实例state
1、创建主件
2、初始化主件事通过props进行传值，用super进行传递
3、state实例在主件实例对象身上
4、reader里的this就是实例对象
react事件绑定
1、原生js绑定的三种方法
1-1、箭头函数绑定+document
1-2、函数绑定
1-3、赋值绑定+document
2、react推荐使用函数绑定方式绑定事件
3、类中方法this指向：类中所有函数在局部开启了严格模式无法直接调用值为undefined，可以通过this.函数.bin(this)进行调用
4、state状态不能直接更改需要通过setState
4-1、setstate状态更新的两种写法
4-2、setstate通过对象更新
4-3、setstate通过函数更新，对象的setstate是一个简写（语法糖）
使用原则:
4-1)状态更新不依赖原状态 =====》使用对象方式
4-2)如果更新使用函数式方式
4-3)如果需要在setstate（）执行后获取最新的状态数据
生产环境state使用方法
1、类型中可以直接写赋值语句，通过赋值加箭头函数实现，赋值加箭头函数会找到实例函数本身的this
react主件三大实例props在static(自身加属性)
1、props通过语法糖进行传值，props且有只读属性
2、数组能用展开运算符
3、数组上的的方法reduced，存在两个参数，当前值prevalue(当前值)，currentvalue（返回值值）
4、对象不能展开用es的语法糖可以进行展开，用三点运算符
5、数据传递验证react提供验证方法proptypes内置属性(Proptypes.string)字符串，(Proptypes.number)数字 Proptypes.string.isRequired(必填),函数限定Proptypes.func
6、默认值设定defaultProps
react主件三大实例ref
1、用于数据绑定。早期直接调用ref.属性.value可获取数据
2、内联函数式ref在rend状态更新会连续调用两次，一次为null，第二次为input值
onclick--点击-onblur----失去焦点
from表单的数据提交
1、表单提交数据是会自动刷新页面
2、实现非刷新数据使用event.perventDefault()来阻止表单提交
受控组建
通过onChange来试试获取数据值this.demo,单需要初始化状态
2、必须是函数调用是才能在口号
3、高级函数对应两种方法：
3-1、如A函数，接收的函数是一个函数，那么A就是一个高级函数
3-2、如A函数，调用的返回值依然是以恶函数，那么A函数就可以称之为高级函数
常见的高级函数：promise、settimeout、arr.map()等,函数颗粒化：通过函数调用继续返回函数的方法，实现统一处理参数编码形式
{this.saveformdata(‘属性’)}
saveformdata=(dataType)=>{
retun (event)=>{
this.setState([dataType]:event.target.value)
}}
{event=> this.saveformdata('属性'),event}
saveformdata=(dataType,event) =>{
this.setState([dataType]:event.target.value)
}
react 生命周期(生命周期钩子函数)
1、组件挂载componet，卸载unmountComponentAtNode
2、render调用时机：
2-1、初始化渲染
2-2、状态更新之后
3、componentDidMount主件挂在完成之后调用
4、compeonentwillUnmount组件将要卸载时
5、（旧版）生命周期关系
6、新生命周期钩子
重点：常用rend/componentDidMount/componentWillUnmount
diffing算法
react根据新数据生成新虚拟dome树，会进行新老虚拟dom树比较，生成新的dom树
1、diff中虚拟DOM中key的作用
a、旧虚拟DOM中找新虚拟DOM相同的key,虚拟dom内容没办，直接使用老真实dom,改变替换
页面中之前的真实dom
b、旧虚拟DOM威高到新虚拟DOM相同的key,会根据数据创建新的真实DOM，渲染到页面
2、使用index做索引值容易引发严重渲染（重新渲染所有数据）问题，一般使用id作为索引值
3、在重要数据使用是展示时一般使用唯一标识id,如果只是简单数据展示使用index也是可以
React主件化 小技巧###
1、react中import React中可以做分别暴露。咧如：{Component}
2、css文件在react一般使用less可以使用嵌套方式，减少引用误差
3、使用index可以减少文件子文件引用
4、css样式模块化使用module
5、安装 Could not read from remote repository.既可以使用代码片段rcc
6.event.keycode获取键盘按键
react中的ajax请求
1、axios轻量级，是封装的xmlHttprequest对象的ajax
2、promis风格
3、可以给node发送网络请求
消息订阅与发布使用pubsub
1、消息发布PubSub.publish
PubSub.publish('github',{
dataList: response.data.items,
isLoading: false
});
2、消息订阅Pubsub.subscribe
Pubsub.subscribe('github',(_,stateObj)=>{
this.setState(stateObj)
})
ajax请求方式
1、xhr底层请求
2、jquery初步封装xhr，不能频繁请求
3、axios完善的封装ajax请求
4、window自带请求fetch网页能自己调用，fetch调用返回值在json里面
react-router
1、路由
1-1、路由是一个key/value的映射关系，key是路径，value是一个function或者component
1-2、后端路由value是一个function，用来处理客户请求
1-3、前端路由是component,用于页面展示内容
2、react-router-dom
1）什么是spa？
1、单页面web应用
2、单个应用页面的一个完整页面
3、点击应用不会跳转，只会局部更新
4、数据通过Ajax请求获取，并在前端展示
2）什么是路由
1、路由是由一个key和value组成
2、key是路径，value可能是function或者component
3）前端通过history来是实现路由
4）react-router的理解
1、react的一个插件库
2、是专门来实现spa应用
3、基于react的项目会用到此库
5）路由逐渐与一般组件有什么差别
1、写法不同
2、存放位置不同：一般组件放在component，路由组件放在page中
3、接收到props不同，一般组件给什么传什么，不给不传，路由组件传递最重要的三个history\location\macth
6）Navlink可以实现路由链接的高亮，通过activeClassName指定样式
7）怎样提高路由匹配
1、通过switch匹配，提高路由匹配效率
8）解决路径样式丢失问题
1、通过引入时不写./只写/（常用）
2、不写./写%pubLic_url%（常用）
3、使用hashRouter
9)路由的严格模式与模糊匹配
1、开启严格模式需要exact={ture}
ajax传参数的几种方式：
1、query参数
2、params
3、body
3-1、urlencode
3-2、json
react路由传递参数的三种方式
1、paams传递参数
1-1、路由链接种传递
1-2、路由中声明接收
1-3、接收参数：this.props.match.params
2、search传递参数
2-1、路由链接携带参数
2-2、路由注册无需声明
2-3、this.props.location.search
3、state参数
3-1、路由链接携带参数
3-2、注册路由无需声明
3-3、this.props.location.state
4、withRouter可以加工一般组件位新组件，对象查找使用find方法
redux原理
1、store.getState()获取redux初始化状态
2、store.subscribe()订阅状态更新
3、store.dispatch()获取更新值
1、redux异步暴露的方式
1-1、引入在redux中暴露applyMiddleware
1-2、引入redux-thunk默认暴露thunk
lazy懒加载
1、路由特别多时需要做懒加载
HOOks
1、stateHooks
1-1、useState方法是类似于类式组件state
1-2、useState()能够返回一个数组，会获取两个值，一个值一个函数
1-3、useState()调用次数是1+n次
2、userEffect()
1、userEffect是类似于类式组件生命周期钩子，默认检测所有参数，通过参数检测两个值
2、userEffect相当于三个生命周期钩子的组合commentdidmount(),commentdidUpdata(),commentwillUnmount()
3、Ref Hook
3-1、ref Hook可以在函数组件中储存或查找任意标签和数据
3-2、语法是 const refContainer = userRef();
3-3、作用是保存标签对象，功能和react.createRef()
