React入门

React定位组件源码方法

使用谷歌插件即可，非常好用！（么有vpn直接网上找资源就行）

React Developer Tools

React Inspector

一、react开始

1、react是什么

用于构建用户界面的JavaScript库
操作DOM呈现页面
（发送请求获取数据和处理数据不由react处理）facebook开发

2、为什么要学

原生js操作DOM繁琐、效率低
使用原生js直接操作DOM，浏览器会进行大量重绘重排
原生js没有组件化编码方案，代码复用率低

3、react特点

采用组件化模式，声明式编码，提高开发效率及组件复用率
在React Native中可以使用react语法进行移动端开发
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

4、JScript基础

判断this指向
class（类）
ES6语法规范
npm包管理器
原型、原型链
数组常用方法
模块化

二、使用

1、引入下列三个js

react.development.js
react-dom.development.js
babel.min.js

2、创建DOM

js方式创建虚拟DOM:
React.createElement(标签名，标签属性，标签内容)创建虚拟DOM
document.createElement()创建真实DOM
jsx更简洁

3、虚拟DOM

本质是object类型的对象（一般对象）
虚拟DOM属性少，真实DOM属性多，因为虚拟DOM是react内部在用，无需真实DOM上的那么多属性
虚拟DOM最终会被react转化为真实DOM，呈现在页面上

4、jsx

js+xml，属于JScript的扩展
定义虚拟DOM不写引号
标签中混入js表达式要用{}
样式的类名指定不用class用className
内联样式，用style={{key:value}}
只有一个根标签
标签必须闭合

5、组件

函数式组件首字母大写
类式组件
类中的构造器非必写，

6、组件实例的三大核心属性

state（状态）：状态不可直接更改，须用setState()更新
render中的this为组件实例对象
props：组件外传值与批量传值
可以加属性规则
函数式组件只能使用props属性，除非使用hooks
refs：类似原生的元素id，refs为一组ref值；
字符串形式的ref存在效率问题，已经弃用；
回调函数形式的ref，（如果内置函数则执行两次，第一次为null）
createRef用多少创建多少

7、react事件处理

8、收集表单数据

受控组件与非受控组件

9、高阶函数–函数柯里化

10、组件的生命周期

常用的生命周期函数
didMount
render
willUnmount
新版生命周期新增的两个生命周期：
getDerivedStateFromProps()、getSnapshotBeforeUpdate()

11、DOM的Diff算法

虚拟DOM中唯一标识key的作用
破坏顺序时可能错位，引起效率问题，可使用id等唯一值代替

12、react脚手架

借助webpack
react+webpack+es6+eslint
模块化、组件化、工程化

13、样式的模块化

14、组件化编码

拆分组件
实现静态组件
实现动态组件（初始化数据，交互）

15、组件传值

父传子：props
子传父：父组件先用props传函数给子组件，接着子组件调此函数传值給父组件即可
状态state在哪里，操作state的方法就在哪

16、react ajax

建议使用轻量级axios，已经封装xmlhttprequest
使用ajax会产生跨域，需要代理解决（package.json文件配置单个proxy）
配置多个代理在SRC根文件新建setupProxy.js（http-proxy-middleware）

17、兄弟（或任意）组件传值

消息订阅-发布机制（PubSubjs）
先订阅，再发布
需要在componentWillUnmount中取消订阅

18、发送请求方式

xhr：设计粗糙的API，不符合关注分离原则
fetch：原生函数，有的老版本浏览器不支持，不常用

19、单页面应用SPA（路由）

20、前端路由

BOM（history）HTML5新增的historyAPI

21、react路由（react-router-dom）

①一级路由
link
NvLink（通过this.prps.children可以拿到标签体内容）
Switch单一匹配，path与component一一对应
②路由的精准匹配和模糊匹配
Redirect Redirect重定向（最下方）
二级路由（嵌套路由）
③子级路由需要加父级路由path

向路由组件传递参数

④向路由组件传递params参数（声明，接收，在props取）this.props.location.params
⑤向路由组件传递search参数（不用声明，正常注册路由，在props取，最后借助querystring解析）this.props.location
⑥向路由组件传递state参数（不用声明，正常注册路由（路由对象），在props取）this.props.location.state
路由栈的push（默认）与replace（按需开启）模式

编程式路由

利用this.props.history对象里的API前进回退
withRouter可以加工一般组件加，让其拥有路由组件所具有的API

BrowserRouter与HashRouter

底层原理：
BrowserRouter封装了HTML5提供的historyAPI
HashRouter使用的是URL的哈希值
path：
BrowserRouter不带#；HashRouter带了#
刷新后对路由state的影响：
BrowserRouter不影响，state保存在history对象中；
HashRouter刷新后会导致路由state参数丢失

22、UI（antd）

ANT-Design

三、redux

专门用于状态管理的js库
集中式管理多个组件共享的状态

同步action：object一般对象
异步action：function函数，即action的返回值为函数（需要引入redux-thunk支持异步action），一般异步action中会调用同步action

react-redux

优化

前端打包

本地serve build模拟服务器，部署打包后的资源浏览器查看

react状态更新是异步（两种形式）

react路由组件的lazyload

react函数式组件的hooks

React.useState()可以使用state

React.useEffect()可以模拟使用生命周期钩子

React.useRef()

React中Fragment

Fragment标签可在编译时忽略该节点

React中Context

一种组件间通信方式，祖组件和后代组件通信
需要引入provider和consumer

React中PureComponent

重写了shouldComponentUpdate，提升了性能

React中render props

React中errorBoundary

错误边界，一般在父组件使用

React中组件通信方式

React router 6

已推荐使用函数式组件
有很多开箱即用的API，如：
useParams()
useSearchParams()
useLocation()
等！