欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文詳解React渲染優(yōu)化之useImmer

 更新時間：2023年05月07日 09:01:17   作者：Ryun  
在React日常開發(fā)中，我們常常被重復(fù)渲染或無意義渲染所折磨，窮盡腦汁，做各種優(yōu)化：memo、useMemo、useCallback、immutable等，本文主要講述immutable的簡約版Immer，感興趣的同學(xué)可以一起來學(xué)習(xí)

從一個例子開始

import { FC, useState, useEffect } from 'react';

const App: FC = () => {
  const [list, setList] = useState({ a: 1 });

  useEffect(() => {
    setList({ a: 1 });
  }, []);

  console.log('測試');

  return (
    <>
      <h1>Hello Web3 React {list.a}</h1>
    </>
  );
};

export default App;
  • 看控制臺輸出結(jié)果

  • 因為list是引用對象，雖然內(nèi)部的值相同，但引用地址變化了，因此react認(rèn)為state發(fā)生了變化，因此觸發(fā)了渲染，這也聯(lián)想到如果我們傳遞props時為對象或數(shù)組時，會造成我們非期望渲染的緣由，那我們該如何解決這個問題呢？
  • 在此之前，先介紹一個react渲染檢查工具 why-did-you-render

渲染檢查工具

why-did-you-render, 可以在開發(fā)時，幫你檢測無意義的渲染

  • 安裝 yarn add @welldone-software/why-did-you-render -D
  • src下創(chuàng)建 wdyr.tsx
/// <reference types="@welldone-software/why-did-you-render" />
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  // eslint-disable-next-line
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    onlyLogs: true,
    titleColor: 'green',
    diffNameColor: 'darkturquoise',
    trackHooks: true,
    trackAllPureComponents: true,
  });
}
  • 在入口文件 index.tsx 引入

  •  4.上面的例子，輸出結(jié)果，顯示無意義渲染

要解決這個問題，需要我們使用到Immer

Immer 與 UseImmer

  • 不可變數(shù)據(jù)：不可變數(shù)據(jù)的特點就是產(chǎn)出地址不同的對象引用，同時盡可能保留沒必要更新的屬性或者子屬性，這樣在你的組件樹中如果有數(shù)據(jù)的其他屬性或者子熟悉的依賴存在的話，可以避免一些rerender
  • immutable：不改變原數(shù)據(jù)，將變化的部分與不變的部分組成一個新的數(shù)據(jù)對象**
  • Immer：簡化了不可變數(shù)據(jù)結(jié)構(gòu)的處理，與immutable代碼簡單，去掉樹的壓縮，使用proxy代理，組合新的樹
    • immer 可以在需要使用不可變數(shù)據(jù)結(jié)構(gòu)的任何上下文中使用，例如：React state、Redux等
    • 不可變的數(shù)據(jù)結(jié)構(gòu)允許（高效）的變化檢測：如果對象的引用沒有改變，那么對象本身也沒有改變。此外，它使克隆對象相對便宜：數(shù)據(jù)樹的未更改部分不需要復(fù)制，并且在內(nèi)存中與相同狀態(tài)的舊版本共享

  • 利用 produce 函數(shù)，它將我們要更改的 state 作為第一個參數(shù)，對于第二個參數(shù)，我們傳遞一個名為 recipe 的函數(shù)，該函數(shù)傳遞一個 draft 參數(shù)，我們可以對其應(yīng)用直接的 mutations。一旦 recipe 執(zhí)行完成，這些 mutations 被記錄并用于產(chǎn)生下一個狀態(tài)。 produce 將負(fù)責(zé)所有必要的復(fù)制，并通過凍結(jié)數(shù)據(jù)來防止未來的意外修改

Immer是如何工作的？

  • 使用 Immer，您會將所有更改應(yīng)用到臨時 draft，它是 currentState 的代理。一旦你完成了所有的 mutations，Immer 將根據(jù)對 draft state 的 mutations 生成 nextState。這意味著您可以通過簡單地修改數(shù)據(jù)來與數(shù)據(jù)交互，同時保留不可變數(shù)據(jù)的所有好處

  • 使用 Immer 就像擁有一個私人助理。助手拿一封信（當(dāng)前狀態(tài)）并給您一份副本（草稿）以記錄更改。完成后，助手將接受您的草稿并為您生成真正不變的最終字母（下一個狀態(tài)）

Immer優(yōu)點

  • 深度更新輕而易舉
  • 開箱即用的結(jié)構(gòu)共享
  • 開箱即用的對象凍結(jié)
  • 代碼簡潔
  • 小巧：3KB gzip

使用

state + Immer

useImmer

  • 替代 state

  • 本文開始的例子使用 useImmer
import { FC, useEffect } from 'react';
import { useImmer } from '@hooks/useImmer';

const App: FC = () => {
  const [list, setList] = useImmer({ a: 1 });

  useEffect(() => {
    // setList({ a: 1 });
    setList(draft => {
      draft.a = 1;
    });
  }, []);

  console.log('測試');

  return (
    <>
      <h1>Hello Web3 React {list.a}</h1>
    </>
  );
};

export default App;

觀察控制臺，發(fā)現(xiàn)已經(jīng)沒有無意義渲染的提示了，It's wonderful!

  • 注意：Immer 并沒有 Immutable 解決的那么徹底，我們不能直接給draft賦值，而在draft上操作是極好的
useEffect(() => { 
  // setList({ a: 1 });
  setList(draft => {
    draft.a = 1;
  }); 
},[]);

自己動手實現(xiàn)hooks-useImmer

import { useCallback, useState } from 'react';
import { produce, Draft, freeze } from 'immer';

/**
 * 定義函數(shù)的簽名
 * initialState 可以是一個數(shù)據(jù)，也可以是一個函數(shù)
 * useImmer 返回元組，類似 [state, setState] = useImmer(data);
 * Draft 中間狀態(tài)
 * (() => S) 自執(zhí)行函數(shù)
 */
export type DraftFunction<S> = (draft: Draft<S>) => void;
export type Updater<S> = (arg: S | DraftFunction<S>) => void;
export type ImmerHook<S> = [S, Updater<S>];
export function useImmer<S = any>(initialState: S | (() => S)): ImmerHook<S>;

/**
 * 實現(xiàn)
 * @param initialState
 */
export function useImmer<T>(initialState: T) {
  // const [state, setState] = useState(initialState);
  // 凍結(jié) state，第二參數(shù) true，表示深度凍結(jié)，對象不能修改了
  const [value, updateValue] = useState(() =>
    freeze(typeof initialState === 'function' ? initialState() : initialState, true)
  );

  // 使用 useCallback，放置組件間傳遞，產(chǎn)生句柄
  return [
    value,
    useCallback((updater: Updater<T>) => {
      if (typeof updater === 'function') {
        updateValue(produce(updater));
      } else {
        updateValue(freeze(updater));
      }
    }, []),
  ];
}

以上就是一文詳解React渲染優(yōu)化之useImmer的詳細(xì)內(nèi)容，更多關(guān)于React渲染優(yōu)化useImmer的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • React可定制黑暗模式切換開關(guān)組件

    React可定制黑暗模式切換開關(guān)組件

    這篇文章主要為大家介紹了React可定制黑暗模式切換開關(guān)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • React學(xué)習(xí)筆記之條件渲染（一）

    React學(xué)習(xí)筆記之條件渲染（一）

    條件渲染在React里就和js里的條件語句一樣。下面這篇文章主要給大家介紹了關(guān)于React學(xué)習(xí)記錄之條件渲染的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
    2017-07-07
  • 每天一個hooks學(xué)習(xí)之useUpdateEffect

    每天一個hooks學(xué)習(xí)之useUpdateEffect

    這篇文章主要為大家介紹了每天一個hooks學(xué)習(xí)之useUpdateEffect使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-05-05
  • React 子組件向父組件傳值的方法

    React 子組件向父組件傳值的方法

    本篇文章主要介紹了React 子組件向父組件傳值的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • React中props使用教程

    React中props使用教程

    props是組件（包括函數(shù)組件和class組件）間的內(nèi)置屬性，用其可以傳遞數(shù)據(jù)給子節(jié)點，props用來傳遞參數(shù)。組件實例化過程中，你可以向其中傳遞一個參數(shù)，這個參數(shù)會在實例化過程中被引用
    2022-09-09
  • create-react-app項目配置全解析

    create-react-app項目配置全解析

    這篇文章主要為大家介紹了create-react-app項目配置全解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-06-06
  • React事件綁定詳解

    React事件綁定詳解

    這篇文章主要為大家介紹了React事件綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2021-12-12
  • React中使用UMEditor的方法示例

    React中使用UMEditor的方法示例

    這篇文章主要介紹了React中使用UMEditor的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • React如何利用相對于根目錄進(jìn)行引用組件詳解

    React如何利用相對于根目錄進(jìn)行引用組件詳解

    這篇文章主要給大家介紹了關(guān)于React如何使用相對于根目錄進(jìn)行引用組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-10-10
  • antd?table動態(tài)修改表格高度的實現(xiàn)

    antd?table動態(tài)修改表格高度的實現(xiàn)

    本文主要介紹了antd?table動態(tài)修改表格高度的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07

最新評論