React API

createElement()

创基并返回指定类型的 React元素。其中类型参数既可以是DOM标签字符串,也可以是React组件类型,或是React fragment类型

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

JSX 编写的代码将会被转换成使用 React.createElement() 的形式。

cloneElement()

以 element 元素为样板克隆并返回新的React元素,返回元素的props将新的props与原始的prosp浅合并。新的子元素取代现有的子元素,原始元素的 key 和 ref 将被保留

通过 ref 获取子节点时,将不会意外地从祖先节点上窃取它。相同的 ref 将添加到克隆后的新元素中。

1
React.cloneElement(element,[props],[...children])

isValidElement()

验证对象是否为React元素,返回值为 true or false

React.children

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

React.Children.map

  • 在每个直接子节点上调用一个函数,并将 this(执行期上下文) 设置为 thisArg
  • 如果Children 是一个数值,它将被遍历并为数组中的每个子节点调用该函数。
  • 如果子节点为nullundefined,则返回对应的 null 或 undefined。
1
2

React.Children.map(children,function[(thisArg)])

如果children 是一个Frgment对象,它将被视为单一子节点的情况处理,不被遍历

React.Children.forEach

React.Children.map 类似,但是不会返回数组

1
2

React.Children.forEach(children,function[(thisArg)] )

React.Children.count

返回 children 中组件总数

1
2

React.Children.count(children)

React.Children.only

验证children是否只有一个React元素,有则返回它,无则抛出错误

1
2

React.Children.only(children)

**此方法不接受React.Children.map的返回值,因为它是一个数组

React.Children.toArray

将children 这个复杂的数据结构以数组的形式扁平展开并返回,且为每个子节点分配一个key.想要在渲染函数中操作子节点的集合时,非常实用

1
2

React.Children.toArray(children)

注意:此方法在拉平展开节点列表时,更改key值以保留嵌套数组的语言。即 toArray 会为返回数组中的每个key添加前缀,使每个元素key的范围都限定在此函数入参数组的对象内

React.Fragment

React.Fragment 能在不额外创建DOM元素情况下,让 render方法返回多个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

render(){
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
)
}
// 简写
render(){
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
)
}

更多信息

React.createRef

创建一个能通过 ref 属性附加到 React元素的 ref

1
2
3
4
5
6
7
8
9
10
11
12
class Example extends React.Componet {
constructor(props){
this.inputRef = React.createRef();
}
reder(){
return <input type="text" ref= {this.inputRef} />
}

componentDidMount(){
this.inputRef.current.focus()
}
}

React.forwardRef

React.forwardRef 会创建一个React组件,能将其接受的ref 属性转发到其组件树下的另一个组件中。

React.forwardRef接受渲染函数作为参数。使用props和ref z作为参数调用此函数,返回 React节点

1
2
3
4
5
6
7
const Example = React.forwardRef((props,ref)=> ( <button ref={ref} className="FancyButton">
{props.children}
</button>));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

React.lazy

React.lazy()允许你定义一个动态加载组件。有助于减少 bundle的体积,并提高首屏加载效率

此特性需要支持 promise

1
const component = React.lazy(()=> import('./component')) // 动态加载

参考文章

React.Suspense

React.Suspense 可以指定加载指示器(loading indicator),以防其组件树中的某些子组件尚未具备渲染条件。目前,懒加载组件是 <React.Suspense> 支持的唯一用例:

1
2
3
4
5
6
7
8
9
10
11
12
13
// 该组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
return (
// 显示 <Spinner> 组件直至 OtherComponent 加载完成
<React.Suspense fallback={<Spinner />}>
<div>
<OtherComponent />
</div>
</React.Suspense>
);
}

请注意,lazy 组件可以位于 Suspense 组件树的深处——它不必包装树中的每一个延迟加载组件。最佳实践是将 <Suspense> 置于你想展示加载指示器(loading indicator)的位置,而 lazy() 则可被放置于任何你想要做代码分割的地方。

虽然目前尚未支持其它特性,但未来我们计划让 Suspense 支持包括数据获取在内的更多场景。可以在roadmap 中了解相关信息。

React.lazy()<React.Suspense> 尚未在 ReactDOMServer 中支持。这是已知问题,将会在未来解决。

--------------------- Thank you for reading ---------------------