深入react-基础API（二）

本文主要是介绍深入react-基础API（二），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

上一篇写了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里面的属性它到底是做什么用的了。

累了明天再写吧

这篇关于深入react-基础API（二）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！