Fancy Front End Fancy Front End
  • 开始上手
  • 基础
  • 调度器(Scheduler)
  • 更新器(Updater)
  • 渲染器(Render)
  • 更新周期
  • hooks 原理
  • 总结
  • 📙 React源码漂流记
  • 开始上手
  • 基础
  • reactivity
  • runtime-core
  • runtime-dom
  • Awesome Web
  • Awesome NodeJS
话题
  • 导航
  • Q&A
  • 幻灯片
  • 关于
  • 分类
  • 标签
  • 归档
博客 (opens new window)
GitHub (opens new window)

Jonsam NG

让有意义的事变得有意思,让有意思的事变得有意义
  • 开始上手
  • 基础
  • 调度器(Scheduler)
  • 更新器(Updater)
  • 渲染器(Render)
  • 更新周期
  • hooks 原理
  • 总结
  • 📙 React源码漂流记
  • 开始上手
  • 基础
  • reactivity
  • runtime-core
  • runtime-dom
  • Awesome Web
  • Awesome NodeJS
话题
  • 导航
  • Q&A
  • 幻灯片
  • 关于
  • 分类
  • 标签
  • 归档
博客 (opens new window)
GitHub (opens new window)
  • 开始上手
  • plan 计划
  • 基础

    • 开始上手
    • 章节说明
    • F&Q
    • ReactChildren
    • ReactElement
  • 调和(Reconciliation)

  • 调度器(Scheduler)

  • 更新器(Updater)

  • 渲染器(Render)

  • hooks原理

  • 总结

  • React源码漂流记

  • react
  • 基础
jonsam
2022-04-14

开始上手

在 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

其中比较重要的大致为:

  • 元素相关: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
plan 计划
章节说明

← plan 计划 章节说明→

最近更新
01
渲染原理之组件结构与 JSX 编译
09-07
02
计划跟踪
09-06
03
开始上手
09-06
更多文章>
Theme by Vdoing | Copyright © 2022-2022 Fancy Front End | Made by Jonsam by ❤
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式