开始上手
在 react 包中 React.js 文件中对 React 有如下定义,通过这个定义,我们可以对 React 的核心 API 初步认识。
const React = {
// ReactChildren提供了处理 this.props.children 的工具集,跟旧版本的一样
Children: { // 操作ReactChildren的方法。ReactChildren不是数组。模拟数组的一些方法。
map,
forEach,
count,
toArray,
only,
},
// 旧版本只有ReactComponent一种
// 新版本定义了三种不同类型的组件基类Component,PureComponent ,unstable_AsyncComponent (16.2.0)
createRef, // 创建ref用于类组件。
Component, // 组件
// The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
PureComponent,
createContext, // 创建 context 用于状态共享和传递,与 useContext 一起使用
forwardRef, // ref转发
lazy, // 懒导入
memo, // 缓存优化
// Hook API
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, // 与lazy结合使用,指定一个feedback。
unstable_SuspenseList: REACT_SUSPENSE_LIST_TYPE,
// 生成组件
// ! createElement/cloneElement开发环境与产品环境不一样。
createElement: __DEV__ ? createElementWithValidation : createElement,
cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,
createFactory: __DEV__ ? createFactoryWithValidation : createFactory,
isValidElement: isValidElement,
version: ReactVersion,
unstable_withSuspenseConfig: withSuspenseConfig,
};
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
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
其中比较重要的大致为:
- 元素相关:Children、createElement、cloneElement。
- 组件相关:Component、PureComponent、createRef、Fragment、forwardRef
- hooks api: useCallback,useContext,useEffect,useImperativeHandle,useDebugValue,useLayoutEffect,useMemo,useReducer,useRef,useState。
- 优化相关:lazy、memo、Suspense。
- 其他:createContext。
编辑 (opens new window)
上次更新: 2022/04/15, 00:23:56