「React」2024最新版本入门 React 19 你需要掌握什么

前言

React 是前端很火且被广泛使用的一个框架，在当下这个时间想入门上手React开发，我们需要了解它的哪些最为关键的特性，本文将一一列出。

介绍

类组件在官方文档中也已经被废弃，下面均为 React Hooks

useState
useEffect
useLayoutEffect
useMemo
useCallback
useRef
forwardRef & useImperativeHandle
forwardRef 接受一个渲染函数作为参数。React 将会使用 props 和 ref 调用此函数：

javascript 复制代码

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

useImperativeHandle 是 React 中的一个 Hook，它能让你自定义由 ref 暴露出来的句柄。

javascript 复制代码

import { forwardRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  useImperativeHandle(ref, () => {
    return {
      // ... 你的方法 ...
    };
  }, []);
  // ...

暴露命令式句柄而非 DOM 节点

可以使用被称为命令式句柄（imperative handle）的自定义对象暴露一个更加受限制的方法集，而非整个 DOM 节点。为了实现这个目的需要定义一个单独的 ref 存储 DOM 节点：

javascript 复制代码

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  // ...

  return <input {...props} ref={inputRef} />;
});
将收到的 ref 传递给 useImperativeHandle 并指定你想要暴露给 ref 的值：

import { forwardRef, useRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus();
      },
      scrollIntoView() {
        inputRef.current.scrollIntoView();
      },
    };
  }, []);

  return <input {...props} ref={inputRef} />;
});

如果某个组件得到了 MyInput 的 ref，则只会接收到 { focus, scrollIntoView } 对象，而非整个 DOM 节点。这可以让 DOM 节点暴露的信息限制到最小。

useContext
useTransition
useDeferredValue

了解即可

use
use 是一个 React API，它可以让你读取类似于 Promise 或 context 的资源的值。与 React Hook 不同的是，可以在循环和条件语句（如 if）中调用 use。但需要注意的是，调用 use 的函数仍然必须是一个组件或 Hook。
useId
useDebugValue
useInsertionEffect
useInsertionEffect 可以在布局副作用触发之前将元素插入到 DOM 中。useInsertionEffect 是为 CSS-in-JS 库的作者特意打造的。除非你正在使用 CSS-in-JS 库并且需要注入样式，否则你应该使用 useEffect 或者 useLayoutEffect。
useSyncExternalStore
useSyncExternalStore is a React Hook that lets you subscribe to an external store.