前言
上一篇写了Children,createRef,接着上一篇写后面的几个API
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,
Profiler: REACT_PROFILER_TYPE,
StrictMode: REACT_STRICT_MODE_TYPE,
Suspense: REACT_SUSPENSE_TYPE,
createElement: createElement,
cloneElement: cloneElement,
createFactory: createFactory,
isValidElement: isValidElement,
version: ReactVersion,
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,
};
Component
const emptyObject = {};
class Component {
constructor(props, context, updater) {
this.props = props;
this.context = context;
this.ref = emptyObject;
this.updater = updater || null;
}
isReactComponent() {}
setState(partialState, callback) {
this.updater.enqueueSetState(this, partialState, callback, "setState");
}
forceUpdate(callback) {
this.updater.enqueueForceUpdate(this, callback, "forceUpdate");
}
}
这里我稍微改了一下源代码,源代码是用的function构造函数,这里我觉的class看着会更简单一些,其实是一摸一样的,Component的源代码在ReactBaseClasses里
- 这块代码比较简单,先创建一个Component类,可接收props,context,updater三个参数
-
并分赋值
- this.props = props;
- this.context = context;
- this.ref = emptyObject;
- this.updater = updater || null;
- isReactComponent: 没什么特别意义,在react-dom包中会有一些地方拿原型中是否存在这个方法来判断是不是一个class Component
- setState:调用了this.updater.enqueueSetState,这个方法主就是setState的主要逻辑,放到react-dom中再去说,它在ReactFiberClassComponent中注入
- forceUpdate:跟setState一样调用了this.updater中的方法enqueueForceUpdate
补充一下源码中可能用到了ReactNoopUpdateQueue,这个文件只是在dev中使用,仅仅给出一些提示而已
PureComponent
class PureComponent extends Component {
constructor(props, context, updater) {
super(props, context, updater);
this.props = props;
this.context = context;
this.refs = emptyObject;
this.updater = updater || null;
}
isPureReactComponent = true;
}
- PureComponent和Component一摸一样,仅仅只是多了一个标志属性
isPureReactComponent = true
createContext
import { REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE } from "shared/ReactSymbols";
export function createContext(defaultValue, calculateChangedBits) {
if (calculateChangedBits == undefined) {
calculateChangedBits = null;
}
const context = {
$$typeof: REACT_CONTEXT_TYPE,
_calculateChangedBits: calculateChangedBits,
_currentValue: defaultValue,
_currentValue2: defaultValue,
_threadCount: 0,
Provider: null,
Consumer: null
};
(context.Provider = {
$$typeof: REACT_PROVIDER_TYPE,
_context: context
}),
(context.Consumer = context);
return context;
}
- 这个方法可以简单的看就是返回一个对象,而对象中的内容就是以上这么几项,唯一值的关注的是Provider和Consumer
- Provider 的属性是一个$$typeof: REACT_PROVIDER_TYPE,一个symbol标志位,react中很多对象都会有这样一个唯一的symbol属性,只是为了提供在react-dom中做更新操作的时候能更好的区分和判断类型
- Concumer:把context整个对象都赋值给了它
- 最后返回一个context
- 官方的API好像没有第二个参数calculateChangedBits,这个参数传是一个(oldValue,newValue)=> number, 用来计算新老context的值,这个也是react-dom的内容,提前有兴趣可以看ReactFiberNewContext这个文件
forwardRef
import { REACT_FORWARD_REF_TYPE } from "shared/ReactSymbols";
export default function forwardRef(render) {
return {
$$typeof: REACT_FORWARD_REF_TYPE,
render
};
}
- 和createRef这样的API差不多就是返回一个对象,给一个symbol唯一属性,react中有很多这样的API,最终在createElement的时候会把这个对象挂在type当中
可能很多人看了很疑惑,感觉看完也没什么用,但这就是一个看react源码的逻辑,不要一开始就过分追求从到到尾的实现,因为react代码很多很多,我觉得一层一层的往里看是比较好的方法,等看完这些,到了react-dom内容的时候,慢慢的就会发现这些API里面的属性它到底是做什么用的了。
累了明天再写吧