React高级特性解析

react conText

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

第一种方式

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

Context.Consumer

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

第二种方式

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

Portals插槽

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

React.createPortal(Component, nodeElement)

HOC

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

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

例如：

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

鼠标移动例子所有的组件都需要获取在某个组件内的鼠标移动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'));

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

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

HOOK 钩子

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

const [value, setValue] = useState();

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

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

Component 和 PurComponent 的区别

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

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

截流和防抖

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

setState

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

为什么使用异步处理？

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

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