react源码解毒

搭建React源码本地调试环境

        要调试react的源码，就需要在使用cli创建的项目中，把reactd打包版本切换为本地的源代码，源代码需要在react项目中下载到本地，然后在cli创建的项目中修改相关的配置，使得项目远行时从本地的react源代码目录中查找引用相对应的react packages源码包。这样我们在进行本地调试时就可以清楚地知道运行的详细过程。

JSX转换为ReactElement的过程

通过学习了解JSX语法是如何被转换成react element的。react element也就是react中使用virtual dom，它实际上是javascript 对象，用来描述真实DOM对象长成什么样。

在react当中，我们使用JSX语法进行用户界面的构建。JSX语句虽然看起来很像HTML，但是实际上它就是JavaScript的一种语法扩展，本质上还是JavaScript。

JSX语法是不能够直接在浏览器端运行的，在react项目运行之前，JSX会被babel进行转换。每一段JSX语法都会被babel转换为react.createElement()的调用。react.createElement()方法在调用后返回的就是react Element对象。

所以，我们的本节的目标就是要找到react.createElement()方法，看看该方法的内部是如何实现的。在下载到的react源代码中，有一个packages目录，这个目录下放置的就是react源码。

在packages目录下，有个react文件夹，因为createElement()方法是挂载在react这个对象上面的，所以，我们在这个react目录中的package.json找到该源码的入口文件main。也就是index.js。

在index.js中：

export {
  Children,
  createRef,
  Component,
  PureComponent,
  createContext,
  forwardRef,
  lazy,
  memo,
  useCallback,
  useContext,
  useEffect,
  useImperativeHandle,
  useDebugValue,
  useLayoutEffect,
  useMemo,
  useReducer,
  useRef,
  useState,
  Fragment,
  Profiler,
  StrictMode,
  Suspense,
  createElement,
  cloneElement,
  isValidElement,
  version,
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
  createFactory,
  useTransition,
  useDeferredValue,
  SuspenseList,
  unstable_withSuspenseConfig,
  block,
  DEPRECATED_useResponder,
  DEPRECATED_createResponder,
  unstable_createFundamental,
  unstable_createScope,
  jsx,
  jsxs,
  jsxDEV,
} from './src/React';

它通过export 关键字导出了一个对象，该对象中存在有一个方法名为createElement。它就是我们要找的目标方法。

我们可以看到，该方法是在src/React 中导出的。我们切换到src目录下，找到React.js文件。我们可以看看到，