国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

精讀《react-easy-state 源碼》

curlyCheng / 2500人閱讀

摘要：會自動觸發(fā)函數(shù)內(nèi)回調(diào)函數(shù)的執(zhí)行。因此利用并將依賴置為使代碼在所有渲染周期內(nèi)，只在初始化執(zhí)行一次。同時代碼里還對等公共方法進行了包裝，讓這些回調(diào)函數(shù)中自帶效果。前端精讀幫你篩選靠譜的內(nèi)容。

1. 引言

react-easy-state 是個比較有趣的庫，利用 Proxy 創(chuàng)建了一個非常易用的全局數(shù)據(jù)流管理方式。

import React from "react";
import { store, view } from "react-easy-state";

const counter = store({ num: 0 });
const increment = () => counter.num++;

export default view(() => );

上手非常輕松，通過 store 創(chuàng)建一個數(shù)據(jù)對象，這個對象被任何 React 組件使用時，都會自動建立雙向綁定，任何對這個對象的修改，都會讓使用了這個對象的組件重渲染。

當(dāng)然，為了實現(xiàn)這一點，需要對所有組件包裹一層 view。

2. 精讀

這個庫利用了 nx-js/observer-util 做 Reaction 基礎(chǔ) API，其他核心功能分別是 store view batch，所以我們就從這四個點進行解讀。

Reaction

這個單詞名叫 “反應(yīng)”，是實現(xiàn)雙向綁定庫的最基本功能單元。

擁有最基本的兩個單詞和一個概念：observable observe 與自動觸發(fā)執(zhí)行的特性。

import { observable, observe } from "@nx-js/observer-util";

const counter = observable({ num: 0 });
const countLogger = observe(() => console.log(counter.num));

// 會自動觸發(fā) countLogger 函數(shù)內(nèi)回調(diào)函數(shù)的執(zhí)行。
counter.num++;

在第 35 期精讀 精讀《dob - 框架實現(xiàn)》 “抽絲剝繭，實現(xiàn)依賴追蹤” 一節(jié)中有詳細介紹實現(xiàn)原理，這里就不贅述了。

有了一個具有反應(yīng)特性的函數(shù)，與一個可以 “觸發(fā)反應(yīng)” 的對象，那么實現(xiàn)雙向綁定更新 View 就不遠了。

store

react-easy-state 的 store 就是 observable(obj) 包裝一下，唯一不同是，由于支持本地數(shù)據(jù)：

import React from "react"
import { view, store } from "react-easy-state"

export default view(() => {
  const counter = store({ num: 0 })
  const increment = () => counter.num++
  return {counter.num}
})

所以當(dāng)監(jiān)測到在 React 組件內(nèi)部創(chuàng)建 store 且是 Hooks 環(huán)境時，會返回：

return useMemo(() => observable(obj), []);

這是因為 React Hooks 場景下的 Function Component 每次渲染都會重新創(chuàng)建 Store，會導(dǎo)致死循環(huán)。因此利用 useMemo 并將依賴置為 [] 使代碼在所有渲染周期內(nèi)，只在初始化執(zhí)行一次。

更多 Hooks 深入解讀，可以閱讀 精讀《useEffect 完全指南》。
view

根據(jù) Function Component 與 Class Component 的不同，分別進行兩種處理，本文主要介紹對 Function Component 的處理方式，因為筆者推薦使用 Function Component 風(fēng)格。

首先最外層會套上 memo，這類似 PureComponent 的效果：

return memo(/**/);

然后構(gòu)造一個 forceUpdate 用來強制渲染組件：

const [, forceUpdate] = useState();

之后，只要利用 observe 包裹組件即可，需要注意兩點：

使用剛才創(chuàng)建的 forceUpdate 在 store 修改時調(diào)用。

observe 初始化不要執(zhí)行，因為初始化組件自己會渲染一次，再渲染一次就會造成浪費。

所以作者通過 scheduler lazy 兩個參數(shù)完成了這兩件事：

const render = useMemo(
  () =>
    observe(Comp, {
      scheduler: () => setState({}),
      lazy: true
    }),
  []
);

return render;

最后別忘了在組件銷毀時取消監(jiān)聽：

useEffect(() => {
  return () => unobserve(render);
}, []);
batch

這也是雙向綁定數(shù)據(jù)流必須解決的經(jīng)典問題，批量更新合并。

由于修改對象就觸發(fā)渲染，這個過程太自動化了，以至于我們都沒有機會告訴工具，連續(xù)的幾次修改能否合并起來只觸發(fā)一次渲染。 尤其是 For 循環(huán)修改變量時，如果不能合并更新，在某些場景下代碼幾乎是不可用的。

所以 batch 就是為解決這個問題誕生的，讓我們有機會控制合并更新的時機：

import React from "react";
import { view, store, batch } from "react-easy-state";

const user = store({ name: "Bob", age: 30 });

function mutateUser() {
  // this makes sure the state changes will cause maximum one re-render,
  // no matter where this function is getting invoked from
  batch(() => {
    user.name = "Ann";
    user.age = 32;
  });
}

export default view(() => (
  

    name: {user.name}, age: {user.age}
  

));

react-easy-state 通過 scheduler 模塊完成 batch 功能，核心代碼只有五行：

export function batch(fn, ctx, args) {
  let result;
  unstable_batchedUpdates(() => (result = fn.apply(ctx, args)));
  return result;
}

利用 unstable_batchedUpdates，可以保證在其內(nèi)執(zhí)行的函數(shù)都不會觸發(fā)更新，也就是之前創(chuàng)建的 forceUpdate 雖然被調(diào)用，但是失效了，等回調(diào)執(zhí)行完畢時再一起批量更新。

同時代碼里還對 setTimeout setInterval addEventListener WebSocket 等公共方法進行了 batch 包裝，讓這些回調(diào)函數(shù)中自帶 batch 效果。

4. 總結(jié)

好了，react-easy-state 神奇的效果解釋完了，希望大家在使用第三方庫的時候都能理解背后的原理。

PS：最后，筆者目前不推薦在 Function Component 模式下使用任何三方數(shù)據(jù)流庫，因為官方功能已經(jīng)足夠好用了！
討論地址是：精讀《react-easy-state》 · Issue #144 · dt-fe/weekly

如果你想?yún)⑴c討論，請 點擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀 - 幫你篩選靠譜的內(nèi)容。

關(guān)注 前端精讀微信公眾號

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103311.html

相關(guān)文章

  • 精讀《源碼學(xué)習(xí)》

    摘要：精讀原文介紹了學(xué)習(xí)源碼的兩個技巧，并利用實例說明了源碼學(xué)習(xí)過程中可以學(xué)到許多周邊知識，都讓我們受益匪淺。討論地址是精讀源碼學(xué)習(xí)如果你想?yún)⑴c討論，請點擊這里，每周都有新的主題，周末或周一發(fā)布。 1. 引言 javascript-knowledge-reading-source-code 這篇文章介紹了閱讀源碼的重要性，精讀系列也已有八期源碼系列文章，分別是： 精讀《Immer.js》源...

    aboutU 評論0 收藏0

  • 精讀《Inject Instance 源碼》

    摘要：引言本周精讀的源碼是這個庫。這個庫的目的是為了實現(xiàn)的依賴注入。精讀那么開始源碼的解析，首先是整體思路的分析。討論地址是精讀源碼如果你想?yún)⑴c討論，請點擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言 本周精讀的源碼是 inject-instance 這個庫。 這個庫的目的是為了實現(xiàn) Class 的依賴注入。 比如我們通過 inject 描述一個成員變量，...

    hsluoyz 評論0 收藏0

  • 精讀《syntax-parser 源碼》

    摘要：引言是一個版語法解析器生成器，具有分詞語法樹解析的能力。實現(xiàn)函數(shù)用鏈表設(shè)計函數(shù)是最佳的選擇，我們要模擬調(diào)用棧了。但光標(biāo)所在的位置是期望輸入點，這個輸入點也應(yīng)該參與語法樹的生成，而錯誤提示不包含光標(biāo)，所以我們要執(zhí)行兩次。 1. 引言 syntax-parser 是一個 JS 版語法解析器生成器，具有分詞、語法樹解析的能力。 通過兩個例子介紹它的功能。 第一個例子是創(chuàng)建一個詞法解析器 my...

    yuanxin 評論0 收藏0

  • 精讀《Epitath 源碼 - renderProps 新用法》

    摘要：精讀源碼一共行，我們分析一下其精妙的方式。更多討論討論地址是精讀新用法如果你想?yún)⑴c討論，請點擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀幫你篩選靠譜的內(nèi)容。 1 引言 很高興這一期的話題是由 epitath 的作者 grsabreu 提供的。 前端發(fā)展了 20 多年，隨著發(fā)展中國家越來越多的互聯(lián)網(wǎng)從業(yè)者涌入，現(xiàn)在前端知識玲瑯滿足，概念、庫也越來越多。雖然內(nèi)容越來越多，但作為個體的...

    Magicer 評論0 收藏0

  • 精讀《React PowerPlug 源碼》

    摘要：今天我們就來解讀一下的源碼。比較有意思，將定時器以方式提供出來，并且提供了方法。實現(xiàn)方式是，在組件內(nèi)部維護一個定時器，實現(xiàn)了組件更新銷毀時的計時器更新銷毀操作，可以認為這種定時器的生命周期綁定了組件的生命周期，不用擔(dān)心銷毀和更新的問題。 1. 引言 React PowerPlug 是利用 render props 進行更好狀態(tài)管理的工具庫。 React 項目中，一般一個文件就是一個類，...

    teren 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<