immutable.js+react

YPHP 發(fā)布于2019-08-26 13:48 / 2909人閱讀

重寫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;
        }
        //屬性的個(gè)數(shù)長度不一樣更新，屬性不相同更新，否則不更新
        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;
    }
}

GPU云服務(wù)器云服務(wù)器 react _React React 源碼 react cdn

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109570.html

相關(guān)文章

React-redux進(jìn)階之Immutable.js

摘要：的優(yōu)勢保證不可變每次通過操作的對象都會(huì)返回一個(gè)新的對象豐富的性能好通過字典樹對數(shù)據(jù)結(jié)構(gòu)的共享的問題與原生交互不友好通過生成的對象在操作上與原生不同，如訪問屬性，。 Immutable.js Immutable的優(yōu)勢 1. 保證不可變（每次通過Immutable.js操作的對象都會(huì)返回一個(gè)新的對象） 2. 豐富的API 3. 性能好（通過字典樹對數(shù)據(jù)結(jié)構(gòu)的共享） Immutab...

孫淑建 2019-08-23 15:09 評(píng)論0 收藏0
為什么你要在React.js中使用Immutable Data

摘要：為什么你要在中使用熟悉的都應(yīng)該知道，是一個(gè)的框架，為了解決更新的問題，使用了，通過修改，來實(shí)現(xiàn)高效的更新?？偨Y(jié)就是使用通過使用，可以讓我們更容易的去處理緩存回退數(shù)據(jù)變化檢測等問題，簡化我們的開發(fā)。簡單的來講，immutable.js通過structural sharing來解決的性能問題。看看immutable.js是如何做的當(dāng)我們發(fā)生一個(gè)set操作的時(shí)候，immutable.js會(huì)...

lindroid 2019-08-23 17:19 評(píng)論0 收藏0
React組件性能優(yōu)化：PureRender和Immutable Data

摘要：插件允許我們在的語法中使用在傳遞數(shù)據(jù)時(shí)，可以通過進(jìn)一步提升組件的渲染性能，是針對可變對象和不可變對象所做的折衷。使用之后，僅僅改變狀態(tài)了的組件及其父組件被重新渲染。 1 前言網(wǎng)頁性能最大的限制因素是瀏覽器重繪(reflow)和重排版(repaint)，React的虛擬DOM就是為了盡可能減少瀏覽器的重繪和重排版，從React的渲染過程看，避免不必要的渲染可以進(jìn)一步提高性能。 2 Pu...

megatron 2019-08-20 14:42 評(píng)論0 收藏0
Immutable

摘要：如果實(shí)現(xiàn)了結(jié)構(gòu)共享，每次的新值共享內(nèi)部結(jié)構(gòu)以大幅減少內(nèi)存占用。這意味著，如果對一個(gè)進(jìn)行賦值次，并不會(huì)創(chuàng)建倍大小的內(nèi)存占用數(shù)據(jù)。消除了流經(jīng)系統(tǒng)的精神負(fù)擔(dān)。代價(jià)是編寫風(fēng)格將顛覆式的完全不同。會(huì)帶來很多無必要的渲染并成為性能瓶頸。 Part01 Immutable由何而生說immutable之前，首先看下什么是mutable。js在原生創(chuàng)建數(shù)據(jù)類型即是mutable，可變的。const只是...

Coly 2019-08-23 13:56 評(píng)論0 收藏0
一個(gè)基于React整套技術(shù)棧+Node.js的前端頁面制作工具

摘要：是一個(gè)前端頁面制作工具，方便產(chǎn)品，運(yùn)營和視覺的同學(xué)迅速開發(fā)簡單的前端頁面，從而可以解放前端同學(xué)的工作量。支持恢復(fù)現(xiàn)場功能關(guān)閉頁面配置不丟失支持操作。提供了一個(gè)方法，用于的拆分。就是發(fā)出的通知，表示應(yīng)該要發(fā)生變化了。 pagemaker是一個(gè)前端頁面制作工具，方便產(chǎn)品，運(yùn)營和視覺的同學(xué)迅速開發(fā)簡單的前端頁面，從而可以解放前端同學(xué)的工作量。此項(xiàng)目創(chuàng)意來自網(wǎng)易樂得內(nèi)部項(xiàng)目nfop中的page...

ermaoL 2019-08-26 11:46 評(píng)論0 收藏0