0

react-fiber-resources

Resources for React Fiber

Github 資源庫
主要指標

Github星跟蹤圖

React Fiber resources PRs Welcome

This is a repository of resources for React Fiber.

React Fiber is a new React reconciler algorithm, which is used from v16.

Try React Fiber asynchronous rendering!

You can try React Fiber asynchronous rendering by the following ways.

1. Use React.unstable_ConcurrentMode

React.unstable_ConcurrentMode is a Component to make updates in child components asynchronous, which means the updates are treated as Low Priority.

const ConcurrentMode = React.unstable_ConcurrentMode;

<ConcurrentMode>
  <App /> // Low Priority by default
</ConcurrentMode>

If you'd like to use synchronous updates inside the component, you can use ReactDOM.flushSync(cb).
Inside of the ReactDOM.flushSync callback, the updates are treated as Sync Priority, which is the default priority of v16.

ReactDOM.flushSync(() => {
    // Sync Priority for use input or an animation etc
});

Examples

You can try the React Fiber's time slicing feature in the following example.
In the example, you would realize that low priorities updates don't block sync priority updates.
If you can't get any diferrence between Async mode and Sync mode, you should use CPU throttling on Chrome :smile:

How to contribute React Fiber

React internal algorithm

If you are not familiar with React internals, I recommend you to read the documentations, which are very helpful.

React Fiber

Articles & Slides

Videos

React Fiber function call stacks

[Note] React Fiber now behaves as synchronous by default. See #8127.
This call stacks are results in the time when it behaved as asynchronous.

ReactDOMFiber

React Fiber function call stack

ReactDOM

ReactDOM function call stack

ReactDOMFiber with 10000 items (Async Scheduling)

React Fiber function call stack with 10000 items (async)

--- working asynchronously using requestIdleCallback -------------------------------------------------, ------- Fiber ---------------    ------- Fiber ---------------    ------ Fiber ---------------, beginWork -> completeWork, ->, beginWork -> completeWork, ->, beginWork -> completeWork, ..., -----------------------------   ------------------------------    ----------------------------, ------------------------------------------------------------------------------------------------------
                      ↓↓↓
-----------------------------------------------------------------------, commitAllWork(flush side effects computed in the above to the host), -----------------------------------------------------------------------

ReactDOMFiber with 10000 items (Sync Scheduling)

React Fiber function call stack with 10000 items (sync)

ReactDOM with 10000 items

ReactDOMFiber function call stack with 10000 items

React Fiber call tree

ReactDOMFiber call tree

Custom Renderer Interface

You should implement the following interface when create a custom fiber renderer.

Toy custom renderers

ReactConsole.render(
  <>
    <red>Hello</red>
    <yellow>World</yellow>
    <cyan>React</cyan>
    <rainbow>Custom Renderer!</rainbow>
  </>,
  () => console.log(colors.inverse('##### Update ######'))
);
ReactConsole.render(
  <>
    <green>Hello</green>
    <yellow>World2</yellow>
    <cyan>React</cyan>
  </>
);
  • Voice Renderer
    ReactVoice.render(
      <>
        <alex>Hello</alex>
        <victoria>React Fiber</victoria>
      </>
    );

ReactNoop

ReactNoop is a renderer for React Fiber, which is using for testing and debugging.
It is very useful to understand React Fiber renderer!! :eyes:

Bonus: You should watch ReactIncremental-test.internal.js, which helps to understand what React Fiber makes it possible

主要指標

概覽
名稱與所有者koba04/react-fiber-resources
主編程語言JavaScript
編程語言JavaScript (語言數: 1)
平台
許可證MIT License
所有者活动
創建於2016-10-13 15:48:16
推送於2021-02-11 10:35:08
最后一次提交2021-02-11 19:35:08
發布數0
用户参与
星數790
關注者數24
派生數44
提交數150
已啟用問題?
問題數7
打開的問題數0
拉請求數17
打開的拉請求數0
關閉的拉請求數0
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?