ReactDom render原理剖析

最新推荐文章于 2024-07-26 19:17:00 发布
最新推荐文章于 2024-07-26 19:17:00 发布
阅读量1.1k 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5ba20c63e51d450e5c475810
版权

复习一下常常写的JSX

ReactDOM.render(
    <h1>Hello World</h1>, 
    document.getElementById('root')
);

// babel 转义之后,JSX语法其实是React.createElement()的语法糖
ReactDOM.render(React.createElement(
    'h1', // type--节点类型
    null, // props
    'Hello World' // children
), document.getElementById('root'));

// createElement 部分代码详细过程不做分析
export function createElement(type, config, children) {
  ...
  // 返回一个ReactElement
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}
// ReactElement 部分代码
const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // 标记唯一识别的元素类型
    $$typeof: REACT_ELEMENT_TYPE,
    // 元素的内置类型
    type: type,
    key: key,
    ref: ref,
    props: props,
    // 记录创建此元素的组件
    _owner: owner,
  };
  ...
  return element; // 最后返回一个element
 }
复制代码

createElement对应的源码部分是ReactElement.js，感兴趣可以自己看看

这里不细说JSX,感兴趣可以看看官网介绍JSX

ReactDom.render 本地渲染过程

版本16之前，不做分析，详细过程参考链接 ReactDom 组件渲染过程

版本16之后，渲染过程分析

声明一个简单组件

class Simple extends React.Component {
  render() {
    return (
      <h1>Simple test</h1>
    )
  }
}
console.log(<Simple />); 
复制代码

经过babel转义之后

var Simple = (function(_React$Component2) {
  // 继承 Component 的属性和方法
  _inherits(Simple, _React$Component2);

  function Simple() {
    _classCallCheck(this, Simple);

    return _possibleConstructorReturn(
      this,
      (Simple.__proto__ || Object.getPrototypeOf(Simple)).apply(this, arguments)
    );
  }

  _createClass(Simple, [
    {
      key: "render",
      value: function render() {
        return _react2.default.createElement("h1", null, "Simple text");
      }
    }
  ]);

  return Simple;
})(_react2.default.Component);

// 直接打印的是 createElement 返回的对象： 包括当前节点的所有信息。 即： `render` 方法
console.log(_react2.default.createElement(Simple, null));

// 实际返回 构造函数。
exports.default = Simple;
复制代码

打印结果

{$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null, props: {…}, …}
  $$typeof:Symbol(react.element)
  key:null
  props:{}
  ref:null
  type:ƒ Simple()
  _owner:null
  _store:{validated: false}
  _self:null
  _source:{fileName: "D:\CodeSpace\Scheele2\src\index.js", lineNumber: 33}
  __proto__:Object
复制代码

组件的挂载

先看chrome浏览器render过程，给大家一个印象，然后根据函数，逐一分析涉及DOM的部分

render --ReactDOM.render

源码位置

const ReactDOM: Object = {
    ...
 render(
    element: React$Element<any>,
    container: DOMContainer,
    callback: ?Function,
  ) {
    return legacyRenderSubtreeIntoContainer(
      null, // parent
      element, // children
      container, // Dom容器
      false, // 渲染标记
      callback, // 回调
    );
  },
}
复制代码

legacyRenderSubtreeIntoContainer

// 结合上方的render函数来看
function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
) {
 ...
 let root: Root = (container._reactRootContainer: any);
  if (!root) {
    // 初始化挂载，获得React根容器对象
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
}
}
复制代码

ReactDOM.legacyCreateRootFromDOMContainer

function legacyCreateRootFromDOMContainer(
  container: DOMContainer,
  forceHydrate: boolean, // 渲染标记
): Root {
  const shouldHydrate =
    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
  // 第一次渲染，删除其余的所有节点
  if (!shouldHydrate) {
    let warned = false;
    let rootSibling;
    while ((rootSibling = container.lastChild)) {
      ...
      container.removeChild(rootSibling);
    }
  }
  ...
  const isAsync = false; // 是否异步
 // 返回一个根节点对象
  return new ReactRoot(container, isAsync, shouldHydrate);
}
  ...
// 通过DOMRenderer创建一个root
function ReactRoot(container: Container, isAsync: boolean, hydrate: boolean) {
  const root = DOMRenderer.createContainer(container, isAsync, hydrate);
  this._internalRoot = root;
}
复制代码

源码位置

// createContainer涉及到了React新推出的Fiber
export function createContainer(
  containerInfo: Container,
  isAsync: boolean,
  hydrate: boolean,
): OpaqueRoot {
  return createFiberRoot(containerInfo, isAsync, hydrate);
}
复制代码

源码位置

// 最终返回的对象
export function createFiberRoot(
  containerInfo: any,
  isAsync: boolean,
  hydrate: boolean,
): FiberRoot {
 ...
 // 没有改造成Fiber之前，节点类型可能就几种，Fiber之后嘛...
 // 这里是将节点初始化成Fiber的节点，感兴趣可以看看Fiber，这里不细说
 const uninitializedFiber = createHostRootFiber(isAsync);
 let root;
 // 这个是个 export const enableSchedulerTracing = __PROFILE__;
  if (enableSchedulerTracing) {
   ...
  }else {
   // 最后返回的root对象
    root = ({
      current: uninitializedFiber,
      containerInfo: containerInfo, // DOM容器
      pendingChildren: null,

      earliestPendingTime: NoWork,
      latestPendingTime: NoWork,
      earliestSuspendedTime: NoWork,
      latestSuspendedTime: NoWork,
      latestPingedTime: NoWork,

      didError: false,

      pendingCommitExpirationTime: NoWork,
      finishedWork: null,
      timeoutHandle: noTimeout,
      context: null,
      pendingContext: null,
      hydrate,
      nextExpirationTimeToWorkOn: NoWork,
      expirationTime: NoWork,
      firstBatch: null,
      nextScheduledRoot: null,
    }: BaseFiberRootProperties);
  }
  uninitializedFiber.stateNode = root;
  return ((root: any): FiberRoot);
}
...
复制代码

unbatchedUpdates

初始化root对象完成之后，调用unbatchedUpdates函数

 // 不管是if，还是else，本质上都是初始化work = new ReactWork()，然后执行updateContainer操作
 DOMRenderer.unbatchedUpdates(() => {
      if (parentComponent != null) { // 如果根节点不为空，将节点渲染进去
        root.legacy_renderSubtreeIntoContainer(
          parentComponent,
          children,
          callback,
        );
      } else { // 渲染根节点
        root.render(children, callback);
      }
    });
...
复制代码

ReactRoot.render，updateContainer

ReactRoot.prototype.render = function(
  children: ReactNodeList,
  callback: ?() => mixed,
): Work {
  const root = this._internalRoot;
  const work = new ReactWork();
  callback = callback === undefined ? null : callback;
  ...
  if (callback !== null) {
    work.then(callback);
  }
  // 执行updateContainer函数，返回一个work对象（参数就不解释了吧...）
  DOMRenderer.updateContainer(children, root, null, work._onCommit);
  return work;
};
复制代码

剩下的调用过程(这里主要是react-reconciler部分的代码)

代码量过多，先贴出调用过程

源码位置

// 这些函数调用的过程，可以简单理解成是为了配合Fiber的批度更新以及异步更新而进行的
updateContainerAtExpirationTime(element,container,parentComponent,expirationTime,callback)->
scheduleRootUpdate(current, element, expirationTime, callback) ->
scheduleWork(current, expirationTime) ->
requestWork(root, rootExpirationTime) ->
performWorkOnRoot(root, Sync, false) ->
renderRoot(root, false) -> 
workLoop(isYieldy) -> // 开启一个循环过程，这个函数还是挺有意思的
performUnitOfWork(nextUnitOfWork: Fiber) => Fiber | null ->
beginWork(current, workInProgress, nextRenderExpirationTime) // 这个函数开启一个work流程
复制代码

beginWork

主要作用是根据Fiber对象的tag来对组件进行mount或update

function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
): Fiber | null {
  const updateExpirationTime = workInProgress.expirationTime; // 更新所需时间
  if (
    !hasLegacyContextChanged() &&
    (updateExpirationTime === NoWork ||updateExpirationTime > renderExpirationTime)
  ) {
    ...
  switch (workInProgress.tag) {
    case IndeterminateComponent: { // 不确定的组件类型
     ...
    }
    case FunctionalComponent: { // 函数类型组件
      ...
    }
    ...
    case ClassComponent: { // 对应我们之前创建的组件 Simple
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      // 返回一个classComponent
      return updateClassComponent(
        current,
        workInProgress,
        Component,
        unresolvedProps,
        renderExpirationTime,
      );
    }
    ...
    case HostRoot: // 对应根节点
      return updateHostRoot(current, workInProgress, renderExpirationTime);
    case HostComponent: // 对应 <h1 />
      return updateHostComponent(current, workInProgress, renderExpirationTime);
    case HostText: // 对应Simple test
      return updateHostText(current, workInProgress);
    ... // 后面还有就不一一列举了，感兴趣可以自己看
  }
复制代码

updateClassComponent

主要作用是对未初始化的组件进行初始化，对已初始化的组件进行更新和重用

function updateClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  nextProps,
  renderExpirationTime: ExpirationTime,
) {
    ...
  if (current === null) {
    if (workInProgress.stateNode === null) {
      // 实例化类组件
      constructClassInstance(
        workInProgress, // Fiber更新进度标识
        Component, // 组件
        nextProps, // props
        renderExpirationTime, // 所需时间
      );
      // 初始化mount
      mountClassInstance(
        workInProgress,
        Component,
        nextProps,
        renderExpirationTime,
      );
      shouldUpdate = true;
    } else {
      // 如果已经创建实例，则重用
      shouldUpdate = resumeMountClassInstance(
        workInProgress,
        Component,
        nextProps,
        renderExpirationTime,
      );
    }
 } else {
    shouldUpdate = updateClassInstance(
      current,
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
  }
  return finishClassComponent(
    current,
    workInProgress,
    Component,
    shouldUpdate,
    hasContext,
    renderExpirationTime,
  );
 }
 ...
}
复制代码

mountClassInstance

主要是挂载一些新的生命周期函数，除了比较熟悉的componentWillMount外，还有dev环境下的警告生命周期函数，以及16后才推出的getDerivedStateFromProps

function mountClassInstance(
  workInProgress: Fiber,
  ctor: any,
  newProps: any,
  renderExpirationTime: ExpirationTime,
): void {
  ...
  if (__DEV__) {
    if (workInProgress.mode & StrictMode) {
      ReactStrictModeWarnings.recordUnsafeLifecycleWarnings(
        workInProgress,
        instance,
      );
      ReactStrictModeWarnings.recordLegacyContextWarning(
        workInProgress,
        instance,
      );
    }
    if (warnAboutDeprecatedLifecycles) {
      ReactStrictModeWarnings.recordDeprecationWarnings(
        workInProgress,
        instance,
      );
    }
  }
  // 处理状态更新的操作
  let updateQueue = workInProgress.updateQueue;
  if (updateQueue !== null) {
    processUpdateQueue(
      workInProgress,
      updateQueue,
      newProps,
      instance,
      renderExpirationTime,
    );
    instance.state = workInProgress.memoizedState;
  }
  const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
  if (typeof getDerivedStateFromProps === 'function') { // 挂载新的生命周期函数
    applyDerivedStateFromProps(
      workInProgress,
      ctor,
      getDerivedStateFromProps,
      newProps,
    );
    instance.state = workInProgress.memoizedState;
  }
    if (
    typeof ctor.getDerivedStateFromProps !== 'function' &&
    typeof instance.getSnapshotBeforeUpdate !== 'function' &&
    (typeof instance.UNSAFE_componentWillMount === 'function' ||
      typeof instance.componentWillMount === 'function')
  ) {
    // 如果沒有使用getDerivedStateFromProps就使用componentWillMount
    callComponentWillMount(workInProgress, instance);
    // 如果在这个生命周期中有状态更新，则马上开始处理它
    updateQueue = workInProgress.updateQueue;
    if (updateQueue !== null) {
      processUpdateQueue(
        workInProgress,
        updateQueue,
        newProps,
        instance,
        renderExpirationTime,
      );
      instance.state = workInProgress.memoizedState;
    }
  }
  if (typeof instance.componentDidMount === 'function') {
    workInProgress.effectTag |= Update;
  }
  // 所以说使用getDerivedStateFromProps这个新的状态函数，第一次加载跟更新都会立即执行
}
复制代码

finishClassComponent

调用组件实例的render函数获取需要处理的子元素，并把子元素处理为Fiber类型，处理state和props

function finishClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  shouldUpdate: boolean,
  hasContext: boolean,
  renderExpirationTime: ExpirationTime,
) {
 ...
  //  把子元素转换为Fiber类型，如果子元素为数组的時候，返回第一个Fiber类型子元素
   reconcileChildren( // 感兴趣可以去github看看源码的说明
    current,
    workInProgress,
    nextChildren,
    renderExpirationTime,
  );
  // TODO: Restructure so we never read values from the instance.
  // 处理state和props
  memoizeState(workInProgress, instance.state);
  memoizeProps(workInProgress, instance.props);
  if (hasContext) {
    invalidateContextProvider(workInProgress, Component, true);
  }
  // 返回Fiber类型的子元素
  return workInProgress.child;
}
复制代码

workLoop

workLoop遍历虚拟DOM树，调用performUnitOfWork对子元素进行处理。

function workLoop(isYieldy) {
  if (!isYieldy) {
    // 循环遍历整棵树
    while (nextUnitOfWork !== null) {
      nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    }
  } else {
    // 一直遍历，直到这一次的处理时间用完
    while (nextUnitOfWork !== null && !shouldYield()) {
      nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    }
  }
}
复制代码

performUnitOfWork

调用beginWork对子元素进行处理返回，没有新工作产生，调用completeUnitOfWork开始转换

function performUnitOfWork(workInProgress: Fiber): Fiber | null {
  const current = workInProgress.alternate;
  // 检查是否有其它工作需要展开
  startWorkTimer(workInProgress);
  ...
  let next;
  // 判断是否在一个更新时间内
  if (enableProfilerTimer) {
    if (workInProgress.mode & ProfileMode) {
      startProfilerTimer(workInProgress);
    }
    next = beginWork(current, workInProgress, nextRenderExpirationTime);
    if (workInProgress.mode & ProfileMode) {
      // 记录渲染时间
      stopProfilerTimerIfRunningAndRecordDelta(workInProgress, true);
    }
  } else {
    next = beginWork(current, workInProgress, nextRenderExpirationTime);
  }
  ...
  if (next === null) {
    // 如果没有新的工作产生，则完成当前工作
    next = completeUnitOfWork(workInProgress);
  }
  ReactCurrentOwner.current = null;
  return next;
}
复制代码

completeUnitOfWork

主要作用是将Fiber节点元素转换为真实的DOM节点

function completeUnitOfWork(workInProgress: Fiber): Fiber | null {
  while (true) {
    const returnFiber = workInProgress.return; // 父节点
    const siblingFiber = workInProgress.sibling; // 兄弟节点
    if ((workInProgress.effectTag & Incomplete) === NoEffect) {
      // 在一次渲染周期内
      if (enableProfilerTimer) {
        if (workInProgress.mode & ProfileMode) {
          startProfilerTimer(workInProgress);
        }
        // 调用completeWork转换虚拟DOM
        nextUnitOfWork = completeWork(
          current,
          workInProgress,
          nextRenderExpirationTime,
        );
        if (workInProgress.mode & ProfileMode) {
          // 更新渲染时间
          stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false);
        }
      } else {
        nextUnitOfWork = completeWork(
          current,
          workInProgress,
          nextRenderExpirationTime,
        );
      }
      let next = nextUnitOfWork;
      stopWorkTimer(workInProgress); // 结束一个work
      resetChildExpirationTime(workInProgress, nextRenderExpirationTime);
      ...
      if (next !== null) { // 如果还有新的工作，return回去，继续执行
        stopWorkTimer(workInProgress);
        return next;
      }
      // 这个地方就不注释了，源码里面已经解释的足够清楚
      if (
        returnFiber !== null &&
        // Do not append effects to parents if a sibling failed to complete
        (returnFiber.effectTag & Incomplete) === NoEffect
      ) {
        // Append all the effects of the subtree and this fiber onto the effect
        // list of the parent. The completion order of the children affects the
        // side-effect order.
        if (returnFiber.firstEffect === null) {
          returnFiber.firstEffect = workInProgress.firstEffect;
        }
        if (workInProgress.lastEffect !== null) {
          if (returnFiber.lastEffect !== null) {
            returnFiber.lastEffect.nextEffect = workInProgress.firstEffect;
          }
          returnFiber.lastEffect = workInProgress.lastEffect;
        }
        // If this fiber had side-effects, we append it AFTER the children's
        // side-effects. We can perform certain side-effects earlier if
        // needed, by doing multiple passes over the effect list. We don't want
        // to schedule our own side-effect on our own list because if end up
        // reusing children we'll schedule this effect onto itself since we're
        // at the end.
        const effectTag = workInProgress.effectTag;
        // Skip both NoWork and PerformedWork tags when creating the effect list.
        // PerformedWork effect is read by React DevTools but shouldn't be committed.
        if (effectTag > PerformedWork) {
          if (returnFiber.lastEffect !== null) {
            returnFiber.lastEffect.nextEffect = workInProgress;
          } else {
            returnFiber.firstEffect = workInProgress;
          }
          returnFiber.lastEffect = workInProgress;
        }
      }
      ...
      if (siblingFiber !== null) {
        // 如果有兄弟节点，则返回一个兄弟节点
        return siblingFiber;
      } else if (returnFiber !== null) {
        // 完成这次工作
        workInProgress = returnFiber;
        continue;
      } else {
        // 已经遍历到了根部
        return null;
      }
    }  
  }else{
    ... // 感兴趣自己看  
  }
  return null;
}
复制代码

completeWork

根据Fiber节点类型进行处理，渲染真实DOM

function completeWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
): Fiber | null {
  ...
  switch (workInProgress.tag) {
    ...
    // 只看重点代码
    case HostComponent: {
      popHostContext(workInProgress);
      const rootContainerInstance = getRootHostContainer();
      const type = workInProgress.type;
      if (current !== null && workInProgress.stateNode != null) {
        // 更新
        updateHostComponent(
          current,
          workInProgress,
          type,
          newProps,
          rootContainerInstance,
        );
        if (current.ref !== workInProgress.ref) {
          markRef(workInProgress);
        }
      } else {
        ...
        const currentHostContext = getHostContext();
        let wasHydrated = popHydrationState(workInProgress);
        if (wasHydrated) {
          ...
        } else {
          // 创建并返回DOM元素
          let instance = createInstance(
            type,
            newProps,
            rootContainerInstance,
            currentHostContext,
            workInProgress,
          );
          // 添加节点
          appendAllChildren(instance, workInProgress);
          // 判断是否有其它的渲染器，进行标记
          if (
            finalizeInitialChildren(
              instance,
              type,
              newProps,
              rootContainerInstance,
              currentHostContext,
            )
          ) {
            markUpdate(workInProgress);
          }
          workInProgress.stateNode = instance;
        }
        if (workInProgress.ref !== null) {
          // 如果有ref，则需要调用
          markRef(workInProgress);
        }
      }
      break;
    }
  }
}
复制代码

简单的总结

  1. 首先我们写的JSX语法，都被Babel进行转义，然后使用React.creatElement进行创建，转换为React的元素
  2. 使用ReactDom.render创建root对象，执行root.render。
  3. 一系列函数调用之后，workLoop在一次渲染周期内，遍历虚拟DOM，将这些虚拟DOM传递给performUnitOfWork函数，performUnitOfWork函数开启一次workTime，将虚拟DOM传递给beginWork。
  4. beginWork根据虚拟DOM的类型，进行不同的处理，将子元素处理为Fiber类型，为Fiber类型的虚拟DOM添加父节点、兄弟节点等（就是转换为Fiber树）。
  5. beginWork处理完一次操作之后，返回需要处理的子元素再继续处理，直到沒有子元素（即返回null），
  6. 此时performUnitOfWork调用completeUnitOfWork进行初始化生命周期的挂载，以及调用completeWork进行DOM的渲染。
  7. completeWork对节点类型进行操作，发现是html相关的节点类型，添加渲染为真实的DOM。
  8. 最后将所有的虚拟DOM，渲染为真实的DOM。

组件的卸载 todo.

服务端渲染过程 todo.

未来的瞎扯

在查看源码的过程中，发现涉及异步的操作，都写上了unstable，而这些异步的操作，才是Fiber这个利器展现獠牙的时候，在未来的某个时刻，我会补上这部分的东西

ps: 有不对的地方欢迎斧正

weixin_33912453
关注
React源码解析笔记---ReactDOM.render
ck_1的博客
07-15 711
import ReactDOM from 'react-dom'; ReactDOM.render(<App />, document.getElementById('root)); 源码： 这里只摘录了核心代码 const ReactDOM: Object = { ... render( element: React$Element<any>, // ...
React源码解析系列(六) —— ReactDOM.render
wlqdbtx的博客
12-23 562
在React当中，可以导致更新的方法有三种，setState、forceUpdate和ReactDOM.render这三种。当我们初始化应用时，会在入口js文件中调用ReactDOM.render函数去挂载组件。下面让我们来看看这个方法到底做了什么事情。 ReactDOM的代码在: /packages/react-dom/src/client/ReactDOM.js 我们先来看下Reac...
React入门介绍（1）-ReactDOM.render()等基础
weixin_30340617的博客
06-11 719
React入门介绍-ReactDOM.render()等基础 首先，React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架，它仅涵盖V-view视图层。JSX是javascript的扩展，像Typescript,coffeeScript等一样，都是Javascript的语法糖，最终都要变编译成JS执行，建议使用JSX的代码进行React的开发。...
【React】详解如何获取 DOM 元素
最新发布
lph159的博客
07-26 882
DOM（文档对象模型）是HTML和XML文档的编程接口。它将文档表示为一个由节点构成的树形结构，每个节点代表文档中的一个部分，比如元素、属性或文本。在React中，虽然大多数操作通过虚拟DOM进行，但有时你仍然需要直接操作实际的DOM节点。
ReactDOM.render的渲染原理
qq_32021429的博客
05-25 360
ReactDOM.render的渲染原理 在react项目中，之所以可以在函数/组件中直接写模板结构，是因为最后babel都会帮我们把这些模板转译成 React.createElemen(config) 的形式，这也就是为什么我们在每一个组件中明明没有主动调用React，但是却要引入react的原因。 // 举例 import React from 'react'; import ReactDOM from 'react-dom'; let h = React.createElement( 'div'
React render 方法的原理
Chloeeeeeeee的博客
04-07 509
在 React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用 useState 更改状态不一定导致重新 render。
动画 + 大白话讲清楚React渲染原理
zz_jesse的博客
08-05 597
前言相信很多人跟我之前一样，看到源码两个字觉得触不可及，觉得离自己还很遥远，是需要非常多年的工作经验的大佬才能触及到的领域。就在去年我改变了这个想法，当时被react的几个生命周期执行顺序弄的睡不着觉，为什么有些时候生命周期的执行事与愿违？又为什么数组中必须要加上key属性？为啥在render中不能写setState等等问题......在一系列的问题中，我终于还是打开了那...
七.React原理剖析 React核心api
09-03
它的核心API包括React.createElement、React.Component和ReactDOM.render，这三个接口是理解React工作原理的关键。 1. **React.createElement**: 这个函数是React用于创建虚拟DOM（Virtul DOM）的工具。它接收三个...
React hooks使用与实现原理剖析
Whoopsina的博客
03-29 1570
文章目录1. React hooks介绍2. React hooks使用useState()useReduceruseContextuseEffectuseMemomemo方法useCallbackuseRef3. 自定义hook4. React 路由 Hooks5. React Hooks原理分析useState钩子函数的实现原理useEffect钩子函数的实现原理useReducer钩子函数的实现原理 1. React hooks介绍 React Hooks是用来做什么的？ 对函数型组件进行增强，让函
Hooks 原理解析
baidulixueqin的博客
04-24 1787
Hooks 原理解析 内容 1.分析useState原理和源码 2.useRef的作用 3.useContext的作用 4.Vue3 对比 React 分析useState原理 import React from "react"; import ReactDOM from "react-dom"; const rootElement = document.getElementById("root"); function App() { console.log("App 运行了") const
web前端高级React - React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
lixiaosenlin的专栏
12-30 5926
JSX虚拟DOM渲染为真实DOM的原理和步骤 分析与思考 前面我们已经学习了JSX的一些基本语法，通过前面的学习我们知道：在js文件中通过调用ReactDOM.render()方法，并传入一堆JSX代码（可以理解为虚拟DOM）。当程序运行时这些JSX代码就会被转换为真实的DOM元素然后呈现在页面上；那么这些JSX虚拟DOM是如何被转换为真实DOM的呢，原理又是怎样的呢？ 当我们用react脚手架创建好一个项目后，会生成一个package.json文件，在这个文件的最下面有这样一段代码 "babel
万字长文+图文并茂+全面解析 React 源码 - render 篇
qq_34621851的博客
03-22 3799
今天想了比较久的时间，准备开启这一系列的文章，旨在对 React 系列的源码进行深度解析，其中包含但不限于 react、react-dom、react-router... 等一系列优秀的 React 系列框架，最后再一一实现这些框架的简易版本。 本篇文章将会是对 react 和 react-dom 渲染过程源码的深度解析，我们将从官方 API 以及一些简易 Demo 来进入 react 的内部世界...
React之React渲染原理
Welkin_qing的博客
10-20 1733
文章目录一、react如何将代码显示到页面上（1）JSX生成Element1. JSX语法2. 使用babel对JSX语法进行转换3. 创建虚拟Dom（2）Element生成Dom 一、react如何将代码显示到页面上 每当我们新建react项目时，项目创建成功后，运行npm start后会出现如下界面： 可以观察到时app.js中对该页面进行的设计，代码如下： 观察index.js发现最终代码是在这里执行的： （1）JSX生成Element 1. JSX语法 可以看到第一个张图片中的render函
react render 的原理和触发时机
sadasddpk的博客
01-16 5142
理解react的render函数，要从这三点来认识。原理、执行时机、总结。 一、原理 在类组件和函数组件中，render函数的形式是不同的。 在类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件。 classFooextendsReact.Component{ render(){ //类组件中 return<h1>Foo</h1>; } ...
React学习1-2 render渲染原理
m0_37780367的博客
05-13 554
JSX语法糖转换成Javascript对象结构 import React from 'react' import ReactDOM from 'react-dom' let ele = <div><span> hello word </span></div> ; console.log(ele); //等价于 //标签类型 属性对象 子元素 let ele1 = React.createElement('div', null, [React.createEl
深入理解ReactDOM.render 是如何串联渲染链路全过程的
油墨香^-^的博客
02-02 1074
我们以首次渲染为切入点，拆解 Fiber 架构下 所触发的渲染链路，结合源码理解整个链路中所涉及的初始化、等过程开篇先给到你一个简单的 React AppDemo： Demo 启动后，渲染出的界面如下图所示：现在请你打开 Chrome 的 面板，点击下图红色圈圈所圈住的这个“记录”按钮：然后重新访问 Demo 页面对应的本地服务地址，待页面刷新后，终止记录，便能够得到如下图右下角所示的这样一个调用栈大图：放大该图，定位“”这个文件路径，我们就可以找到 方法对应的调用栈，如下图所示：从图中你可以看到
深入理解ReactDOM.render 是如何串联渲染链路的全过程
程序员成长指北
06-10 438
点击上方程序员成长指北，关注公众号回复1，加入高级 Node 进阶交流群????点击上方卡片关注我们以首次渲染为切入点，拆解 Fiber 架构下ReactDOM.render所触...
03.ReactDOM.render
追随大神的脚步
05-07 978
ReactDOM.render 上文说的是把jsx转换成VDom 而ReactDom.render则是把VDom渲染成真实的Dom节点（本篇幅只涉及到渲染，没有涉及到更新、调度等等） 我们在写react的时候，写到最后一步肯定是ReactDom.render，比如 ReactDOM.render(<App name='app' />, document.getElementById('app')); 把<App />解析成Vdom ReactDOM.render(React.cre
React v16源码之ReactDOM.render
玉案轩窗的博客
09-01 1133
React提供render API来实现将组件构成的视图渲染挂载到指定的DOM节点上，本文旨在梳理ReactDOM.render函数的执行逻辑，从而进一步理解React 16版本之后的Fiber以及相关处理过程（React版本是16.14.0）。
ReactDOM.render和render()
08-10
`ReactDOM.render()` 是 React 的一个方法，用于将 React 元素渲染到实际的 DOM 中。它通常在应用的入口处被调用，将根组件渲染到页面上。 `render()` 方法是组件的一个生命周期方法，用于定义组件的结构和样式。它返回一个 React 元素或一组元素，用于构建用户界面。当组件的状态或属性发生变化时，`render()` 方法会被调用进行重新渲染。 简单来说，`ReactDOM.render()` 是用于将组件渲染到页面上的方法，而 `render()` 方法是定义组件的结构和样式的方法。 以下是一个示例，展示了如何使用 `ReactDOM.render()` 将一个组件渲染到页面上： ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import MyComponent from './MyComponent'; ReactDOM.render( <React.StrictMode> <MyComponent /> </React.StrictMode>, document.getElementById('root') ); ``` 在这个示例中，`ReactDOM.render()` 方法将 `<MyComponent />` 组件渲染到具有 id 为 `root` 的 DOM 元素中。`<MyComponent />` 组件会被 `render()` 方法返回的元素所表示的结构和样式渲染出来。 需要注意的是，`ReactDOM.render()` 只需要调用一次，将根组件渲染到页面上。之后，React 会负责处理组件的更新和重新渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值