一文帮你理解PReact10.5.13源码

import { empty_obj, empty_arr } from './constants';
import { commitroot, diff } from './diff/index';
import { createelement, fragment } from './create-element';
import options from './options';

/**
 * render a preact virtual node into a dom element
 * @param {import('./internal').componentchild} vnode the virtual node to render
 * @param {import('./internal').preactelement} parentdom the dom element to
 * render into
 * @param {import('./internal').preactelement | object} [replacenode] optional: attempt to re-use an
 * existing dom tree rooted at `replacenode`
 */
export function render(vnode, parentdom, replacenode) {
 if (options._root) options._root(vnode, parentdom);

 // we abuse the `replacenode` parameter in `hydrate()` to signal if we are in
 // hydration mode or not by passing the `hydrate` function instead of a dom
 // element..
 let ishydrating = typeof replacenode === 'function';

 // to be able to support calling `render()` multiple times on the same
 // dom node, we need to obtain a reference to the previous tree. we do
 // this by assigning a new `_children` property to dom nodes which points
 // to the last rendered tree. by default this property is not present, which
 // means that we are mounting a new tree for the first time.
  // 为了支持多次在一个dom节点上调用render函数，需要在dom节点上添加一个饮用，用来获取指向上一次渲染的虚拟dom树。
  // 这个属性默认是指向空的，也意味着我们第一次正在装备一颗新的树
  // 所以开始时这里的oldvnode是空（不论ishydrating的值），但是如果重复在这个节点上调用render那oldvnode是有值的
 let oldvnode = ishydrating
  ? null
  : (replacenode && replacenode._children) || parentdom._children;

 // 用fragment包裹一下vnode，同时给replacenode和parentdom的_children赋值
  vnode = (
  (!ishydrating && replacenode) ||
  parentdom
 )._children = createelement(fragment, null, [vnode]);

 // list of effects that need to be called after diffing.
  // 用来放置diff之后需要进行各种生命周期处理的component，比如cdm、cdu；componentwillunmount在diffchildren的unmount函数中执行不在commitroot时执行
 let commitqueue = [];
 diff(
  parentdom, // 这个使用parentdom的_children属性已经指向[vnode]了
  // determine the new vnode tree and store it on the dom element on
  // our custom `_children` property.
  vnode,
  oldvnode || empty_obj, // 旧的树
  empty_obj,
  parentdom.ownersvgelement !== undefined,
    // excessdomchildren，这个参数用来做dom复用的作用
  !ishydrating && replacenode
   ? [replacenode]
   : oldvnode
   ? null
   : parentdom.firstchild // 如果parentdom有子节点就会把整个子节点作为待复用的节点使用
   ? empty_arr.slice.call(parentdom.childnodes)
   : null,
  commitqueue,
    // olddom，在后续方法中用来做标记插入位置使用
  !ishydrating && replacenode
   ? replacenode
   : oldvnode
   ? oldvnode._dom
   : parentdom.firstchild,
  ishydrating
 );

 // flush all queued effects
  // 调用所有commitqueue中的节点_rendercallbacks中的方法
 commitroot(commitqueue, vnode);
}

/**
 * update an existing dom element with data from a preact virtual node
 * @param {import('./internal').componentchild} vnode the virtual node to render
 * @param {import('./internal').preactelement} parentdom the dom element to
 * update
 */
export function hydrate(vnode, parentdom) {
 render(vnode, parentdom, hydrate);
}

import { createcontext, h, render } from 'preact';

const fontcontext = createcontext(20);

function child() {
 return <fontcontext.consumer>
 {fontsize=><div style={{fontsize:fontsize}}>child</div>}
 </fontcontext.consumer>
}
function app(){
 return <child/>
}
render(
 <fontcontext.provider value={26}>
 <app/>
 </fontcontext.provider>,
 document.getelementbyid('app')
);

import { enqueuerender } from './component';

export let i = 0;

export function createcontext(defaultvalue, contextid) {
 contextid = '__cc' + i++; // 生成一个唯一id

 const context = {
  _id: contextid,
  _defaultvalue: defaultvalue,
  /** @type {import('./internal').functioncomponent} */
  consumer(props, contextvalue) {
   // return props.children(
   //  context[contextid] ? context[contextid].props.value : defaultvalue
   // );
   return props.children(contextvalue);
  },
  /** @type {import('./internal').functioncomponent} */
  provider(props) {
   if (!this.getchildcontext) { // 第一次调用时进行一些初始化操作
    let subs = [];
    let ctx = {};
    ctx[contextid] = this;
       
       // 在diff操作用，如果判断一个组件在comsumer中，会调用sub进行订阅；
       // 同时这个节点后续所有diff的地方都会带上这个context，调用sub方法进行调用
       // context具有层级优先级，组件会先加入最近的context中
    this.getchildcontext = () => ctx; 

    this.shouldcomponentupdate = function(_props) {
     if (this.props.value !== _props.value) {
      // i think the forced value propagation here was only needed when `options.debouncerendering` was being bypassed:
      // http://www.51sjk.com/Upload/Articles/1/0/258/258222_20210630003144210.jpg
      // in those cases though, even with the value corrected, we're double-rendering all nodes.
      // it might be better to just tell folks not to use force-sync mode.
      // currently, using `usecontext()` in a class component will overwrite its `this.context` value.
      // subs.some(c => {
      //  c.context = _props.value;
      //  enqueuerender(c);
      // });

      // subs.some(c => {
      //  c.context[contextid] = _props.value;
      //  enqueuerender(c);
      // });
            // enqueuerender最终会进入rendercomponent函数，进行diff、commitroot、updateparentdompointers等操作
      subs.some(enqueuerender);
     }
    };

    this.sub = c => {
     subs.push(c);// 进入订阅数组，
     let old = c.componentwillunmount;
     c.componentwillunmount = () => { // 重写componentwillunmount
      subs.splice(subs.indexof(c), 1);
      if (old) old.call(c);
     };
    };
   }

   return props.children;
  }
 };

 // devtools needs access to the context object when it
 // encounters a provider. this is necessary to support
 // setting `displayname` on the context object instead
 // of on the component itself. see:
 // http://www.all.com/files/Articles/416/0/183/183754_20210624102214763.html#contextdisplayname
 // createcontext最终返回的是一个context对象，带着provider和consumer两个函数
 // 同时consumber函数的contexttype和provider函数的_contextref属性都指向context
 return (context.provider._contextref = context.consumer.contexttype = context);
}

if (c.getchildcontext != null) {
    globalcontext = assign(assign({}, globalcontext), c.getchildcontext());
   }

   if (!isnew && c.getsnapshotbeforeupdate != null) {
    snapshot = c.getsnapshotbeforeupdate(oldprops, oldstate);
   }

   let istoplevelfragment =
    tmp != null && tmp.type === fragment && tmp.key == null;
   let renderresult = istoplevelfragment ? tmp.props.children : tmp;

   diffchildren(
    parentdom,
    array.isarray(renderresult) ? renderresult : [renderresult],
    newvnode,
    oldvnode,
    globalcontext,
    issvg,
    excessdomchildren,
    commitqueue,
    olddom,
    ishydrating
   );

// instantiate the new component
    if ('prototype' in newtype && newtype.prototype.render) {
     // @ts-ignore the check above verifies that newtype is suppose to be constructed
     newvnode._component = c = new newtype(newprops, componentcontext); // eslint-disable-line new-cap
    } else {
     // @ts-ignore trust me, component implements the interface we want
     newvnode._component = c = new component(newprops, componentcontext);
     c.constructor = newtype;
     c.render = dorender;
    }

/** the `.render()` method for a pfc backing instance. */
function dorender(props, state, context) {
 return this.constructor(props, context);
}