关于React源码 - 1

发表于 | 分类于
本文字数： 34k | 阅读时长 ≈ 1:01

'React 源码'

就是在阅读《深入React技术栈》的第三章时，因为版本的问题对于书上的讲解和自己对于代码的阅读出入导致的学习压力，打算放弃参考书上的内容。

参考和引用/使用的链接 ↓

如何阅读大型前端开源项目的源码

源码概览

Babel 在线编译 - ReactJS

参考源码解析博客

以及本文参考的源码版本是 v16.6 (小部分不是，有标注

JSX 编译 | React.createElement()

JSX 编译

可以在 Babel 在线编译里玩。

JSX 大家都知道是 JavaScript 的语法拓展 ，ReactJS并没有强制必须使用 JSX ，但是它可以定义 结构、样式以及逻辑，我真的很喜欢hhh。

JSX 在实际的使用会被 babel 编译成传统的 JavaScript 语句。

举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Demo key="1" style={{color: red}}>
  <span>1</span>
  <span>2</span>
</Demo>
//上面的 JSX 内容会被编译成下面的内容
React.createElement(
  Demo,
  {
    key: "1",
    style: {
      color: red
    }
  },
  React.createElement("span", null, "1"),
  React.createElement("span", null, "2")
);

-> JSX 都会被编译成 React.createElement(type, config [, children])
-> 第一参数为 type 。当是自定义的组件时(大写开头)，传入的参数是一个变量，而是 HTML 的标签时(小写开头，虽然 HTML 大小写不敏感)，传入的是字符串 。如下面的例子中的 createElement 的第一个参数 是 "p" [字符串]，而上面的例子中的第一个参数是 Demo [变量]。这也就是为什么自定义的组件必须大写开头。

1
2
3
4
5
6
7
8
9
<p>
  this is a paragraph
</p>
// 上面的 JSX 内容会被编译成下面的内容
React.createElement(
  "p",
  null,
  "this is a paragraph"
);

-> 第二个参数为 config 。是一个对象或者是 null 。内容就是在 ReactJS 中称为 props 的东西(包括 key 和 ref)。
-> 第三个参数为 children 。可以有零个、一个以及多个 。需要注意的是，当有多个 children 时，传入参数并不是一整个数组，而是多个独立的参数，是在函数内部被整合成一个数组的。

React.createElement()

其实这个才是最常用的 React API 。

源码坐标： packages/react/src/ReactElement.js

1
export function createElement(type, config, children) {}

可以看到是对外开放的函数，参数有三个，分别对应 jsx 的内容。

type

对于 type 参数没有多做处理，有两个用到的地方

  1. 对于 defaultProps 处理时，判断了是否有 type 传入 以及该 type 是否有 defaultProps。
  2. 作为 ReactElement() 参数 , 这里的 ReactElement() 是 createElement() 的返回值。

config

config 的值有两种：null | Object

对 config 的处理的源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//仅当 config 不为 null 时进行处理。
if (config != null) {
  if (hasValidRef(config)) {
    ref = config.ref;
  }
  if (hasValidKey(config)) {
    key = '' + config.key;
  }
  self = config.__self === undefined ? null : config.__self;
  source = config.__source === undefined ? null : config.__source;
  // Remaining properties are added to a new props object
  for (propName in config) {
    if (
      hasOwnProperty.call(config, propName) &&
      !RESERVED_PROPS.hasOwnProperty(propName)
    ) {
      props[propName] = config[propName];
    }
  }
}

这里对 ref 和 key 还有 self 和 source 进行了特殊的处理

首先是对 ref 和 key 进行了合法判断。源码如下：

1
2
3
4
5
6
7
8
9
10
11
function hasValidRef(config) {
  if (__DEV__) {
    if (hasOwnProperty.call(config, 'ref')) {
      const getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
      if (getter && getter.isReactWarning) {
        return false;
      }
    }
  }
  return config.ref !== undefined;
}

通過Ref屬性的取值器對象的isReactWarning屬性檢測是否含有合法的Ref，在開發環境下，如果這個props是react元素的props那麼獲取上面的ref就是不合法的，因爲在creatElement的時候已經調用了defineRefPropWarningGetter。生產環境下如果config.ref !== undefined，說明合法。
参考博客

其实上面这段话也挺难理解的。上面的引用里提到了 isReactWarning 这个属性来判断是否合法。在源码的文件里搜索这个关键字可以看到下面的函数。(下面的函数是用于 key 的，对于 ref 是进行的同样的处理。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function defineKeyPropWarningGetter(props, displayName) {
  const warnAboutAccessingKey = function() {
    if (!specialPropKeyWarningShown) {
      specialPropKeyWarningShown = true;
      warningWithoutStack(
        false,
        '%s: `key` is not a prop. Trying to access it will result ' +
          'in `undefined` being returned. If you need to access the same ' +
          'value within the child component, you should pass it as a different ' +
          'prop. (https://fb.me/react-special-props)',
        displayName,
      );
    }
  };
  warnAboutAccessingKey.isReactWarning = true;
  Object.defineProperty(props, 'key', {
    get: warnAboutAccessingKey,
    configurable: true,
  });
}
// 在 createElement() 函数中处理完 config 之后有这么一段代码，调用了上面的方法
if (__DEV__) {
  if (key || ref) {
    const displayName =
      typeof type === 'function'
        ? type.displayName || type.name || 'Unknown'
        : type;
    if (key) {
      defineKeyPropWarningGetter(props, displayName);
    }
    if (ref) {
      defineRefPropWarningGetter(props, displayName);
    }
  }
}

可以看到在开发环境下，会给组件的 props 设置 key/ref 属性，属性值为一个对象，具有 get 和 configurable。get 里设有 isReactWaring = true 用于避免子组件通过 props 获取 ref/key。

在这里的理解卡了很久(我好菜)，但是现在理解了。

简单的说：key/ref 都是在父组件调用了子组件时，与定义其他常规 props 一样的方式定义的，所以 key/ref 会出现在 createElement() 的 config 参数里。而在子组件里，是不允许子通过 this.props 获取到自己的 ref 和 key 的。 defineKeyPropWarningGetter 为 props 这个对象添加了 key/ref 两个属性，而这两个属性存在一个 getter ，而这个 getter 的 isReactWarning 属性是 true，借用这个 isReactWarning 来达到避免通过 props.ref/props.key 获取到这两个特殊的属性值。

要说起来 self 和 source 也是挺特殊的，但是完全什么用到过，源码里也没特殊的操作，所以就就不来管了。

children

对 JSX 进行编译的时候传入 React.createElement() 的参数可能是两个，可能是三个也可能是四个以上。需要注意的是传入的 children 参数，并不是一个数组，而是多个参数。

对 children 处理的源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Children can be more than one argument, and those are transferred onto
// the newly allocated props object.
const childrenLength = arguments.length - 2;
if (childrenLength === 1) {
  props.children = children;
} else if (childrenLength > 1) {
  const childArray = Array(childrenLength);
  for (let i = 0; i < childrenLength; i++) {
    childArray[i] = arguments[i + 2];
  }
  if (__DEV__) {
    if (Object.freeze) {
      Object.freeze(childArray);
    }
  }
  props.children = childArray;
}

当 children 参数不存在时，不做处理
当 children 只有一个时，直接作为 props 的 children 属性传入。
当 children 有多个参数时，使用 arguments 关键字，遍历参数数组，将第三个参数开始之后的所有参数整合为一个数组，并把这个新数组作为 props 的 children 属性的值。

对 defaultProps 的处理

子组件定义时，可以设置默认 props ，如果父组件在调用子组件没有重写这个 props ，则就会使用默认值。
而在 createElement() 函数中对于默认的 props 也进行了处理，源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
// Resolve default props
// 当 defaultProps 存在
if (type && type.defaultProps) {
  const defaultProps = type.defaultProps;
  for (propName in defaultProps) {
    // 且父组件没有 override 该 props
    if (props[propName] === undefined) {
      //把默认的 props 写入 props 对象
      props[propName] = defaultProps[propName];
    }
  }
}

React.createElement() 的返回值

1
2
3
4
5
6
7
8
9
return ReactElement(
  type,
  key,
  ref,
  self,
  source,
  ReactCurrentOwner.current,
  props,
);

ReactElement() 是一个内部方法，返回值是一个 element 。

ReactElement()

函数首字母为大写，但是并不是 class 而是普通的 function 。

函数返回一个对象 ，源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
const element = {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  };

$$typeof 用于标识这个 element 的类型 。通过 React.createElement() 生产的元素的 $$typeof 一定是 REACT_ELEMENT_TYPE
type 用于标识节点类型，是原生 DOM 节点还是类组件还是函数组件以及一些 React 提供的其他 component 类型。
key/ref/props 就是 createElement 里处理的那些内容。

Component

类组件都会继承 React.Component 。

对于 Component 的定义在 packages/react/src/ReactBaseClasses.js

Component 的定义
1
2
3
4
5
6
7
8
9
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;
}
2019-07-23更新

Component 就是一个 function ，没有什么特殊地方。

setState()

setState() 
1
2
3
4
5
6
7
8
9
10
Component.prototype.setState = function(partialState, callback) {
  invariant(
    typeof partialState === 'object' ||
      typeof partialState === 'function' ||
      partialState == null,
    'setState(...): 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');
};

源代码里在 Component 的原型上定义了 setState 函数。
接收的参数一个是 particalState ，是更新的目标状态，类型可以是 object 和 function 。（ 推荐使用 function

invariant() 用于验证传入的 partialState 是否正常。
而 Component.setState 真正的作用是调用了 updater 的 enqueueSetState 方法 ( 这是 react-dom 里的内容。
选择使用传入的 updater 的 enqueueSetState 方法的原因是 react 是个平台通用的，而渲染是与平台有关的，可以理解为 react-dom 、raect-native 两个平台，因此需要有这个 updater 来根据平台来定制实现方法。

forceUpdate()

如 setState() 一般，也是挂在 Component 的原型上的函数。
功能为强制 Component 更新，即使没有 state 变动。

forceUpdate()
1
2
3
Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};

PureComponent

PureComponent
1
2
3
4
5
6
7
8
9
10
11
12
function ComponentDummy() {}
ComponentDummy.prototype = Component.prototype;
function PureComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}
const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
Object.assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;

(这语法也太高级了。。。

PureComponent 与 Component 差不多，区别在于最后一行代码。
pureComponentPrototype 有一个 isPureReactCompoent 属性 ，用该属性表示继承 PureComponent 的组件，在之后的更新过程中 react-dom 会根据这个属性来判断一个组件是否是 PureComponent 。

2019-07-31更新

Ref

虽然每一个 ReactJS 的教程里都会介绍到 ref 并且再多说一句不推荐使用，但是真的挺好用的（

而且一些情况下往往不得不用（比如说运用到数据可视化图表的时候。

ref 获取到的是实例，而函数组件是没有实例的。因为函数组件挂载时只是调用了函数，没有创建实例。所以要通过 ref 获取到函数组件需要一些特别的操作。

使用方法

stringRef

是逐渐被淘汰的方式

其实有留意到 Component 定义的时候有一行注释

// If a component has string refs, we will assign a different object later.

但是还不知道为什么 hhh

创建方式相比其他两种方式最为简单

String Ref
1
2
3
4
5
6
//创建方式 直接在节点的 props 位置设置 ref 属性 并使用一个字符串作为属性值
<p ref='StringRef'>string ref demo</p>
//使用方式 这里假设在 componentDidMount() 里使用 传入 ref 属性的字符串将被使用到
componentDidMount(){
  this.refs.stringRef.textContent = 'string ref got'
}

function

给 ref 属性传入的是一个方法

String Ref
1
2
3
4
5
6
//创建方式 同样直接在节点的 props 位置设置 ref 属性 但是属性值是一个 function ele 对应的就是节点实例
<p ref={ele=>(this.methodRef = ele)}>function ref demo</p>
//使用方式 与 string ref 不同， string ref 是作为属性挂在 this.refs 上 ，而这里定义的ref直接作为组件的一个属性。
componentDidMount(){
  this.methodRef.textContent = 'method ref got'
}

createRef()

ReactJS 提供的 API。

★★推荐使用★★

String Ref
1
2
3
4
5
6
7
8
9
10
11
//创建方式 先在 constructor 创建对象
constructor(){
  super()
  this.objRef = React.createRef() //刚创建的时候 this.objRef 为 {current: null}
}
// 再把创好的对象传给某个节点
<p ref={this.objRef}>obj ref demo</p> //渲染完成后会把节点实例传给 this.objRef.current 上
//使用方式 创建的对象的 current 属性上使用
componentDidMount(){
  this.objRef.current.textContent = 'obj ref got'
}

createRef() 源码

坐标： packages/react/src/ReactCreateRef.js

源码
1
2
3
4
5
6
7
8
9
10
// an immutable object with a single mutable value
export function createRef(): RefObject {
  const refObject = {
    current: null,
  };
  if (__DEV__) {
    Object.seal(refObject);
  }
  return refObject;
}

除去开发模式的代码不管的话，只是简单的返回了一个对象 对象含有一个值为 null 的 current 属性。

注释里提到的这个对象是不可变的（就是在开发环境下调用了 Object.seal()

2019-08-04更新

forwardRef

两个前提：
在上面的 React.createElement() 里可以看到 ref 是不会作为 props 传入子组件的
ref 获取的是节点的实例 所以引用 function component 的 ref 会报错。

forward-ref 的使用 demo

forwardRef
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react'
// Target 作为一个 function component , 
// 使用 forwardRef 之后，使 ref 可以作为参数传入
const Target = React.forwardRef((props, ref)=>( 
  <input type='text' ref={ref}/>
))
export default class Temp extends React.Component {
  constructor(){
    super()
    this.ref = React.createRef()
  }
  componentDidMount() {
    this.ref.current.value = 'ref get input'
  }
  render(){
    return <Target ref={this.ref}/>
  }
}

源码也非常的简单，除去 dev 代码仅仅返回一个对象

forwardRef 源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from 'shared/ReactSymbols';
import warningWithoutStack from 'shared/warningWithoutStack';
export default function forwardRef<Props, ElementType: React$ElementType>(
  render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) {
  if (__DEV__) {
    if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
      warningWithoutStack(
        false,
        'forwardRef requires a render function but received a `memo` ' +
          'component. Instead of forwardRef(memo(...)), use ' +
          'memo(forwardRef(...)).',
      );
    } else if (typeof render !== 'function') {
      warningWithoutStack(
        false,
        'forwardRef requires a render function but was given %s.',
        render === null ? 'null' : typeof render,
      );
    } else {
      warningWithoutStack(
        // Do not warn for 0 arguments because it could be due to usage of the 'arguments' object
        render.length === 0 || render.length === 2,
        'forwardRef render functions accept exactly two parameters: props and ref. %s',
        render.length === 1
          ? 'Did you forget to use the ref parameter?'
          : 'Any additional parameter will be undefined.',
      );
    }
    if (render != null) {
      warningWithoutStack(
        render.defaultProps == null && render.propTypes == null,
        'forwardRef render functions do not support propTypes or defaultProps. ' +
          'Did you accidentally pass a React component?',
      );
    }
  }
  return {
    $$typeof: REACT_FORWARD_REF_TYPE,
    render,
  };
}

除去 __DEV__ 代码 ，实现的功能仅为反悔了一个对象，包含 $$typeof 和 render 两个属性。
这里的 $$typeof 是 REACT_FORWARD_REF_TYPE ，而 ReactElement() 里返回的 element 对象的 $$typeof 是 REACT_ELEMENT_TYPE 。
↑ 虽然提了一句两个 $$typeof 的值不同，其实根本就不是一个东西。。 这个 forwardRef 返回的对象在上面的 demo 中是 Target ，挂载时会作为 createElement 的 type 属性的值传入，最终也作为 ReactElement() 里返回的 element 对象 type 的值，不会于 element 对象的 $$typeof 属性冲突。

总而言之，所有通过 createElement() 生成的组件的 $$typeof 都是 REACT_ELEMENT_TYPE ！

Context

子组件可以通过 context 获取到好几层之上（中间隔了好几层组件）的祖辈组件的值，反过来就是某一个父组件定义了某个 context 之后其子组件都能获取到。

再简而言之，就是跨多层组件沟通。

有两种使用方式

  1. childContextType (将淘汰
  2. createContext (推荐

childContextType

childContextType
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 在父组件中定义
// 用以下函数定义子组件可以获得的内容
getChildContext() {
  retrun {key: value}
}
// 必须有以下的类型定义。FatherComponentName 即父组件的名字
FatherComponentName.childContextTypes = {
  key: PropTypes.string,
}
// 在子组件中使用 (假设在 render 中直接使用)
render(){
  return <p>childContext: {this.context.key}</p>
}
// 在子组件中也必须要有对 context 内容的类型定义
// 这里是 contextType 与父组件中的 childContextType 不同
ChildComponentName.contextTypes = { 
  key: PropTypes.string
}

createContext()

官方文档

createContext()
1
2
3
4
5
6
7
8
9
// 在上层组件中新建 Context 对象
const MyContext = React.createContext(defaultValue);
// 于上层组件的 render() 函数中
<MyContext.Provider value={/* 某个值 */} />
// 没有匹配到 Provider 时，defaultValue 才会生效 
// 于子组件中使用 
<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

源码

ReactContext.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import {REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
import type {ReactContext} from 'shared/ReactTypes';
import warningWithoutStack from 'shared/warningWithoutStack';
import warning from 'shared/warning';
export function createContext<T>(
  defaultValue: T,
  calculateChangedBits: ?(a: T, b: T) => number,
): ReactContext<T> {
  if (calculateChangedBits === undefined) {
    calculateChangedBits = null;
  } else {
    if (__DEV__) {
      ...
    }
  }
  const context: ReactContext<T> = {
    // 如同 createRef 的 $$typeof 一般，不会与 createElement() 的 $$typeof 冲突
    $$typeof: REACT_CONTEXT_TYPE,
    _calculateChangedBits: calculateChangedBits,
    // As a workaround to support multiple concurrent renderers, we categorize
    // some renderers as primary and others as secondary. We only expect
    // there to be two concurrent renderers at most: React Native (primary) and
    // Fabric (secondary); React DOM (primary) and React ART (secondary).
    // Secondary renderers store their context values on separate fields.
    // 两个 currentValue 用于不同的平台
    _currentValue: defaultValue,
    _currentValue2: defaultValue,
    // Used to track how many concurrent renderers this context currently
    // supports within in a single renderer. Such as parallel server rendering.
    _threadCount: 0,
    // These are circular
    Provider: (null: any),
    Consumer: (null: any),
  };
  context.Provider = {
    $$typeof: REACT_PROVIDER_TYPE,
    _context: context,
  };
  let hasWarnedAboutUsingNestedContextConsumers = false;
  let hasWarnedAboutUsingConsumerProvider = false;
  if (__DEV__) {
    ...
  } else {
    // context 的 Consumer 对象就是其本身，在 Consumer 使用时，
    // 可以直接使用_currentValue来获取最新的Context
    context.Consumer = context;
  }
  if (__DEV__) {
    ...
  }
  return context;
}

就是返回了一个 context 对象。该对象包含两个属性一个 Provider ，其值也是对象，一个 $$tpyeof 标志，另一个 _context 值为 context 本身，而另一个属性 Consumer ，其值为 context 对象本身。

2019-08-06更新

Suspense & Lazy

React.Suspense 可以指定加载指示器（loading indicator），以防其组件树中的某些子组件尚未具备渲染条件。 –>官方文档

用法

目前，懒加载组件是 <React.Suspense> 支持的唯一用例。

↑ 官方说的，说是只能配合 React.Lazy 使用，但是好像如果只要 Suspense 其中的组件没有加载完成 fallback 就有效。（未测试
(但是这么强的东西，相信一定不会跟 concurrent-mode 一样的结局的！

Suspense 会在其所有的子组件都加载完成前，一直显示 fallback 的内容。

suspense demo
1
2
3
4
5
6
7
8
9
10
11
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    // 显示 <Spinner> 组件直至 OtherComponent 加载完成
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

来瞅瞅我之前的另外一篇文章
(虽然有意识到写的不是很全面，但是坑嘛hhh总有以后来填的。

源码

Lazy v16.8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import type {LazyComponent, Thenable} from 'shared/ReactLazyComponent';
import {REACT_LAZY_TYPE} from 'shared/ReactSymbols';
import warning from 'shared/warning';
// 接收的参数是一个 function 并返回一个 thenable 对象（具有 .then 且 .then 是一个函数
export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
  let lazyType = {
    $$typeof: REACT_LAZY_TYPE,
    _ctor: ctor, // 就是传入的这个 function 参数
    // React uses these fields to store the result.
    _status: -1, // 记录 thenable 对象的状态 ，pending -1 后续 resolved 或者 rejected 会有不同的值。
    _result: null, // 记录 thenable 对象 resolved 之后返回的对象。
  };
  if (__DEV__) {
    ...
  }
  return lazyType;
}
Suspense v16.8
1
2
3
4
5
6
7
// 地址： react/packages/react/src/React.js
// 作为 React 对象的一个属性
const React = {
  ...
  Suspense: REACT_SUSPENSE_TYPE,
  ...
}

Hooks

React 2019 人气第一 API 。（个人感觉hhh

用法

很丰富。。
所以。。。
官方文档

源码

这里只是先介绍了 API ，就如同 component 里的 setState() 函数一样，hooks 里的 useContext() 等这些函数也是某一个对象的上的方法。会在渲染过程中应用到。

因为篇幅较长 删减了一些内容（如flow的类型验证）

hoock
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import type {
  ReactContext,
  ReactEventResponder,
  ReactEventResponderListener,
} from 'shared/ReactTypes';
import invariant from 'shared/invariant';
import warning from 'shared/warning';
import {REACT_RESPONDER_TYPE} from 'shared/ReactSymbols';
import ReactCurrentDispatcher from './ReactCurrentDispatcher';
// 注意下面这个函数 ，hooks 里的所有方法什么 useContext, useRef ... 都是引用的
// 这个函数返回的 dispatcher 上的属性。
function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  invariant(
    dispatcher !== null,
    'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
      ' one of the following reasons:\n' +
      '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
      '2. You might be breaking the Rules of Hooks\n' +
      '3. You might have more than one copy of React in the same app\n' +
      'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
  );
  return dispatcher;
}
export function useContext<T>(Context, unstable_observedBits) {
  const dispatcher = resolveDispatcher();
  if (__DEV__) {
    ...
  }
  return dispatcher.useContext(Context, unstable_observedBits);
}
export function useState<S>(initialState) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}
export function useReducer(reducer, initialArg, init) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useReducer(reducer, initialArg, init);
}
export function useRef<T>(initialValue){
  const dispatcher = resolveDispatcher();
  return dispatcher.useRef(initialValue);
}
export function useEffect(create, inputs) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useEffect(create, inputs);
}
export function useLayoutEffect(create, inputs) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useLayoutEffect(create, inputs);
}
export function useCallback(create, inputs) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useCallback(callback, inputs);
}
export function useMemo(create, inputs) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useMemo(create, inputs);
}
export function useImperativeHandle<T>(ref, create, inputs){
  const dispatcher = resolveDispatcher();
  return dispatcher.useImperativeHandle(ref, create, inputs);
}
export function useDebugValue(value: any, formatterFn {
  if (__DEV__) {
    ...
  }
}
export const emptyObject = {};
export function useResponder(responder,listenerProps){
  const dispatcher = resolveDispatcher();
  if (__DEV__) {
    ...
  }
  return dispatcher.useResponder(responder, listenerProps || emptyObject);
}

可以看到在这个源码文件里，所有的 hooks 相关的函数都是长下面这样

usexxx(ppp){
const dispatcher = resolveDispatcher();
return dispatcher.usexxx(ppp);
}

dispatcher 是个啥，现在还不知道（dbq

2019-08-08更新

Children

처음 들어봐 ！

React.Children 提供了用于处理 this.props.children 不透明数据结构的实用方法。–> 官方文档

↑ 不明白什么意思其实。。。

React中props.children和React.Children的区别

使用

在官方描述中其实可以理解到 React.Children 用于对 this.props.children 进行一些更复杂的处理。
为什么是更复杂呢？因为通常来说对于 this.props.children 都是直接被用来渲染的，如下：

1
2
3
function Child(props) {
  return <div>{props.children}</div>
}

而某些情况下需要对 children 直接进行一些操作 ( 完全预想不到会是什么情况呢。。。dbq
举个例子

1
2
3
4
5
6
7
8
9
10
11
function Child(props) {
  return (
    <div>
      {
        React.Children.map(props.children, child=>{
          <span>{child}</span>
        })
      }
    </div>
  )
}

上面的例子中仅仅给每一个 child 添加了一层 span 标签。
使用的 React.Child 的 map 方法，除了 map 还有 foreach / count / toArray / only 共五个方法。

源码

观察了一下 v16.6 和 v16.8 的 ReactChildren.js 是一样的
两个版本（11个月）没有更新哦

在 React.js 里， Children 作为 React 对象的一个属性，其值为一个对象，内容如下：

Children
1
2
3
4
5
6
7
8
9
10
const React = {
  Children: {
    map,
    foreach,
    count,
    toArray,
    only,
  },
  ...
}

源码在 packages/react/src/ReactChildren.js 里

输出只有一个

ReactChildren.js -> export
1
2
3
4
5
6
7
export {
  forEachChildren as forEach,
  mapChildren as map,
  countChildren as count,
  onlyChild as only,
  toArray,
};

React.Children.map()

现在最眼熟的 map()

mapChildren()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * Maps children that are typically specified as `props.children`.
 * The provided mapFunction(child, key, index) will be called for each
 * leaf child.
 * @param {?*} children Children tree container.
 * @param {function(*, int)} func The map function.
 * @param {*} context Context for mapFunction.
 * @return {object} Object containing the ordered map of results.
 */
function mapChildren(children, func, context) {
  if (children == null) {
    return children;
  }
  const result = [];
  mapIntoWithKeyPrefixInternal(children, result, null, func, context);
  return result;
}

对于函数的解释 翻译了一下大概就是说 映射了一下 通常来说是 props.children 的子节点, 会为了每个子节点调用传入的 mapfunction 函数（就是第二个参数）。

使用 React.Children.map 遍历子节点 不需要担心子节点是 Object 还是 undefined 还是 null。

这里对于 null 的处理已经出现了。 对于 children 是 null 的情况直接返回 null。
可能对于”为什么子节点会是 null ?”这个情况有所疑问 ( 没错，是我

子节点是 null
1
2
3
function hello() {
  return <Demo>null</Demo>;
}

可以在这里试试，输入上面的 demo 代码，可以看到 React.createElement 的第二个参数是 null。（但是其实好像两个 children 不是一个东西。。。

注意，这里的 mapChildren 函数有一个 return ，返回了 result 数组，这就是 map 和 foreach 最大的区别。

接下来看看调用的 mapIntoWithKeyPrefixInternal() 函数。

mapIntoWithKeyPrefixInternal()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function mapIntoWithKeyPrefixInternal(children, array, prefix, func, context) {
  let escapedPrefix = '';
  if (prefix != null) {
    escapedPrefix = escapeUserProvidedKey(prefix) + '/';
  }
  const traverseContext = getPooledTraverseContext(
    array,
    escapedPrefix,
    func,
    context,
  );
  traverseAllChildren(children, mapSingleChildIntoContext, traverseContext);
  releaseTraverseContext(traverseContext);
}

函数内部前四行是对返回的子节点的 key 进行操作。

escapeUserProvidedKey(prefix)
1
2
3
4
const userProvidedKeyEscapeRegex = /\/+/g;
function escapeUserProvidedKey(text) {
  return ('' + text).replace(userProvidedKeyEscapeRegex, '$&/');
}

这个函数就是把传入的参数转为字符串，并把 / 符号替换成 $&/ 。
接着引用了 getPooledTraverseContext() 函数

getPooledTraverseContext()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const POOL_SIZE = 10;
const traverseContextPool = [];
function getPooledTraverseContext(
  mapResult,
  keyPrefix,
  mapFunction,
  mapContext,
) {
  if (traverseContextPool.length) {
    const traverseContext = traverseContextPool.pop();
    traverseContext.result = mapResult;
    traverseContext.keyPrefix = keyPrefix;
    traverseContext.func = mapFunction;
    traverseContext.context = mapContext;
    traverseContext.count = 0;
    return traverseContext;
  } else {
    return {
      result: mapResult,
      keyPrefix: keyPrefix,
      func: mapFunction,
      context: mapContext,
      count: 0,
    };
  }
}

传入了四个参数，判断全局变量 traverseContextPool 里是否有元素，有的话就 pop 一个并把参数挂上去，如果 contextPool 为空则返回一个由四个参数加一个 count 属性的对象。
结合之前调用这个函数的 mapIntoWithKeyPrefixInternal() 函数还调用了一个与本函数对应的函数 releaseTraverseContext()。

releaseTraverseContext()
1
2
3
4
5
6
7
8
9
10
function releaseTraverseContext(traverseContext) {
  traverseContext.result = null;
  traverseContext.keyPrefix = null;
  traverseContext.func = null;
  traverseContext.context = null;
  traverseContext.count = 0;
  if (traverseContextPool.length < POOL_SIZE) {
    traverseContextPool.push(traverseContext);
  }
}

在这个 release 函数里，把 getPooledTraverseContext() 里新建的 traverseContext 的对象内容进行了清空而不是释放对象，当 contextPool 里的元素少于 POOL_SIZE 时，再推回 contextPool，就是对象池的引用，因为对象的声明和释放可能会造成内存抖动。

除去 traverseContext 的新建和 release ，之前的函数在这两步之间还有一个操作，traverseAllChildren() 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
function traverseAllChildrenImpl(children, nameSoFar, callback, traverseContext) {
  const type = typeof children;
  if (type === 'undefined' || type === 'boolean') {
    // All of the above are perceived as null.
    children = null;
  }
  let invokeCallback = false;
  if (children === null) {
    invokeCallback = true;
  } else {
    switch (type) {
      case 'string':
      case 'number':
        invokeCallback = true;
        break;
      case 'object':
        switch (children.$$typeof) {
          case REACT_ELEMENT_TYPE:
          case REACT_PORTAL_TYPE:
            invokeCallback = true;
        }
    }
  }
  if (invokeCallback) {
    callback(
      traverseContext,
      children,
      // If it's the only child, treat the name as if it was wrapped in an array
      // so that it's consistent if the number of children grows.
      nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar,
    );
    return 1;
  }
  let child;
  let nextName;
  let subtreeCount = 0; // Count of children found in the current subtree.
  const nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
  if (Array.isArray(children)) {
    for (let i = 0; i < children.length; i++) {
      child = children[i];
      nextName = nextNamePrefix + getComponentKey(child, i);
      subtreeCount += traverseAllChildrenImpl(child, nextName, callback, traverseContext);
    }
  } else {
    const iteratorFn = getIteratorFn(children);
    if (typeof iteratorFn === 'function') {
      if (__DEV__) {
        ...
      }
      const iterator = iteratorFn.call(children);
      let step;
      let ii = 0;
      while (!(step = iterator.next()).done) {
        child = step.value;
        nextName = nextNamePrefix + getComponentKey(child, ii++);
        subtreeCount += traverseAllChildrenImpl(
          child,
          nextName,
          callback,
          traverseContext,
        );
      }
    } else if (type === 'object') {
      let addendum = '';
      if (__DEV__) {
        ...
      }
      const childrenString = '' + children;
      invariant(
        false,
        'Objects are not valid as a React child (found: %s).%s',
        childrenString === '[object Object]'
          ? 'object with keys {' + Object.keys(children).join(', ') + '}'
          : childrenString,
        addendum,
      );
    }
  }
  return subtreeCount;
}

函数里依据 children 类型进行不同的操作，如果 children 是 null(undefined 和 boolean 也作为 null 处理)、string、number 或者 $$typeof 为 REACT_ELEMENT_TYPE 、REACT_PORTAL_TYPE 时 （而这些种类的 children 特点都是 都不是数组或者说可遍历对象，都是单节点 ），会直接调用传入的 callback ，就是 mapSingleChildIntoContext 这个函数。

而如果 children 是数组，会对 children 进行遍历，并对数组每个元素调用函数自身。

mapSingleChildIntoContext()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function mapSingleChildIntoContext(bookKeeping, child, childKey) {
  const {result, keyPrefix, func, context} = bookKeeping;
  let mappedChild = func.call(context, child, bookKeeping.count++);
  if (Array.isArray(mappedChild)) {
    mapIntoWithKeyPrefixInternal(mappedChild, result, childKey, c => c);
  } else if (mappedChild != null) {
    if (isValidElement(mappedChild)) {
      mappedChild = cloneAndReplaceKey(
        mappedChild,
        // Keep both the (mapped) and old keys if they differ, just as
        // traverseAllChildren used to do for objects as children
        keyPrefix +
          (mappedChild.key && (!child || child.key !== mappedChild.key)
            ? escapeUserProvidedKey(mappedChild.key) + '/'
            : '') +
          childKey,
      );
    }
    result.push(mappedChild);
  }
}

函数接收三个参数，第一个 bookKeeping 就是之前的 traverseContext, 第二个是 children 本身 （单节点）, 第三个是节点的 key 。
在这个函数里终于调用了我们最开始传入 React.Children.map 的第二个函数参数，调用完成后判断返回的值是否是数组，如果是数组，会重新调用 mapIntoWithKeyPrefixInternal() ，这里就又是一层递归。
那么又来了，为什么返回值会是一个数组嘞？

1
2
3
4
5
6
7
8
9
function hello (props) {
  return (
    <div>
      {
        React.Children.map(props.children, child => [child, [child, child]])
      }
    </div>
  )
}

然后确定已经是单节点了，判断一下是否是合理的元素，是合理的元素的话，调用 cloneAndReplaceKey() 函数，新建了一个 React 元素，并重置 key 。

cloneAndReplaceKey() 
1
2
3
4
5
6
7
8
9
10
11
12
13
// 在 ReactElement.js 里
export function cloneAndReplaceKey(oldElement, newKey) {
  const newElement = ReactElement(
    oldElement.type,
    newKey,
    oldElement.ref,
    oldElement._self,
    oldElement._source,
    oldElement._owner,
    oldElement.props,
  );
  return newElement;
}

整体来说通过两层递归来实现对 props.children 的处理。

React.Children.forEach()

和 map() 函数里调用的 mapIntoWithKeyPrefixInternal() 长得一模一样。
与 map() 之间的区别在于 forEach() 没有返回值，在上面对 map() 的阅读时，强调了有一个 result 作为 map() 的返回值，强调的原因也就在这里。

React.Children.forEach()
1
2
3
4
5
6
7
8
9
10
11
12
13
function forEachChildren(children, forEachFunc, forEachContext) {
  if (children == null) {
    return children;
  }
  const traverseContext = getPooledTraverseContext(
    null,
    null,
    forEachFunc,
    forEachContext,
  );
  traverseAllChildren(children, forEachSingleChild, traverseContext);
  releaseTraverseContext(traverseContext);
}

React.Children.toArray()

调用了 mapIntoWithKeyPrefixInternal() ，除了没有 context 作为参数意外，第四个参数 也是 c => c 。
也是将数组展开。

1
2
3
4
5
function toArray(children) {
  const result = [];
  mapIntoWithKeyPrefixInternal(children, result, null, child => child);
  return result;
}

React.Children.onlyChild()

就是判断下是否是单节点。。。

onlyChild()
1
2
3
4
5
6
7
function onlyChild(children) {
  invariant(
    isValidElement(children),
    'React.Children.only expected to receive a single React element child.',
  );
  return children;
}

React.Children.count()

1
2
3
4
5
6
7
8
9
/**
 * Count the number of children that are typically specified as
 * `props.children`.
 * @param {?*} children Children tree container.
 * @return {number} The number of children.
 */
function countChildren(children) {
  return traverseAllChildren(children, () => null, null);
}

函数注释里也说了，就是用来数一下通常是 props.children 的 children 里有多少个子节点。

2019-08-10更新

Memo

作用大概就是说允许函数组件可以像 PureComponent 一样，只有在 props 的内容更新的时候才重新渲染组件。目的也就很清晰，是为了性能优化。

React.memo 为高阶组件。它与 React.PureComponent 非常相似，但它适用于函数组件，但不适用于 class 组件。 –> React.memo

使用

看一个官方 demo ，就可以清晰的认知到 memo 的作用。

React.memo 就是一个 React 的顶层 api ，第一个参数为函数组件，第二个参数为一个用于比较的函数。

memo demo
1
2
3
4
5
6
7
8
9
10
11
function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);

源码

memo
1
2
3
4
5
6
7
8
9
10
11
12
13
export default function memo<Props>(
  type: React$ElementType,
  compare?: (oldProps: Props, newProps: Props) => boolean,
) {
  if (__DEV__) {
    ...
  }
  return {
    $$typeof: REACT_MEMO_TYPE,
    type,
    compare: compare === undefined ? null : compare,
  };
}

接收两个参数，第一个函数组件，第二个是对比函数，返回值是一个 boolean 。
返回的对象的 type 属性的值就是传入的函数组件。

Fragment

这个就是那个，长得很可爱的 <></>，
就是 return 的时候只能返回一个元素嘛，但是又不想有额外的东西，就可以用这个。

用法

又到了康康栗子就会环节

React.Fragment
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 官方 demo
render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}
// 非官方 demo
render() {
  return(
    <>
      Smoe text.
      <h2>A heading</h2>
    </>
  )
}

两个 demo 都到了 Fragment 。区别在于非官方 demo 里 return 没有加分号 用 <> 代替了 <React.Fragment>

源码

hmm 就是一个 symbol。
在 React.js 文件里

1
2
3
4
5
6
7
8
9
import {
  REACT_FRAGMENT_TYPE,
  ...
} from 'shared/ReactSymbols';
const react = {
  ...
  Fragment: REACT_FRAGMENT_TYPE,
  ...
}

那么第一章节就结束了

主要就是浏览了一下顶层的API

官方文档-React 顶层 API

可能上面有提到 react 其实内容很少，主要原因是 react-dom 和 react-native 分别处理了不同的平台的活动，所以 react 里很精简的只有共同用的一些内容。

其实上面的所有内容都是对于 API 有了很浅显的了解 ，更多的在于知道了调用了某个 api 之后会进行怎么样的初始化，而后续的操作都要在 react-dom 里看到 （慢慢来嘛

ㅅㄱ ~

0%