react的那些好用的顶层API

官网文档

除了hooks，还有其他的顶层api，最近在写公司公共框架中的组件中特别好用

1、ReactDOM.createPortal

ReactDOM.createPortal(child, container)

需要将子节点渲染到存在于父组件以外的DOM节点 比如写在这种公共组件中的代码有的时候需要插入body，"跳出"公共组件容器。

render() {
//举例 ReactDOM.createPortal(<div>xxxx</div>, document.body);
return ReactDOM.createPortal(ReactNode, container);
}

第一个参数是可渲染的react节点，第二个参数是要插入的位置

2、React.isValidElement

验证对象是否为React元素，返回值为true或false。

3、React.cloneElement()

以element元素为样板克隆并返回新的React元素,config中应包含新的props, 返回元素的props 是将新的props与原始元素的props浅层合并后的结果,新的子元素将取代现有的子元素

React.cloneElement(
element,
[config],
[...children]
)

4、createElement()

创建并返回指定类型的新React元素。其中的类型参数既可以是标签名字符串（如 'div' 或 'span'），也可以是React组件类型

React.createElement(
type,
[props],
[...children]
)

5、React.Children

React.Children 提供了用于处理 this.props.children 不透明数据结构的实用方法。

• React.Children.map
• React.Children.forEach
• React.Children.toArray 将children这个复杂的数据结构以数组的方式扁平展开并返回，并为每个子节点分配一个key。
• React.Children.only 验证children是否只有一个子节点
• React.Children.count 返回children中的组件总数量

6、React.Fragment

React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。

7、React.forwardRef

• 转发 refs 到 DOM 组件
• 在高阶组件中转发 refs

const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

React 会将 元素的 ref 作为第二个参数传递给 React.forwardRef 函数中的渲染函数。该渲染函数会将 ref 传递给 元素。