跳到主要内容

react 基类

一、作用​

二、组件​

/**
 * Base class helpers for the updating state of a component.
 * 用于更新组件状态的基类辅助工具。
 */
function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  // 如果一个组件有字符串引用，我们稍后会分配一个不同的对象。
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  // 我们初始化默认的更新器，但真正的更新器由渲染器注入。
  this.updater = updater || ReactNoopUpdateQueue;
}

Component.prototype.isReactComponent = {};

/**
 * Sets a subset of the state. Always use this to mutate
 * state. You should treat `this.state` as immutable.
 *
 * 设置状态的一个子集。总是使用此方法来修改状态。
 * 你应该将 `this.state` 视为不可变的。
 *
 * There is no guarantee that `this.state` will be immediately updated, so
 * accessing `this.state` after calling this method may return the old value.
 * 无法保证 `this.state` 会立即更新，因此在调用此方法后访问 `this.state` 可能会返回旧值。
 *
 * There is no guarantee that calls to `setState` will run synchronously,
 * as they may eventually be batched together.  You can provide an optional
 * callback that will be executed when the call to setState is actually
 * completed.
 *
 * 无法保证对 `setState` 的调用会同步执行，因为它们最终可能会被合并批处理。你可以提供一个可
 * 选的回调函数，当 `setState` 调用实际上完成时，该回调将被执行。
 *
 * When a function is provided to setState, it will be called at some point in
 * the future (not synchronously). It will be called with the up to date
 * component arguments (state, props, context). These values can be different
 * from this.* because your function may be called after receiveProps but before
 * shouldComponentUpdate, and this new state, props, and context will not yet be
 * assigned to this.
 *
 * 当向 setState 提供一个函数时，该函数将在未来的某个时刻被调用（不是同步调用）。它会使用最新的
 * 组件参数（state、props、context）进行调用。这些值可能与 this.* 不同，因为你的函数可能在
 * receiveProps 之后但在 shouldComponentUpdate 之前被调用，而此时新的 state、props 和
 * context 还未被分配给 this。
 *
 * @param {object|function} partialState Next partial state or function to
 *        produce next partial state to be merged with current state.
 *        下一个部分状态或函数，用于生成将与当前状态合并的下一个部分状态。
 * @param {?function} callback Called after state is updated.
 *                             在状态更新后调用
 * @final
 * @protected
 */
Component.prototype.setState = function (partialState, callback) {
  if (
    typeof partialState !== 'object' &&
    typeof partialState !== 'function' &&
    partialState != null
  ) {
    throw new Error(
      'takes an object of state variables to update or a ' +
        'function which returns an object of state variables.',
    );
  }

  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

/**
 * Forces an update. This should only be invoked when it is known with
 * certainty that we are **not** in a DOM transaction.
 * 强制更新。只有在确定我们**不**处于 DOM 事务中时才应调用此方法。
 *
 * You may want to call this when you know that some deeper aspect of the
 * component's state has changed but `setState` was not called.
 *
 * 当你知道组件状态的某些更深层次的方面已经发生变化，但没有调用 `setState` 时，你可能
 * 想调用这个。
 *
 * This will not invoke `shouldComponentUpdate`, but it will invoke
 * `componentWillUpdate` and `componentDidUpdate`.
 *
 * 这不会调用 `shouldComponentUpdate`，但会调用 `componentWillUpdate` 和
 *  `componentDidUpdate`。
 *
 * @param {?function} callback Called after update is complete.
 *                             在更新完成后调用。
 * @final
 * @protected
 */
Component.prototype.forceUpdate = function (callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};

/**
 * Deprecated APIs. These APIs used to exist on classic React classes but since
 * we would like to deprecate them, we're not going to move them over to this
 * modern base class. Instead, we define a getter that warns if it's accessed.
 *
 * 已弃用的 API。这些 API 曾经存在于经典的 React 类中，但由于我们希望弃用它们，因此不会将它们
 * 迁移到这个现代基类中。相反，我们定义了一个 getter，如果访问它会发出警告。
 */
if (__DEV__) {
  const deprecatedAPIs = {
    isMounted: [
      'isMounted',
      'Instead, make sure to clean up subscriptions and pending requests in ' +
        'componentWillUnmount to prevent memory leaks.',
    ],
    replaceState: [
      'replaceState',
      'Refactor your code to use setState instead (see ' +
        'https://github.com/facebook/react/issues/3236).',
    ],
  };
  const defineDeprecationWarning = function (methodName, info) {
    Object.defineProperty(Component.prototype, methodName, {
      get: function () {
        console.warn(
          '%s(...) is deprecated in plain JavaScript React classes. %s',
          info[0],
          info[1],
        );
        return undefined;
      },
    });
  };
  for (const fnName in deprecatedAPIs) {
    if (deprecatedAPIs.hasOwnProperty(fnName)) {
      defineDeprecationWarning(fnName, deprecatedAPIs[fnName]);
    }
  }
}

三、纯组件​

备注
function ComponentDummy() {}
ComponentDummy.prototype = Component.prototype;

/**
 * Convenience component with default shallow equality check for sCU.
 * 具有默认浅层相等检查的方便组件，用于 sCU。
 */
function PureComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  // 如果一个组件有字符串引用，我们稍后会分配一个不同的对象。
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}

const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
// Avoid an extra prototype jump for these methods.
// 避免给这些方法增加额外的原型跳转。
assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;

四、常量​

// 空对象
const emptyObject = {};
if (__DEV__) {
  Object.freeze(emptyObject);
}