React与React

1. React API

React是React库的入口，通过script, import等方法，可以获得React的顶层API。

1	import React from 'react'

1.1 定义组件

使用React组件可以将UI拆分为独立且复用的代码片段，每部分都可独立维护。你可以通过React.Component 或 React.PureComponent 来定义React组件。

1 2 3 4 5

class extends React.Component { render() { return <h1>{this.props.name}</h1> } }

如果你的函数组件在给定相同props的情况下渲染相同的结果，那么你可以通过将其包装在React.memo中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 大专栏  React与React

const MyComponent = React.memo(function MyComponent(props){ }) ``` #### 1.2 创建元素 我们一般使用JSX来编写UI组件。实际上，每个JSX元素都是调用`React.createElement()`的语法糖。如果你使用了JSX，就不需要调用这个方法。 ```js // 创建元素 React.createElement(type, [props], [...children]) // 克隆元素 React.cloneElement(element, [props], [...children]) // 验证对象是否为React元素 React.isValidElement(object) // 提供了用于处理this.props.children不透明数据结构的方法 React.Children.map(children, function([thisArg]))

1.3 Fragments

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

1.5 Refs

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

1.6 Suspense

使得组件可以等待某些操作结束后，再进行渲染。
React.lazy
React.Suspense

1.7 Hook

2. React-Dom API