Component
React中提供两种形式，一种是类组件，另一种是函数式组件，而在类组件组件中需要使用Component继承
参考Component类的源码。可见，这个类是一个辅助组件更新的帮助类。其中updater保存了组件更新的方法，这个方法主要由外部注入。
/**
* 用于更新组件状态的基类帮助程序（Base class helpers）。
*/
function Component(props, context, updater) {
this.props = props;
this.context = context;
// 如果组件具有字符串引用（refs），我们将在稍后指定另一个对象。
this.refs = emptyObject;
// 我们初始化了默认的更新程序，但真正的更新程序由渲染器注入.
this.updater = updater || ReactNoopUpdateQueue;
}
Component.prototype.isReactComponent = {};
PureComponent
参考PureComponent的源码可以看出与Component完全一样。只是会对props和state进行浅比较，跳过不必要的更新，这样就能提高组件性能。
/**
* 一个便捷组件，带有sCU的默认浅比较。
*/
function PureComponent(props, context, updater) {
this.props = props;
this.context = context;
// 如果组件具有字符串引用，我们将在稍后指定另一个对象。
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
}
理解：
shouldComponentUpdate()会对新旧props、state进行浅比较，不一致时就会触发update。PureComponent通过自带的props和state的浅比较实现了shouldComponentUpdate()，这点Component并不具备。但因为是浅比较，所以需要谨慎使用。
memo
参考源码，它合并了pureComponent和 componentShouldUpdate的功能。它是一个高阶组件，函数式组件和类组件都可以使用。可以包装子组件，优化性能。
export function memo<Props>(
type: React$ElementType,
compare?: (oldProps: Props, newProps: Props) => boolean,
) {
const elementType = {
$$typeof: REACT_MEMO_TYPE,
type,
compare: compare === undefined ? null : compare,
};
return elementType;
}
包含两个参数：
- 组件本身，也就是要优化的组件
- (pre, next) => boolean。会先对props对比，再进入这个函数做精细化控制。
pre是之前的数据，next是现在的数据，返回是否更新。
forwardRef
参考源码
让ref可以通过props传递。用于父组件获取子组件值等通讯问题。
export function forwardRef<Props, ElementType: React$ElementType>(
render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) {
const elementType = {
$$typeof: REACT_FORWARD_REF_TYPE,
render,
};
return elementType;
}
// 包装子组件
const ForwardChild = forwardRef((props, ref) => <Child ref={ref} {...props} />)
// 子组件传给父组件
<ForwardChild ref={(node) => this.node = node} />
Fragment
包装多个子节点的空元素。
<></>是<Fragment></Fragment>的简写，但不能传key。
lazy
参考源码。定义一个动态加载组件，这样有助于缩减bundle的体积，并延迟加载在初次渲染时未用到的组件，也就是懒加载组件（高阶组件）
export function lazy<T>(
ctor: () => Thenable<{default: T, ...}>,
): LazyComponent<T, Payload<T>> {
const payload: Payload<T> = {
// We use these fields to store the result.
_status: Uninitialized,
_result: ctor,
};
const lazyType: LazyComponent<T, Payload<T>> = {
$$typeof: REACT_LAZY_TYPE,
_payload: payload,
_init: lazyInitializer,
};
return lazyType;
}
const LazyComponent = lazy(() => import('./child'));
<Suspense>
<LazyComponent />
</Suspense>
- 参数是一个promise，resove一个React组件。
- 需要与Suspense共同使用。
Suspense
让组件"等待"某个异步组件操作，直到该异步操作结束即可渲染。
- fallback参数是默认渲染。
Profiler
检测一次react组件渲染时的性能开销。
- id：
Profiler树的id - phase：
mount挂载，update渲染 - actualDuration：更新
committed花费的渲染时间 - baseDuration：渲染整颗子树需要的时间
- startTime：更新开始渲染的时间
- commitTime：更新
committed的时间 - interactions：本次更新的
interactions的集合
StrictMode
StrictMode不会出现在UI层面，只是会检查和警告
