基础-ReactAPI

,

ReactAPI

平时我们都说我们使用三大框架之一的React进行开发, 但其实大部分人都不一定知道React是个什么东西. 这一系列文章将从React底层来剖析它的基础, 思想以及运行机制.

React的核心包括react库和react-dom库,react仅仅1000多行代码，而react-dom却将近2w行. 其实 react库中仅仅是定义了我们的一些基础, 导出一些我们常用的API, 而react-dom库则包含了大部分框架逻辑.

这一系列文章是在React16+的基础上写的, React16相较于之前的版本是核心上的一次重写，虽然主要的API都没有变化，但是增加了很多能力。并且首次引入了Fiber的概念，之后新的功能都是围绕Fiber进行实现，比如AsyncMode，Profiler等

下面是React暴露出来的一些API: 

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
const Children = {
  map,
  forEach,
  count,
  toArray,
  only,
};

export {
  Children,
  createRef,
  Component,
  PureComponent,
  createContext,
  forwardRef,
  lazy,
  memo,
  useCallback,
  useContext,
  useEffect,
  useImperativeHandle,
  useDebugValue,
  useLayoutEffect,
  useMemo,
  useReducer,
  useRef,
  useState,
  REACT_FRAGMENT_TYPE as Fragment,
  REACT_PROFILER_TYPE as Profiler,
  REACT_STRICT_MODE_TYPE as StrictMode,
  REACT_SUSPENSE_TYPE as Suspense,
  createElement,
  cloneElement,
  isValidElement,
  ReactVersion as version,
  ReactSharedInternals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
  // Deprecated behind disableCreateFactory
  createFactory,
  // Concurrent Mode
  useTransition,
  useDeferredValue,
  REACT_SUSPENSE_LIST_TYPE as SuspenseList,
  withSuspenseConfig as unstable_withSuspenseConfig,
  // enableBlocksAPI
  block,
  // enableDeprecatedFlareAPI
  useResponder as DEPRECATED_useResponder,
  createResponder as DEPRECATED_createResponder,
  // enableFundamentalAPI
  createFundamental as unstable_createFundamental,
  // enableScopeAPI
  createScope as unstable_createScope,
  // enableJSXTransformAPI
  jsx,
  jsxs,
  // TODO: jsxDEV should not be exposed as a name. We might want to move it to a different entry point.
  jsxDEV,
};

Children

这个对象提供了一堆帮你处理props.children的方法，因为children是一个类似数组但是不是数组的数据结构，如果你要对其进行处理可以用React.Children外挂的方法。当你真正了解React.Children中方法的基础原理后, 你会先这是一个很方便很强大的API.

createRef

React即将抛弃<div ref="this.ref" />这种 string ref的写法, 将来只能用下面方式来使用ref:

1
2
3
4
5
6
7
8
9
10
11
12
// 1. createRef
this.ref = React.createRef();

<div ref={this.ref} />

// 2. 箭头函数
<div ref={(ref) => this.ref = ref } />

// 3. useRef
const ref = React.useRef();

<div ref={ref} />

Component & PureComponent

Component是我们使用React框架的基础, 我们的类都是继承自Componet,而真正看过源码之后才知道,Component其实一个自定义的构造函数, 而PureComponent也是继承自Component, 唯一的区别是PureComponent的原型上多了一个标识:

1
2
3
4
5
6
// 对props和state的浅比较
if (ctor.prototype && ctor.prototype.isPureReactComponent) {
  return (
    !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
  );
}

createContext

createContext是官方定稿的context方案，在这之前我们一直在用的老的context API都是React不推荐的API，现在新的API释出，官方也已经确定在17大版本会把老API去除。

forwardRef

forwardRef是用来解决HOC组件传递ref的问题的，所谓HOC就是Higher Order Component,forwardRef的使用方法如下：

1
2
3
const newComponent = React.forwardRef((props, ref) => (
	<WrapperComponent {...props} ref={ref}>
))

Hooks

几个use开头的API是React新提供的针对function component的Hook方法,

类型

下面四个是React提供的组件, 在React包中,他们只是一个占位符, 真正的处理逻辑在React-dom中,在React实际检测到他们的时候会做一些特殊的处理.

1
2
3
4
REACT_FRAGMENT_TYPE as Fragment,
REACT_PROFILER_TYPE as Profiler,
REACT_STRICT_MODE_TYPE as StrictMode,
REACT_SUSPENSE_TYPE as Suspense,

Element操作

  • createElement : 创建一个Element对象
  • cloneElement : 克隆一个Element对象
  • createFactory : 创建专门用来创建某一类ReactElement的工厂的
  • isValidElement : 验证是否是一个ReactElement

jsx & jsxs & jsxDEV

与React.createElement类似, 用来创建一个Element对象.