专栏首页憧憬博客分享React高级特性解析

React高级特性解析

react conText

使用API React.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对象都将resolveloading换成真正的组件

HOOK 钩子

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

const [value, setValue] = useState();

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

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

Component 和 PurComponent 的区别

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

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

截流和防抖

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

setState

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

为什么使用异步处理?

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React-Router 5.0 制作导航栏+页面参数传递

    使用React构建SPA应用(单页面应用),要想实现页面间的跳转,首先想到的就是使用路由。在React中,常用的有两个包可以实现这个需求,那就是react-ro...

    憧憬博客
  • Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览

    this.$parent   获取父组件实例 可以使用父组件实例的属性 this.$children 获取子组件数组 可以利用下标调用子组件实例的属性

    憧憬博客
  • React-Redux 对Todolist修改

    在单独使用redux的时候 需要手动订阅store里面 感觉特别麻烦 不错的是react有一个组件可以帮我们解决这个问题, 那就是react-redux。

    憧憬博客
  • React 新手笔记

    团队的技术栈是 React saga + tcff(内部开源的框架,类似 dva)+ tea(内部开源的 UI 框架)

    kmokidd
  • React学习(最终篇)—— 高阶应用:高阶组件(HOCs)

    高阶组件(higher-order components:以下简称HOC或HOC组件)是一个React组件复用的高级技巧。HOCs本身并不是React的API接...

    随风溜达的向日葵
  • 基于组件的.NET技术(5)

    实战: 创建一个VB.NET Windows应用程序:VBTestDynamicComponent。将前面介绍的两个类ComponentList和LoadCo...

    脑洞的蜂蜜
  • 【腾讯轻舟Raft】后台组件的治理思路

    | 导语 腾讯轻舟平台(RAFT,Rapid Application Framework of Tencent)是一个致力于组件治理,为创新型应用提供“端云一...

    腾讯大讲堂
  • 如何搭建一个完美的组件库?

    如何做一个组件库?本篇文章不会讲一个小的组件如何设计,而是会整体讲一个“逼近完美”的组件库是怎么设计的。

    lucifer210
  • 说一句最好的Flutter开源项目也不过分

    老孟导读:首先声明此项目不是我完成的,是大神`张风捷特烈`呕心沥血之作,对初学者有极大对帮助,当然我获得了大神`张风捷特烈`的授权,所以我不是盗版哦。

    老孟Flutter
  • 【微服务】139:Vue之组件化开发

    和Java中一样,js中也是使用new Date()创建日期对象,可以将毫秒值转换成日期。

    刘小爱

扫码关注云+社区

领取腾讯云代金券