1. React.createElement()：创建并返回指定类型的新React元素
React.createElement(
type,
[props],
[...children]
)
2. React.cloneElement()：以 element 元素为样板克隆并返回新的 React 元素
React.cloneElement(
element,
[props],
[...children]
)
返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。新的子元素将取代现有的子元素，而来自原始元素的 key 和 ref 将被保留。cloneElement()几乎等同于
<element.type {...element.props} {...props}>
{children}
</element.type>
3. React.createContext()：创建一个 Context 对象
interface Context<T> {
Provider: Provider<T>;
Consumer: Consumer<T>;
displayName?: string;
}
function createContext<T>(
defaultValue: T,
): Context<T>;
MyContext.Provider允许消费订阅context变化
MyContext.Consumer/React.useContext/this.context使用订阅context变更
context使用介绍
4. React.isValidElement()：验证对象是否为 React 元素，返回值为 true 或 false
function isValidElement<P>(
object: {} | null | undefined
): object is ReactElement<P>;
5. React.Children：提供了用于处理 this.props.children 不透明数据结构的实用方法
是一个对象，包括map/forEach/count/only/toArray几个属性
interface ReactChildren {
map<T, C>(children: C | C[], fn: (child: C, index: number) => T):
C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;
forEach<C>(children: C | C[], fn: (child: C, index: number) => void): void;
count(children: any): number;
only<C>(children: C): C extends any[] ? never : C;
toArray(children: ReactNode | ReactNode[]): Array<Exclude<ReactNode, boolean | null | undefined>>;
}
const Children: ReactChildren;
- React.Children.map(children,function(child,index))
在 children 里的每个直接子节点上调用一个函数，并将 this 设置为 thisArg。如果 children 是一个数组，它将被遍历并为数组中的每个子节点调用该函数。如果子节点为 null 或是 undefined，则此方法将返回 null 或是 undefined，而不会返回数组 - React.Children.forEach(children,function(child,index))
与React.Children.map()类似，但不会返回一个数组 - React.Children.count(children)
返回children中的组件总数量，等同于通过map或forEach调用回调函数的次数。 - React.Children.only(children)
验证 children 是否只有一个子节点（一个 React 元素），如果有则返回它，否则此方法会抛出错误
try {
React.Children.only(children);
} catch (err) {
React.Children.forEach(children, child => {
console.log(20, child);
});
}
- React.Chidlren.toArray(children)
将 children 这个复杂的数据结构以数组的方式扁平展开并返回，并为每个子节点分配一个 key。当你想要在渲染函数中操作子节点的集合时，它会非常实用，特别是当你想要在向下传递 this.props.children 之前对内容重新排序或获取子集时
6. React.Fragment：能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素
可以简写为：<></>
7. React.createRef()/React.forwardRef()
React.createRef(): 类组件中创建Refs
React.forwardRef()：是一个高阶组件，接受一个函数组件，返回一个新组件，新的组件中第二个参数为ref
详细内容
8.React.lazy/React.Suspense
React.lazy() :定义一个动态加载的组件
在React.Suspense 组件中渲染 lazy 组件
// 该组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
// 显示 <Spinner> 组件直至 OtherComponent 加载完成
<React.Suspense fallback={<Spinner />}>
<div>
<OtherComponent />
</div>
</React.Suspense>
);
}
fallback 属性接受任何在组件加载过程中想展示的 React 元素
9. React.Component/React.PureComponent/React.memo()
- React.Component： 定义 React 类组件的基类
- React.PureComponent：React.Component相似。区别在于React.Component并未实现 shouldComponentUpdate()，React.PureComponent中以浅层对比 prop 和 state 的方式来实现了该函数。
- React.memo：是一个高阶组件，通过记忆组件渲染结果的方式（浅对比props）来提高组件的性能表现。
React.memo仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer或 useContext的 Hook，当 context 发生变化时，它仍会重新渲染。支持第二个参数，传入自定义的比较函数。
