共计 3323 个字符，预计需要花费 9 分钟才能阅读完成。
一、简介
React 库提供了如下 API，可间接调用。
二、创立元素
1、createElement()
-
性能：创立 React 元素。
// 函数原型 React.createElement( type, [props], [...children] ) -
两种创立元素的形式：
-
应用 JSX 来创立元素，不须要调用 createElement()，预处理器 babel 会解决
// 应用 jsx 创立元素和组件 class Hello extends React.Component {render() {return <div>Hello {this.props.toWhat}</div>; } } ReactDOM.render( <Hello toWhat="World" />, document.getElementById('root') ); -
不应用 JSX 来创立元素，就须要调用 createElement()
// 不应用 jsx 创立元素和组件 class Hello extends React.Component {render() {return React.createElement('div', null, `Hello ${this.props.toWhat}`); } } ReactDOM.render(React.createElement(Hello, { toWhat: 'World'}, null), document.getElementById('root') );
-
三、元素操作 API
1、cloneElement()
-
性能：复制生成一个新元素。
// 函数原型 React.cloneElement( element, [config], [...children] ) // config：含新的 props，key 或 ref -
等同于 jsx
React.cloneElement() // 简直等同于上面 jsx 写法 < element.type {...element.props} {...props}> {children}</element.type >
2、isValidElement()
验证对象是否为 React 元素，返回值为 true 或 false。
React.isValidElement(object)四、子元素操作 API
React.Children 性能：能够遍历拜访子元素，同时能够拜访到属性 this.props.children，无法访问到的数据。
1、React.Children.map
-
性能：遍历子元素，并返回一个数组。函数原型如下：
React.Children.map(children, function) -
应用实例：遍历并复制子元素
const Child = () => (<div>child</div>) class App extends React.Component {render() {const template1 = React.Children.map(this.props.children, (child) => {return React.cloneElement(child); }); return template1; } }
2、React.Children.forEach
-
性能：与 React.Children.map 一样作用，区别是返回值不是数组。
React.Children.forEach(children, function)
3、React.Children.count
-
性能：返回 children 中的组件总数量，等同于通过 map 或 forEach 调用回调函数的次数。
React.Children.count(children)
4、React.Children.only
-
性能：验证 children 是否只有一个子节点(React 元素)，如果有则返回它，否则此办法会抛出谬误。
React.Children.only(children) - 留神点：React.Children.only() 不承受 React.Children.map() 的返回值，因为它是一个数组而并不是 React 元素。
五、组件相干 API
1、React.Component
-
性能：应用 ES6 classes 形式定义 React 组件的基类：
class Greeting extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>; } }
2、React.PureComponent
- 性能：与 React.Component 一样，都能够继承他们来实现组件。
- 区别：React.PureComponent 实现了 shouldComponentUpdate()，而 React.Component 没有。React.PureComponent 只有在 prop 和 state 数据变动时，才进行组件渲染，可用于组件性能优化。
-
两点留神：
- 确定 prop 和 state 数据是否变动时，会进行比拟操作，这个比拟操作只适宜简略数据结构，不适用于简单数据结构，请确保 prop 和 state 对象不是简单数据结构。
- 确保 子组件 也都继承 React.PureComponent。
3、React.memo
- 性能：是一个高阶组件，能够包裹其余组件来进步性能。
-
原理：React.memo 会监控组件的 props 属性的变动，只有变动才从新渲染，否则跳过渲染操作。
const MyComponent = React.memo(function MyComponent(props) {/* 应用 props 渲染 */}); -
两点留神：
- 如果 React.memo 组件中应用了 useState、useContext，那么 state、context 数值扭转时，React.memo 组件也会从新渲染。
-
React.memo 无奈监控简单数据结构 props 的变动，须要自定义比拟函数来实现对简单数据结构的监控。
function MyComponent(props) {/* 应用 props 渲染 */} function areEqual(prevProps, nextProps) { /* 如果把 nextProps 传入 render 办法的返回后果与 将 prevProps 传入 render 办法的返回后果统一则返回 true，否则返回 false */ } export default React.memo(MyComponent, areEqual);
六、提早加载
渲染页面时，能够不加载未用到的组件。
1、React.lazy
-
性能：提早加载未用到的组件，依赖
React.Suspense// 这个组件是动静加载的 const SomeComponent = React.lazy(() => import('./SomeComponent')); - 留神：应用
React.lazy的动静引入个性须要 JS 环境反对 Promise。在 IE11 及以下版本的浏览器中须要通过引入 polyfill 来应用该个性。
2、React.Suspense
- 名称：指定加载指示器（loading indicator）
-
性能：配合上
React.lazy实现提早加载。// 该组件是动静加载的 const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( // 显示 <Spinner> 组件直至 OtherComponent 加载实现 <React.Suspense fallback={<Spinner />}> <div> <OtherComponent /> </div> </React.Suspense> ); }
七、其余 API
1、React.Fragment
- 性能：不额定创立 DOM 元素的状况下，让
render()返回多个元素。应用详情，看这里
2、React.createRef
- 性能：创立 ref 对象，指向组件，让其余组件不便拜访其外部数据和办法。应用详情，看这里
3、React.forwardRef
- 性能：React.forwardRef 会创立一个 React 组件，新组件能够把传递进来的 ref 对象，转发给子元素。
- 两种应用场景：
转发 refs 到 DOM 组件、在高阶组件中转发 refs。详情，看这里
八、参考文档：
- React 的顶层 API 有哪些？