react解析:renderの中のudate(四)

5068 ワード

react.js javascript

Reactのソースコード解析に感謝します.この文章は彼の文章を読み終わった上で、彼の文章を分解して加工します.yckは本当に素晴らしいと思います.
Reactバージョンは16.8.6で、ソースの読み取りについては、yck reactソース解析に移行することができます.
本論文の永久有効リンク:react解析:renderの中のupadate(四)
前の章では、rootデータノードは存在しない、つまりcreateFiber Root関数によってFiberRootを作成する、FiberRoot対象はReactアプリケーション全体の起点であり、Reactアプリケーション更新中の各種情報も記録している.
次にお話ししたいのは、root唄が創設されたら、また何が起こるかということです.
legacyRender Subtree IntoContiner関数
次は前の部分につながっています.前の章を見ることができますか?
yck:ReactDOMソース554行legacyRender Subtree IntoContiner

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
) {
    //     ，container      _reactRootContainer  
    let root: Root = (container._reactRootContainer: any);
    if (!root) {
        //     root  
        
        unbatchedUpdates(() => {
            if (parentComponent != null) {
                root.legacy_renderSubtreeIntoContainer(
                    parentComponent,
                    children,
                    callback,
                );
            } else {
                root.render(children, callback);
            }
        });
    }
}

rootが創建されたばかりの時parentComponent普通はnullです.unbatchedUpdates関数は、React内部では一括更新を行わないこと、つまり複数のsetsStateを一つにまとめる必要がないことを知らせる役割を果たしています.(set Stateは後の章で話します)
ここで実際に呼び出されたのはroot.render関数で、rootはReactRootの実例オブジェクト、すなわち呼び出しroot.render == ReactRoot.prototype.render .
React Root.prototype.render関数
yck:ReactRootソース377行ReactRoot.prototype.render

ReactRoot.prototype.render = function(
  children: ReactNodeList,
  callback: ?() => mixed,
): Work {
  //     FiberRoot
  const root = this._internalRoot;
  const work = new ReactWork();
  callback = callback === undefined ? null : callback;

  //     callback，  push   work     
  if (callback !== null) {
    work.then(callback);
  }
  // work._onCommit              
  updateContainer(children, root, null, work._onCommit);
  return work;
};

関数のパラメータchildrenReactElementノードオブジェクトcallbackコールバック関数です.ReactWork例のオブジェクトの主な役割は、フィードバック配列を維持することであり、yck:ReactWorkソース327行が確認でき、着信パラメータにcalbackがあれば、それをマウントReactWorkインスタンスオブジェクトに登録することである.
次にudateContiner関数が何をするかを見てみます.
udateContiner関数
yck:React Fiber Reconcilerソース284行udateContiner

export function updateContainer(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component,
  callback: ?Function,
): ExpirationTime {
  const current = container.current;
  //     
  const currentTime = requestCurrentTime();
  // expirationTime      ，         
  // sync        ，          
  const expirationTime = computeExpirationForFiber(currentTime, current);
  return updateContainerAtExpirationTime(
    element,
    container,
    parentComponent,
    expirationTime,
    callback,
  );
}

container.currentつまりFiber Rootから取り出されるRootFiberオブジェクト、currentTime現在距離Reactアプリケーション初期化の時間です.expirationTime字面では期限切れという意味ですが、後は特別に1章の時間をかけてこの2つを紹介します.この2つの時間もReactアプリケーションのスケジュールのポイントです.
scheduleRootUpdate関数
udateContiner AtExpirationTime関数が実際に呼び出されたのはscheduleRootUpdate関数です.以下、scheduleRootUpdate関数の役割を説明します.
yck:React Fiber Reconcilerソース114行scheduleRootUpdate

function scheduleRootUpdate(
  current: Fiber,
  element: ReactNodeList,
  expirationTime: ExpirationTime,
  callback: ?Function,
) {
  //      update，            
  const update = createUpdate(expirationTime);
  update.payload = {element};

  // render       
  callback = callback === undefined ? null : callback;
  if (callback !== null) {
    update.callback = callback;
  }

  flushPassiveEffects();
  //   update   ，             queue（    ），              
  enqueueUpdate(current, update);
  scheduleWork(current, expirationTime);

  return expirationTime;
}

以下はudateオブジェクトの中の属性です.

// update    
export type Update = {
  //        
  expirationTime: ExpirationTime,

  // export const UpdateState = 0;
  // export const ReplaceState = 1;
  // export const ForceUpdate = 2;
  // export const CaptureUpdate = 3;
  //        ，      
  tag: 0 | 1 | 2 | 3,
  //     ，  `setState`        
  payload: any,
  //      ，`setState`，`render`  
  callback: (() => mixed) | null,

  //        
  next: Update | null,
  //      `side effect`
  nextEffect: Update | null,
};

DutateオブジェクトはReactアプリケーションメンテナンスのタスクキューに挿入されます.あなたがset Stateであろうと、ReactDOM.renderであろうと、Reactアプリケーションの更新は同じです.この関数の中心的な役割は、キューを作成または取得し、udateオブジェクトをキューに挿入して更新することです.scheduleWork関数はタスクスケジュールのものです.
詳細:
react解析:React.creat Element(一)
react解析:React.Children(二)
react解析:renderのfiber Root(三)
参考:
yck:剖析Reactソース
Jokcyの『Reactソース解析』:react.jokcy.me/
ps:ついでに自分の個人公称を押してください.Yopai、興味がある人は関心を持って、毎週不定期に更新して、世界の楽しみを増やすことができます.

React-Nativeのindex.ios.js解読