React高级特性解析

react conText

使用APIReact.createContext  返回的是组件对象 可以利用结构的方式

• 第一种方式

使用Provider包裹的组件都可以获取提供者的value

• Context.Consumer

组件里面使用函数 函数返回一个组件 函数的参数为Context初始化的参数

• 第二种方式

1. 使用Context.Provider包裹所有的组件
2. 在子组件里面使用static contextType = 创建的Context 则会自动向上查找 然后在组件内部可以通过this.context获取值

Portals插槽

1. 可以将一个dom插入到其他dom下面ReactDOM.createPortal(需要插入的节点, 需要挂载的节点)

React.createPortal(Component, nodeElement)

HOC

• 主要存在作用 抽离state 复用逻辑 操作方式可以直接使用ES7装饰器
• 对一个函数传入一个组件  返回一个组件 函数里面将公共的逻辑抽离出来
• 例如：每个页面都需要加载数据 渲染页面 那么就可以将公共的获取数据接口抽离出来 对指定组件进行渲染
• hoc生命周期  组件的didMount -> hocDidMount -> hocwillMount -> hocwillUnMount -> unMount

HOC都有一个通病就是props可能重复

例如：

1. 每个组件都有共同的操作  比方说：A组件需要修改名字  B组件也需要修改名字  就可以将状态提升 利用HOC 传入修改事件以及传入的值
2. Loading操作 每个组件都有一个loading状态 利用hoc接收一个loading是否显示的状态  然后用这个loading状态控制显示loading组件还是业务组件
3. 数据请求 两组同样的数据请求  放在不同的展示组件里面渲染 可以将获取数据的操作抽离出来

鼠标移动例子 所有的组件都需要获取在某个组件内的鼠标移动x y

const withMouse = Component => {
return class extends React.Component {
    state = {
        x: 0,
        y: 0
    };
    handleMouseMove = event => {
        this.setState({
            x: event.clientX,
            y: event.clientY
        });
    };
    render() {
        return (
            <div onMouseMove={this.handleMouseMove}>
                <Component {...this.props}  mouse={this.state}/>
            </div>
        );
    }
}
}

RenderProps

与HOC惊人的相似。当是不会再出现props重复的问题。实际上就是一个回调函数 作用都是获取外部数据

// 例如
将重复的操作放在 组件内部
组件内部通过调用外部的render方法 实现将外部组件可以获取组件内部的state 从而不影响props的传递
class Mouse extends React.Component {
    static propTypes = {
        // render: required
    };
    state = {
        x:0,
        y:0
    };
    handleMouseMove = (event) => {
        this.setState({
            x: event.clientX,
            y: event.clientY
        })
    };
    render() {
        return (
            <div onMouseMove={this.handleMouseMove}>
                {this.props.render(this.state)}
            </div>
        );
    }
}

Refs 转发

• 主要是不方便获取叶子组件的ref 利用ref转发可以准确的获取的叶子组件的ref

const ref = React.createRef()
    React.forwardRef((props, ref) => {
        <Component ref={ref}>
    })

ref则会成为叶子组件的ref

Fragments

• 主要是在代码逻辑中对这些组件进行 不会产生任何的额外节点

<>
  <div>hello</div>
</>

React.lazy  React.suspense 懒加载

React.lazy(() => import('./Component'));

1. 以前是webpack将所有打包成为一个文件 导致文件特别大 不利于代码拆分 这个时候需要代码拆分
2. const OtherComponent = React.lazy(() => import('./OtherComponent'));   这样导入的组件 如果有多个懒加载组件 那么展示会以加载时间最长的组件显示
3. React.suspense 参数 fallback 懒加载过程中需要展示的内容

• 原理分析
• 当父组件渲染到子组件的时候发现异步请求 直接抛出错误 捕获的结果是个promise
• ComponentDidCatch捕获到这个promise的异常 pending状态下渲染fallback
• 当resolve时重新render 遇到下一个异步请求重复上面操作
• 直到整个父组件抛出的promise对象都将resolve 将loading换成真正的组件

HOOK 钩子

HOOK提供了一系列函数式组件的钩子

const [value, setValue] = useState();

value则是state状态  setValue 则是个函数 需要设置值直接调用setValue 传入需要设置的值即可

1. useEffect     传入一个匿名函数   该匿名函数的作用相当于DidMount和DidUpdate  可以在匿名函数里面返回一个函数

Component 和 PurComponent 的区别

区别点: 前者自带通过props和state的浅对比来实现shouldComponentUpdate 而后者没有 只要props变化就会重新render

• PurComponent缺点
  可能因为深层数据不一致而产生错误的否定判断 从而界面得不到更新
  为什么会产生：新的对象简单的引用了原始对象 改变了新的对象将影响到原始对象 如foo = {a: 1}  bar = foo  bar.a = 2这个时候区对比foo和bar是一样的 一般解决是使用深拷贝 则可以  引用immutable 也可以优化

截流和防抖

1. 截流  控制指定时间触发一次 在指定时间内调用不能超过一次
2. 防抖  防抖确保函数不会在上一次调用后一定量的时间被执行
3. requestAnimationFrame 节流  浏览器会确保每一秒是60帧 可以防止每秒超过60帧的操作 自己限流

setState

异步处理  多次增加数据会导致数据返回不到预期 可以使用函数形式处理

为什么使用异步处理？

• setState不会立马改变React组件和state的值
• setState通过触发一次组件的更新来引发重绘
• 多次setState函数调用产生的效果会合并

本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。