immutable.js+react

YPHP 发布于2019-08-26 13:48 / 2777人阅读

重写shouldComponentUpdate方法

import React, { Component } from "react";
import { is } from "immutable";
export default class PureComponent extends Component {
    shouldComponentUpdate(newProps, newState) {
        let oldState = this.state || {};
        let oldProps = this.props || {};
        newState = newState ? newState : {};
        if (Object.keys(oldState).length !== Object.keys(newState).length || Object.keys(oldProps).length !== Object.keys(newProps).length) {
            return true;
        }
        //属性的个数长度不一样更新，属性不相同更新，否则不更新
        for (let key in newState) {
            if (!is(newState[key], oldState[key])) {
                return true;
            }
        }

        for (const key in newProps) {
            if (!is(oldProps[key], newProps[key])) {
                return true;
            }
        }
        
        return false;
    }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109570.html

React-redux进阶之Immutable.js

摘要：的优势保证不可变每次通过操作的对象都会返回一个新的对象丰富的性能好通过字典树对数据结构的共享的问题与原生交互不友好通过生成的对象在操作上与原生不同，如访问属性，。 Immutable.js Immutable的优势 1. 保证不可变（每次通过Immutable.js操作的对象都会返回一个新的对象） 2. 丰富的API 3. 性能好（通过字典树对数据结构的共享） Immutab...

孙淑建 2019-08-23 15:09 评论0 收藏0
为什么你要在React.js中使用Immutable Data

摘要：为什么你要在中使用熟悉的都应该知道，是一个的框架，为了解决更新的问题，使用了，通过修改，来实现高效的更新。总结就是使用通过使用，可以让我们更容易的去处理缓存回退数据变化检测等问题，简化我们的开发。简单的来讲，immutable.js通过structural sharing来解决的性能问题。看看immutable.js是如何做的当我们发生一个set操作的时候，immutable.js会...

lindroid 2019-08-23 17:19 评论0 收藏0
React组件性能优化：PureRender和Immutable Data

摘要：插件允许我们在的语法中使用在传递数据时，可以通过进一步提升组件的渲染性能，是针对可变对象和不可变对象所做的折衷。使用之后，仅仅改变状态了的组件及其父组件被重新渲染。 1 前言网页性能最大的限制因素是浏览器重绘(reflow)和重排版(repaint)，React的虚拟DOM就是为了尽可能减少浏览器的重绘和重排版，从React的渲染过程看，避免不必要的渲染可以进一步提高性能。 2 Pu...

megatron 2019-08-20 14:42 评论0 收藏0
Immutable

摘要：如果实现了结构共享，每次的新值共享内部结构以大幅减少内存占用。这意味着，如果对一个进行赋值次，并不会创建倍大小的内存占用数据。消除了流经系统的精神负担。代价是编写风格将颠覆式的完全不同。会带来很多无必要的渲染并成为性能瓶颈。 Part01 Immutable由何而生说immutable之前，首先看下什么是mutable。js在原生创建数据类型即是mutable，可变的。const只是...

Coly 2019-08-23 13:56 评论0 收藏0
一个基于React整套技术栈+Node.js的前端页面制作工具

摘要：是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。支持恢复现场功能关闭页面配置不丢失支持操作。提供了一个方法，用于的拆分。就是发出的通知，表示应该要发生变化了。 pagemaker是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。此项目创意来自网易乐得内部项目nfop中的page...

ermaoL 2019-08-26 11:46 评论0 收藏0