React 基础总结

基本使用

React事件和Dom事件的区别

1、event 是SyntheticEvent，模拟出来Dom事件所有能力
2、event.nativeEvent是原生事件对象
3、所有的事件都被挂载到document上
4、和Dom事件不一样，和Vue事件也不一样
复制代码

注意：React 16 绑定到document、React 17 事件绑定到root组件

有利于多个React版本并存。例如微前端

表单

受控组件：实现v-model，由state控制表单的值

组件使用

props传递数据
props传递函数
props类型检查
复制代码

setState

1、不可变值：不能直接去操作state

2、可能是异步更新

1、直接使用时异步的，可使用setState的第二个参数，回调函数
2、setTimeout 中setState是同步的
setTimeout(() => {
    this.setState({
        count: this.state.count + 1
    })
    console.log(this.state.count)
}, 0)
3、自定义DOM事件是同步的
document.body.addEventListener('click', () => {
    this.setState({
        count: this.state.count + 1
    })
    console.log(this.state.count)
})
复制代码

3、可能会被合并

1、传入对象，会被合并，执行结果只一次 + 1（类似Object.assign）
this.setState({
    count: this.state.count + 1
})
this.setState({
    count: this.state.count + 1
})
this.setState({
    count: this.state.count + 1
})
2、传入函数，不会被合并，执行结果 + 3
this.setState((pervState, props) => {
    return {
        count: prevState.count + 1
    }
})
this.setState((pervState, props) => {
    return {
        count: prevState.count + 1
    }
})
this.setState((pervState, props) => {
    return {
        count: prevState.count + 1
    }
})
复制代码

组件生命周期

1、挂载时

constructor
componentWillMount
componentDidMount
复制代码

2、更新时

shouldCompontntUpdate
componentDidUpdate
复制代码

3、卸载时

componentWillUnmount
componentDidUnmount
复制代码

高级特性

函数组件

1、纯函数，输入props，输出JSX
2、没有实例，没有生命周期，没有state
3、不能扩展其他方法
复制代码

非受控组件

只赋值默认值，使用时通过ref获取最终的值

ref
defaultValue defaultChecked
手动操作DOM元素
复制代码

使用场景

1、必须手动操作DOM，setState实现不了
2、文件上传
3、某些富文本编辑器，需要传入DOM元素
复制代码

受控组件和非受控组件的选择

1、优先使用受控组件，符合React设计原则（数据驱动视图）
2、必须操作DOM时，再使用非受控组件
复制代码

Portals

组件默认会按照既定层次嵌套渲染, Portals让组件渲染到父组件以外

ReactDom.createPortal(<></>, document.body/*(DOM节点)*/)
复制代码

使用场景

overflow:hidden
父组件z-index值太小
fixed定位需要放单body第一层
复制代码

context

React.createContext().Provider
React.createContext().Consumer
复制代码

异步组件

import()
React.lazy
React.Suspense
复制代码

const demo = React.lazy(() => import('XXX'))
<React.Suspense fallback={<div>loading...</div>}>
    <demo />
</React.Suspense>
复制代码

性能优化

1、shouldComponentUpdate：通过前后state的对比，控制是否渲染
React shouldComponentUpdate 默认返回true，父组件有更新，子组件则无条件更新
深度比较比较耗性能、shouldComponentUpdate一定要配合不可变值，否则通过前后对比优化渲染时会出现问题
所有，根据具体的需求，可以使用shouldComponentUpdate优化渲染
2、PureComponent和React.memo
通过SCU的浅层比较优化
3、不可变值 immutable.js
基于共享数据（不是深拷贝），速度好
有一定的学习和迁移成本，按需使用
复制代码

高阶组件HOC

reduc connect是高阶组件，传入一个组件，得到一个新的组件

Render Props

通过一个函数将class组件的state作为props传递给纯函数组件

HOC vs Render Props

HOC 模式简单，但会增加组件层级

Render Props 代码简洁

Redux

基本概念
store state action reducer
单项数据流
1、dispatch（action）
2、reducer -> newState
3、subscribe 触发通知
复制代码

react-redux

<Provider>connect
异步action
redux-thunk
redux-promise
redux-saga
中间件
复制代码