搭建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文件。我们可以看看到,