react源码解析5.jsx&外围api

视频解说（高效学习）：进入学习

往期文章：

1.开篇介绍和面试题

2.react的设计理念

3.react源码架构

4.源码目录构造和调试

5.jsx&外围api

6.legacy和concurrent模式入口函数

7.Fiber架构

8.render阶段

9.diff算法

10.commit阶段

11.生命周期

12.状态更新流程

13.hooks源码

14.手写hooks

15.scheduler&Lane

16.concurrent模式

17.context

18事件零碎

19.手写迷你版react

20.总结&第一章的面试题解答

21.demo

virtual Dom是什么

一句话概括就是，用js对象示意dom信息和构造，更新时从新渲染更新后的对象对应的dom，这个对象就是React.createElement()的返回后果

virtual Dom是一种编程形式，它以对象的模式保留在内存中，它形容了咱们dom的必要信息，并且用相似react-dom等模块与实在dom同步，这一过程也叫协调(reconciler)，这种形式能够申明式的渲染相应的ui状态，让咱们从dom操作中解放出来，在react中是以fiber树的模式寄存组件树的相干信息，在更新时能够增量渲染相干dom，所以fiber也是virtual Dom实现的一部分

为什么要用virtual Dom

大量的dom操作慢，很小的更新都有可能引起页面的重新排列，js对象优于在内存中，解决起来更快，能够通过diff算法比拟新老virtual Dom的差别，并且批量、异步、最小化的执行dom的变更，以进步性能

另外就是能够跨平台，jsx --> ReactElement对象 --> 实在节点，有中间层的存在，就能够在操作实在节点之前进行对应的解决，解决的后果反映到实在节点上，这个实在节点能够是浏览器环境，也能够是Native环境

virtual Dom真的快吗？其实virtual Dom只是在更新的时候快，在利用初始的时候不肯定快

const div = document.createElement('div');let str = ''for(let k in div){  str+=','+k}console.log(str)

jsx&createElement

jsx能够申明式的形容视图，晋升开发效率，通过babel能够转换成React.createElement()的语法糖，也是js语法的扩大。

jsx是ClassComponent的render函数或者FunctionComponent的返回值，能够用来示意组件的内容，在通过babel编译之后，最初会被编译成React.createElement，这就是为什么jsx文件要申明import React from 'react'的起因（react17之后不必导入），你能够在 babel编译jsx 站点查看jsx被编译后的后果

React.createElement的源码中做了如下几件事

  • 解决config，把除了保留属性外的其余config赋值给props
  • 把children解决后赋值给props.children
  • 解决defaultProps
  • 调用ReactElement返回一个jsx对象(virtual-dom)
//ReactElement.jsexport function createElement(type, config, children) {  let propName;  const props = {};  let key = null;  let ref = null;  let self = null;  let source = null;  if (config != null) {    //解决config，把除了保留属性外的其余config赋值给props    //...  }  const childrenLength = arguments.length - 2;  //把children解决后赋值给props.children  //...  //解决defaultProps  //...  return ReactElement(    type,    key,    ref,    self,    source,    ReactCurrentOwner.current,    props,  );}const ReactElement = function(type, key, ref, self, source, owner, props) {  const element = {    $$typeof: REACT_ELEMENT_TYPE,//示意是ReactElement类型    type: type,//class或function    key: key,//key    ref: ref,//ref属性    props: props,//props    _owner: owner,  };  return element;};

$$typeof示意的是组件的类型，例如在源码中有一个查看是否是非法Element的函数，就是根object.$$typeof === REACT_ELEMENT_TYPE来判断的

//ReactElement.jsexport function isValidElement(object) {  return (    typeof object === 'object' &&    object !== null &&    object.$$typeof === REACT_ELEMENT_TYPE  );}

如果组件是ClassComponent则type是class自身，如果组件是FunctionComponent创立的，则type是这个function，源码中用ClassComponent.prototype.isReactComponent来区别二者。留神class或者function创立的组件肯定要首字母大写，不而后被当成一般节点，type就是字符串。

jsx对象上没有优先级、状态、effectTag等标记，这些标记在Fiber对象上，在mount时Fiber依据jsx对象来构建，在update时依据最新状态的jsx和current Fiber比照，造成新的workInProgress Fiber，最初workInProgress Fiber切换成current Fiber。

render

//ReactDOMLegacy.jsexport function render(  element: React$Element<any>,//jsx对象  container: Container,//挂载dom  callback: ?Function,//回调) {    return legacyRenderSubtreeIntoContainer(    null,    element,    container,    false,    callback,  );}

能够看到render所做的事也就是调用legacyRenderSubtreeIntoContainer，这个函数在下一章解说，这里重点关注ReactDom.render()应用时候的三个参数。

component

//ReactBaseClasses.jsfunction Component(props, context, updater) {  this.props = props;//props属性  this.context = context;//以后的context  this.refs = emptyObject;//ref挂载的对象  this.updater = updater || ReactNoopUpdateQueue;//更新的对像}Component.prototype.isReactComponent = {};//示意是classComponent

component函数中次要在以后实例上挂载了props、context、refs、updater等，所以在组件的实例上能拿到这些，而更新次要的承载构造就是updater， 次要关注isReactComponent，它用来示意这个组件是类组件

总结：jsx是React.createElement的语法糖，jsx通过babel转化成React.createElement函数，React.createElement执行之后返回jsx对象，也叫virtual-dom，Fiber会依据jsx对象和current Fiber进行比照造成workInProgress Fiber

pureComponent也很简略，和component差不多，他会进行原型继承，而后赋值isPureReactComponent

function PureComponent(props, context, updater) {  this.props = props;  this.context = context;  this.refs = emptyObject;  this.updater = updater || ReactNoopUpdateQueue;}const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());pureComponentPrototype.constructor = PureComponent;Object.assign(pureComponentPrototype, Component.prototype);pureComponentPrototype.isPureReactComponent = true;export {Component, PureComponent};