React 核心API

这里对重要的 React API 做介绍

概览

createContext API 可以创建一个 context，你可以将其提供给子组件，通常会与 useContext 一起配合使用。
forwardRef 允许组件将 DOM 节点作为 ref 暴露给父组件。
lazy 允许你延迟加载组件，直到该组件需要第一次被渲染。
memo 允许你在 props 没有变化的情况下跳过组件的重渲染。通常 useMemo 与 useCallback 会一起配合使用。
startTransition 允许你可以标记一个状态更新是不紧急的。类似于 useTransition。
act 允许你在测试中包装渲染和交互，以确保在断言之前已完成更新。

forwardRef

forwardRef 允许组件使用 ref 将 DOM 节点暴露给父组件。

jsx

const SomeComponent = forwardRef(render)

返回值

forwardRef 返回一个可以在 JSX 中渲染的 React 组件。与作为纯函数定义的 React 组件不同，forwardRef 返回的组件还能够接收 ref 属性。

用法：将 DOM 节点暴露给父组件

子组件

jsx

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} ref={ref} />
    </label>
  );
});

父组件：

jsx

function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        编辑
      </button>
    </form>
  );
}

memo

memo 允许你的组件在 props 没有改变的情况下跳过重新渲染

jsx

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

参数

可选参数 arePropsEqual：一个函数，接受两个参数：组件的前一个 props 和新的 props。如果旧的和新的 props 相等，即组件使用新的 props 渲染的输出和表现与旧的 props 完全相同，则它应该返回 true。否则返回 false。通常情况下，你不需要指定此函数。默认情况下，React 将使用 Object.is 比较每个 prop。

用法

当 props 没有改变时跳过重新渲染

过时的 API

Children 允许你处理和转化作为 children 的 JSX。查看替代方案。
cloneElement 允许你使用一个元素作为初始值创建一个新的 React 元素。查看替代方案。
Component 允许你定义一个 JavaScript class 作为 React 类式组件。查看替代方案。
createElement 允许你创建一个 React 元素，但是一般会使用 JSX。
createRef 允许你创建一个可以包含任何值的 ref 对象。查看替代方案。
isValidElement 检测参数值是否为 React 元素，通常会与 cloneElement. 一起使用。
PureComponent 与 Component 类似，但是当 props 相同时会跳过重新渲染。查看替代方案。

React 核心API ​

概览 ​

forwardRef ​

返回值 ​

用法：将 DOM 节点暴露给父组件 ​

memo ​

参数 ​

用法 ​

当 props 没有改变时跳过重新渲染 ​

过时的 API ​

参考资料 ​