React阶段总结

# React 总结

## 什么是 react？

专注于视图层得响应式框架，单向数据流，单向数据绑定

## react，vue，jq 对比

react 单向数据绑定 ，专注于视图层
vue 数据驱动视图，双向绑定数据，响应式框架
jq 操作 dom 的 js 库

## react 特点

声明式设计
高效灵活
jsx 语法
组件模块化

## react 为什么必须使用 setState 去修改

因为单向数据绑定特性，必须使用 setState 函数去修改，才能让组件进入更新阶段

## jsx 语法

jsx  
是类 xml 的一种格式，底层是 js
是 React.createElement 的语法糖

## setState 默认是同步还是异步？如何让他成为同步？

异步，传入俩个回调函数即可

## 组件类型

类组件，函数组件（无状态组件） class 类组件 hook 组件

## 什么是高阶组件

一个函数接受一个组件，返回一个类组件

## 高阶组件的意义

为了复用组件里面的方法和逻辑等，没有 hook 之前，函数组件没有 react 特性，所以才有了这种模式

## 生命周期

### 挂载阶段

1.constructor 初始化
2.render 渲染 dom 片段
3.componentDidMount 挂载完成

### 更新阶段

1.static getDerviedStateFromProps
可以对 props 和 state 进行再次修改
2.shouldComponentUpdate
是否要更新
3.render 渲染

### 卸载阶段

componentWillUnmount

## hook 的 useEffect

1.直接用：更新的钩子函数

2.空数组：挂载完成钩子函数

3.数组里有值：对该值监听，只有该值更新的时候才会触发，第一次监听值也会触发

4.返回一个函数：卸载

## 性能优化

1.shouldComponentUpdate 是否阻止组件更新
2.memo
3.useMemo
4.useCallback
5.pureComponent 等价于自动调用 shouldComponentUpdate
6.React.lazy 组件的按需加载

## 上下文对象

React.context 创建一个全局的共享上下文对象
父组件使用 context.Provider 提供共享数据
子组件 context.Consumer 接收共享数据
且 Consumer 组件里必须用函数接收

```js
const context =React.context()
父组件
<context.Provioder value={data}><Son/></Son>
子组件
<context.Consumer>{(data)=>....}</>
```
## 懒加载组件
React.lazy
```js
React.lazy(()=>import("./Son))
<React.Suspense fallback="1908"><Son/></>
```
## hook

## 受控组件和非受控组件
### 受控组件
行为和交互被react控制的组件叫受控组件，比如input的value被state控制，赋值操作被onChange控制
## 非受控
不被react控制的，由用户自有操作的
举例子:input的type类型是file

## 虚拟 dom 和 diff 算法

用 js 通过算法计算出来的 dom 对象，叫虚拟 dom
diff 算法原理：同层对比，发现不一致，就用新的虚拟 dom 替换旧的，且停止向下对比

## portals

让元素渲染到页面的任意节点下

## 插槽

使用 Props.children 接收上游组件传入的子元素或者内容
`<slot>xxx</slot>`
# ref

定义：react里的所有组件都有一个ref属性，用于获取组件实例或dom对象的。
一般必须操作dom的时候才会用到，非必要不推荐使用。

## ref的四种参数

1. React.createRef()
2. useRef()
3. 回调函数
4. 字符串【历史遗留的api】

## ref使用

如果给类子组件使用ref，获取的是类组件的实例对象。如果用在纯函数组件上则会报错，要求必须使用React.forwardRef()

## ref转发

forwardRef用于获取子组件中的dom元素
# React.lazy

使用lazy动态加载组件，使用Suspense包裹被懒加载的组件
# context
上下文对象：跨级通信。
概念：传统的层级组件通信，需要每一次组件都要写props传递，如果其中某一层组件没有传props就导致断开通信了。
适用：中小型项目。
大型项目的话，适用redux或者mobx集中管理。
上下文对象需要根元素提供数据，如果数据源来自多个组件的话，就不适合使用context了。
当数据源是单一的情况下，使用context比较方便。
## useContext
使用它可以省略掉Consumer组件，直接获取到Provider提供的数据，【但是】会破坏掉性能优化的memo和shouldComponentUpdate

## 顶级 Api

React.component,React
PureComponent,React.createElement
React.cloneElement
React.children
React.Fragment
React.createContext
React.lazy
React.Suspense
React.forwardRef
React.useState
React.useRffect
React.createRef
React.useMemo
React.memo
React.useCallback
React.render
ReactDom.createPortals