React是一个库，通过react类，可以自定义组件。里边支持jsx语法，通过props和state传参/维护状态。
其他插件，比如Router/Redux都是围绕着扩展/修改react对象里的属性来添加功能的
1.准备工作
可以在yunp.top网站看webpack，node/npm，cnpm的相关使用视频教程
react有两种使用方式，一是在现有网站中添加；二是创建一个全新的
官网创建全新一个react app步骤
1.npx create-react-app my-app
2.cd my-app
3.npm start
（待定，熟悉react项目里的文件作用与架构）
2.JSX语法
1.react类
2.react-dom类
react-dom.render方法：两个参数。第一个是JSX语法写的标签（不是字符串或者对象），第二个是要插入的根容器标签
JSX语法：JavaScript + XML（HTML）结合形成的标签，包含了二者，可以在标签里直接用户js变量。遇到<>当XML语法解析，遇到{}当js语法解析
3.React元素渲染
（）：代表存在标签结构，并且标签结构要换行
所以可以用（）代表一个要被渲染的元素，赋给一个变量，直接传到render方法里
ele = (<div>
hello react
</div>
)
ReactDOM.render(el, ...)
4.React创建组件
组件文件后缀，jsx（有提示）或者js
要引入react库才能创建组件
创建组件两种方法：类和hook
类方式：
class a extends react.Component{
render(){
return <h1>hello react</h1>
}
}
引用的时候，用<a />标签形式
5.组件Props属性
为组件复用
使用组件的时候，给组件标签属性赋值<Home navi={变量名}>（加花括号是因为这是jsx语法，navi=“数据”也行）
组件内部，通过this.pros.navi
props不可以被修改
6.事件处理
传统的方式，用双引号包起来的函数名改用{} 来包起来
<a href="#" onClick={handleClick}>类的方法默认不会绑定this，在类方法里使用this会未定义
三个办法解决：
1.调用bind方法
this.handleClick = this.handleClick.bind(this);2.属性初始化语法
handleClick = () => {
console.log('this is:', this);
}3.绑定的时候用lambda包起来
<button onClick={(e) => this.handleClick(e)}>事件响应函数里加参数
两个办法
1.<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
2.<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
7.组件状态
组件的状态用state属性存储
读：this.state.状态名
改变用this.setState({状态名：this.state.count 【operation】})方法
状态是为了不直接操作dom，在JSX里使用而提出的，面向数据，而不是DOM编程
8.组件生命周期函数
componentWillMount：在组件渲染之前执行
componentDidMount：在组件渲染之后执行
shouldComponentUpdate：是否应该更新
componentWillUpdate：数据修改之前
componentDidUpdate：数据修改之后
componentWillReceiveProps：props发生改变时执行
componentWillUnmount：组件卸载前执行
9.组件类的构造函数
constructor(props){
super(props);
this.state={count:10}//初始化state对象
}
10.props可以接受函数做属性，子组件可以调用回调到父组件方法，改变父组件的属性
11.setState可控的时候异步执行，不可控的时候同步执行
setState第二个参数是回调函数，在修改成功后调用
同步写法要结合Promise，async，await
12.条件渲染
1.视图切换；2.默认缺省值
? : 来放不同的JSX标签
13. 列表渲染 & key
<li>标签要有个key属性，即为map里的{index}
key的作用是局部刷新
14.表单受控组件
value的值通过state管理；非受控的自己搞dom管理
受控的，要给onChange事件设置响应函数，在响应函数里setState为e.target.value
事件.preventDefault：阻止提交改变网址
15.Refs & DOM
适用refs的情况
1.管理焦点，文本选择或媒体播放
2.触发强制动画
3.集成第三方dom库
通过React.createRef创建ref对象
ref.current既是当前DOM结点
16.表单非受控组件
当状态太多了，就不想自己管理状态。用非受控组件
通过current.value获取表单的值
17.状态提升：
父子组件间交换数据
把数据放在父组件，再通过props给子组件
18.组件组合
props.children获取组件标签下的子组件。在render函数里渲染的时候引用输出。
这种情况是在引用组件的时候，把其他组件或者标签放在组件里边
19.PropsType进行乐行检查
增强健壮性
要求组件的propTypes属性指定相应props的类型，比如propTypes = {title：PropTypes.string}，PropTypes.string.isRequired代表这个属性一定要传
defaultProps对象指定相应属性默认值
20.ANTD UI
npm install后，引入相应组件，及其css或者less文件
根据官网文档使用，可以设置相应属性，尤其是回调函数
21.ANTD按需加载，引入js自动引入css
1.js与css单个文件导入
2.按照babel-plugin-import插件，配置antd
npm run eject（拉取webpack 配置）
安装插件，配置插件
22. Fetch get请求
fetch基于promise
fetch(url).then(res => {}).then().catch() ...，默认get
23.Fetch post请求
fetch(url, {method: "post", headers:{}, body:"body字符串",...})。body可以用querystring库（stringify方法）来处理
24.配置package解决跨域问题
开发环境：利用环境解决
生产模式：jsonp cors iframe postMessage
在package.json文件里，添加
"proxy":url字段
fetch的时候，可以不带url主机地址了
25.手动配置解决跨域问题
安装http-proxy-middleware
新建setupProxy.js,安装模板，修改目标网址
26.封装网络请求
api目录下 ：
base.js:公共数据，配置
index.js：对外接口
util目录下：
封装fetch
27.React Router
安装：npm install react-router-dom --save
引入BrowserRouter,Switch,Route,Link 对象
使用Route标签，引入路径和组件的映射
<Route path="/home" compontent={Login}/>
每个Route标签，要被BrowserRouter标签包起来
这样就配置好了，在浏览器里输入/home，就跳到Login组件页面 。浏览器地址栏没有被映射的path，就不会显示相应的组件，即默认不显示相应的被映射的组件，一定要有个地方引用到这个path才可以，Route标签仅仅是为了占位，path被点击到了这个位置就显示
28.BrowserRouter和HashRouter区别
锚点记录与history push实现（需要后台处理重定向，否则404）
29.Link跳转
<Link to=path />,生成跳转标签。to还可以用对象配置
30.exact匹配
Route标签，父组件的exact={true}或者直接exact,表面不会显示路径里的父组件
31.strict匹配
Route加strict属性，表明地址里最后有个/也不匹配。必须和exact一起使用
32.组件可以直接倒出一个lambda匿名函数，里边render
33.Switch和404
Switch里面 放个Route，不配路径，全匹配。这样路径匹配不到，就显示这个组件
有了Switch标签，只会匹配一个，第一个匹配到的
34.render func
直接在Route标签里设置，render={lambda}
35. NavLink高亮
选中后高亮标签，class为active。可以通过属性activeClassName改变class名称。属性activeStyle指定具体样式
36.URL参数
定义路由的时候，加/:id,在使用的时候，用props.match.param.id获取。/:id代表，表明参数可有可无
37. query string读取参数
&分隔的在props.location.search里，待用URLSearchParams.get（key）来获取
或者用querystring.parse获取
38.Link的to属性
search添加&格式的参数，hash添加hash后缀，state为隐形参数，不在网址上暴露。props.location里包含这几个属性
39.重定向
不同路径，同一个页面
<Redirect>标签from知道src，to指定dst
40.重定向push和replace
使用props.history的push和replace方法进行页面跳转
41.withRouter
这是一个高阶组件
组件想被Router管理，获取props里相应的Router对象，导出的时候可以用withRouter(组件)的格式
42.Prompst
类似状态守卫，在某个状态的时候弹出文字，属性when是状态，message是提示文字
43.路由嵌套
在父组件里，通过props.children显示被嵌套进来的子路由组件。即组件组合的情况
44.redux介绍
redux是一个Javascript状态容器，提供可预测化的状态管理
传统状态共享：
props，回传事件
兄弟之间共享：共同的父/子元素
45.Boot CDN加载
取boot cdn这个网站搜
46.引入Redux
npm install --save-dev redux，或者npm install --save-dev react-redux。这二者一个是给js用的，一个是给react封装好使用的
Ruedx通过reducer定义，存储状态。外界通过dispatch action改变state，通过getState获取状态
1.从redux引入createStore
2.定义reducer，为一个函数，有两个参数，state和action
3.createStore(reducer)创建store
4.store里的dispatch分发，参数是一个对象，{type:"Incremeant", }
5.store还有getState和subscribe，通过subscribe返回的函数注销监听器
目前一个store只有一个state
47.mapStateToProps
用<Provider>标签包住要渲染的标签，提供其store属性为createStore返回值
被包住的组件，要使用connect对象，用高阶组件的形式export connect()(组件)
connect里的参数，可以是个lambad函数，将state映射到counter，返回一个对象，key为props名value为state值，这样在this.prpos.key就可以读到了
45.dispatch
connect的第二个参数是mapDispatchToProps，一个lambda函数，返回的对象是动作到方法的映射。通过传进来的dispatch参数，调用自定义方法
这样props里，就有了相应的方法。
dispatch的是action，里面包含了给reducer的各种参数
46.bindActionCreators
在dispatchToProps里通过给binderActionCreators传参，参数是导入的*和dispatch，即可一次导入，这样直接引用props.key即可
47. 传参给reducer，可以在action对象里拿到。action方法里返回的是一个对象
48.combineReducers，合并reducers
把reducer扔进combineReducer，要使用引用的话，加一层，props里state.reducer来引用
49.中间件
引入appMiddleware
createStore第二个参数即是appMiddleware，里边自定义lambda函数。
这是一个截获过程，可以获取执行过程中的状态。所以要有骨架，执行返回正常流程
中间件名 = store => next => action =>{
result = next(action)
return result
}
50.logger中间件
npm install --save-dev redux-logger
可以打印整个过程里的action，state，并且带颜色
50.第三方thunk中间件
thunk中间件负责异步
npm install --save-dev redux-thunk安装
有了这个中间件，可以在timeout里调用dispatch
thunk另一个异步作用是网络请求
网络请求后调用dispatch
thunk请求三种状态
1.请求中
2.成功
3.失败
state操作三大原则：
state是只读的
52. 调试工具
chrome安装插件
React Developer Tools
Redux DevTools
需要安装依赖，npm install --save-dev redux-devtools-extension
使用的时候，传参给createStore第三个参数位；或者composeWithDevTools包裹插件传进第二个参数位
53.React进阶-组件优化
1.定时器，网络请求，事件监听，在组件销毁前要取消
2.shouldComponentUpdate两个参数，nextProps，nextState，可以用来判断和当前的值是否一致，决定是否渲染
3.PureComponent，对数据进行浅比较。比较props，变化才渲染
54.Fragment
Fragment标签，用来占位，防止没有root对象
55.Context
组件第一个参数是props，第二个是context。父组件设置context，下面多层的子组件可以直接使用
父元素实现函数getChildContext返回键值对
父元素设置childContextTypes
子元素设置conTextTypes
56.高阶组件
1.是个函数
2.参数一个组件
3.返回值一个组件
在对传入的组件进行一次加工
高阶组件定义（）=》（）{}
使用，（）（）
57.错误边界处理
一个组件出错，仅仅这一个组件不显示出来
定义一个组件，componentDidCatch，参数为error，errorInfo
用这个组件包住可能出现错误的组件
58.新特性 state hook
hook:不写class的情况下去操纵state和其他数据
直接写个function，return一个jsx语法
可以 export default () =>{}直接导出
要使用state，
1.import useState
2.定义一个数组， [count,setCount] = useState(0)//0表示默认值
3.直接使用count和setCount，不用this
可以看到，简单了很多
59.Effect Hook
useEffect代替生命周期函数
有三个：componentDidMount.componentDidUpdate,componentWillUnmount
useEffect传入箭头函数即可。
useEffect第二个参数是个数组，[]代表映射componentDidMount。没有第二个参数，代表componentDidMount,componentDidUpdate.
useEffect直接返回代表componentWillUnmount
[count]代表只有count更新，才会调用componentUpdate
60.hook使用好处
可以返回一个对象， 里边是相应的值和事件响应函数
使用的时候，{...hook返回值}即可
awesome react hooks可以找到很多这种常用代码段，方便复用
61.useEffect优化
在回调函数里判断属性是否改变，决定是否渲染
62.网络请求hook下
可以用async await来做，封装为一个lambda
63.hook使用规则
不要在循环，条件，嵌套函数里使用hook
hook函数（userEffect，useStatge必须在顶层，所有的东西在他里面）
64.componentWillUnmount
return的时候做收尾工作，return一个lambda
65.memo
memo是个高阶组件，对于hook形式的组件，放进去再返回即可。和PureComponent一个作用
66.useCallback优化
包裹住回调函数，只在第二个参数变化的时候调用（除了第一次回调）
67.useReducer
通过useReducer返回state和dispatch，改变state通过调用dispatch
68.useContext
React.createContext创建context
子组件用创造context.Provider标签，指定value
子组件可以使用useContext(context)来获取
69.contextType
使用useContext后，子类指定statci contextType，就可以直接用this.context
70.setState
可以传一个lambd函数，prevState和props为参数
合并所有的异步执行，异步执行完毕后执行回调函数
y