9

阅读react-dom源码--ReactMount部分

 3 years ago
source link: https://snayan.github.io/post/reactdom_reactmount_source/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

阅读react-dom源码--ReactMount部分

June 10, 2017/「 react 」/ Edit on Github ✏️

ReactMount 为 react-dom 对象提供了render和unmountComponentAtNode这 2 个方法，其中第一个render就是我们常用的输出 react element 到真实的 dom 里。

var ReactMount = {
  scrollMonitor: function(container, renderCallback) {
    //...
  },
  renderSubtreeIntoContainer: function(
    parentComponent,
    nextElement,
    container,
    callback
  ) {
    //...
  },
  render: function(nextElement, container, callback) {
    //...
  },
  unmountComponentAtNode: function(container) {
    //...
  },
}

render方法实际上提供了三个参数，第一个就是 react element，第二个是页面上真实的 dom，第三个是 callback。如果 react element 已经在之前输出到 container 中了，那么再次调用render，则只会最小化更新 dom 的变化。

var render = function(nextElement, container, callback) {
  // 验证callback
  ReactUpdateQueue.validateCallback(callback, 'ReactDOM.render');
  // 验证nextElement是否是Rect Element
  !React.isValidElement(nextElement) ? '提示报错' : vodid 0;
  // 验证container
  !isValidContainer(container) ? '提示报错' : void 0;
  // 创建实际node
  var componentInstance = instantiateReactComponent(nextElement, false);
  // 更新到dom
  var component = ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context)._renderComponent.getPublicInstance();
  // 执行回调函数
  if(callback) {
    callback.call(component);
  }
  return componnet;
}

「react 版本 15.5.4」


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK