对React核⼼api的研究

 

   

const React = {

           Children: {

             map,

             forEach,

                count,

             toArray,

              only,

         },

           createRef,

Component,

PureComponent,

createContext,

forwardRef,

lazy,

memo,

useCallback,

useContext,

useEffect,

useImperativeHandle,

useDebugValue,

useLayoutEffect,

useMemo,

useReducer,

useRef,

useState,

Fragment: REACT_FRAGMENT_TYPE,

StrictMode: REACT_STRICT_MODE_TYPE,

Suspense: REACT_SUSPENSE_TYPE,

createElement: __DEV__ ? createElementWithValidation :

createElement,

cloneElement: __DEV__ ? cloneElementWithValidation :

cloneElement,

createFactory: __DEV__ ? createFactoryWithValidation :

createFactory,

isValidElement: isValidElement,

version: ReactVersion,

unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE,

unstable_Profiler: REACT_PROFILER_TYPE,开课吧web全栈工程师

__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:

ReactSharedInternals,

};

// Note: some APIs are added with feature flags.

// Make sure that stable builds for open source

// don't modify the React object to avoid deopts.

// Also let's not expose their names in stable builds.

if (enableStableConcurrentModeAPIs) {

React.ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;

React.Profiler = REACT_PROFILER_TYPE;

React.unstable_ConcurrentMode = undefined;

React.unstable_Profiler = undefined;

}

export default React;

核⼼精简后：

const React = {

createElement,

Component

}

react-dom 主要是render逻辑

最核⼼的api：

React.createElement：创建虚拟DOM

React.Component：实现⾃定义组件

ReactDOM.render：渲染真实DOM