zoukankan      html  css  js  c++  java
  • React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件

    React中的高阶组件是一个函数,不是一个组件。

    函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件。相当于将输入的React组件进行了一些增强。
    React的高阶组件实际上是装饰器(Decorator)模式的一种实践。

    2. 无状态组件(stateless component)

    无状态组件又叫纯函数组件,就是没有state的组件,纯展示型组件。

    React组件有两种类型,无状态组件和类组件,按照写法又有3种写法:

    1. 函数式定义的 无状态组件
    2. ES5定义的类组件 React.createClass
    3. ES6定义的类组件 extends React.component

    无状态组件有如下特点:

    1. 组件不会被实例化,无需分配多余内存,渲染性能有所提升
    2. 组件不能访问this对象,没有实例,自然没有this,this.state,this.ref均不能访问
    3. 组件不能访问生命周期方法
    4. 组件只能访问输入的props,不能修改,同样的输入得到一致的输出,无副作用

    3. PureComponent

    PureComponent也是Component的一种,其默认实现了shouldComponentUpdate的浅比较,是一种优化了的Component,React 15.3版本发布。
    实现代码类似下面:

    if (this._compositeType === CompositeTypes.PureClass) {
        shouldUpdate = !shallowEqual(prevProps, nextProps)
        || !shallowEqual(inst.state, nextState);
    }

    PureComponent在shouldComponentUpdate中对对象只是进行浅比较,如果对象包含嵌套的对象和数组,则比较会出错。
    实际使用的时候,对单层结构的state可以使用PureComponent,复杂结构的不要使用,否则组件可能不会更新。
    此外,尽量不要修改React的state,而是返回一个全新的state。
    PureComponent可以和immutable.js配合使用,使用不可变对象来保证组件状态的比较。

    参考:https://www.cnblogs.com/wonyun/p/5930333.html

  • 相关阅读:
    hover动画
    杀毒软件性能比较
    python文件转exe
    react 踩的坑
    js前端模块化(一) commonjs
    iframe嵌套页面 音频在微信公众号环境无法播放
    js正则表达式
    js修改伪类元素样式
    OAF 开发 Q&A
    JS打开窗口问题
  • 原文地址:https://www.cnblogs.com/mengff/p/9518636.html
Copyright © 2011-2022 走看看