react16笔记（1）

2025年，二开项目基础版本 react v16+，当前文档 v19，差别应该不大，记录一下看文档的学习笔记。

基础知识

  1. 以 use 开头的函数被称为 Hook，只能在函数组件主体（或其他 Hook）顶层调用。
    如果想在一个条件或循环中使用 useState，需要提取一个新的组件并在组件内部使用它。
  2. 组件和 Hook 中的纯净性是 React 的一个关键规则：
    组件必须是幂等的：对一样的输入props、state 和 context，返回相同的输出。
    副作用必须在渲染之外运行（React 可能会多次渲染组件以创建最佳的用户体验）。
    属性和状态是不可变的（一个组件的属性和状态是针对单次渲染不可变）。永远不要直接修改。
    Hook 的返回值和参数是不可变的，一旦值被传递给 Hook，不应该修改。
    值在被传递给 JSX 后是不可变的，如需修改，在创建之前进行修改。
  3. React 负责在必要时渲染组件和 Hook ，它是声明式的：只要在组件逻辑中告诉 React 需要渲染什么。永远不要直接调用组件函数。永远不要将 Hook 作为常规值传递。
  4. 只在顶层调用 Hook。只在 React 函数中调用 Hook。
  5. 一个常见的具有副作用的例子是突变（mutation），在 JavaScript 中指的是改变一个非原始值的值。尽量进行局部 mutation。

react@19.1

  1. Hook

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // 状态帮助组件
    const [index, setIndex] = useState(0);

    // 上下文帮助组件(从祖先组件接收信息，而无需将其作为 props 传递)
    const theme = useContext(ThemeContext);

    // ref 允许组件保存一些不用于渲染的信息，比如 DOM 节点或 timeout ID。
    // 与状态不同，更新 ref 不会重新渲染组件。用于非 React 系统如浏览器内置 API 一同工作时。
    const inputRef = useRef(null)

    // Effect 允许组件连接到外部系统并与之同步，eg:处理网络、浏览器、DOM、动画、使用不同 UI 库编写的小部件以及其他非 React 代码。
    useEffect(() => {
        const connection = createConnection(roomId);
        connection.connect();
        return () => connection.disconnect();
      }, [roomId]);
    // useLayoutEffect 在浏览器重新绘制屏幕前执行，可以在此处测量布局。
    // useInsertionEffect 在 React 对 DOM 进行更改之前触发，可以在此处插入动态 CSS。

    // 优化重新渲染性能：告诉 React 重用缓存的计算结果，或者如果数据自上次渲染以来没有更改，则跳过重新渲染。
    // 使用 useMemo 缓存计算代价昂贵的计算结果。
    const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
    // 使用 useCallback 将函数传递给优化组件之前缓存函数定义。
    const cachedFn = useCallback(fn, dependencies)
    // useTransition 允许将状态转换标记为非阻塞，并允许其他更新中断它。
    // useDeferredValue 允许延迟更新 UI 的非关键部分，以让其他部分先更新。

  2. 组件（这里的 react 内置组件感觉不常用）
    通常使用 <>…</> 代替，它们都允许你在不添加额外节点的情况下将子元素组合。

【生产环境禁用】使用 包裹组件树，以测量其渲染性能。onRender：onRender 回调函数，当包裹的组件树更新时，React 都会调用它。它接收有关渲染内容和所花费时间的信息。

1
2
3
<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

【开发环境】使用 StrictMode 来启用组件树内部的额外开发行为和警告
允许在子组件完成加载前展示后备方案。

  1. API
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // act 是个测试辅助工具，用于在断言前应用待处理的 React 更新。
    await act(async actFn)

    // cache 允许缓存数据获取或计算的结果。仅供与 React 服务器组件 一起使用。
    const cachedFn = cache(fn);

    // 【开发环境】captureOwnerStack 读取当前宿主环境的堆栈
    const stack = captureOwnerStack();

    // 使用 createContext 创建组件能够提供与读取的 上下文
    const SomeContext = createContext(defaultValue)

    // lazy 能够让你在组件第一次被渲染之前延迟加载组件的代码。
    const SomeComponent = lazy(load)

    // memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。
    const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

    // startTransition 可以让你在后台渲染 UI 的一部分。
    startTransition(action)

    // use 是一个 React API，读取类似于 Promise 或 context 的资源的值。
    // 与 React Hook 不同的是，可以在循环和条件语句（如 if）中调用 use。但需要注意的是，调用 use 的函数仍然必须是一个组件或 Hook。
    const value = use(resource);

react-domt@19.1

  1. Hook

    1
    2
    3
    4
    // useFormStatus 是一个提供上次表单提交状态信息的 Hook。 
    // useFormStatus 不会返回在同一组件中渲染的 <form> 的状态信息。
    // 必须从在 <form> 内渲染的组件中调用。
    const { pending, data, method, action } = useFormStatus();

  2. 组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <form action={search}>
        <input name="query" />
        <textarea name="postContent" />
        <select>
          <option value="someOption">Some option</option>
          <option value="otherOption">Other option</option>
        </select>
        <progress value={0.5} />
        <button type="submit">Search</button>
    </form>
1
2
3
4
5
<link rel="icon" href="favicon.ico" /
<meta name="keywords" content="React, JavaScript, semantic markup, html" />
<script> alert("hi!") </script>
<style>{` p { color: red; } `}</style>
<title>我的博客</title>

  1. API
    createPortal 允许你将 JSX 作为 children 渲染至 DOM 的不同部分。

    1
    2
    3
    4
     <div>
      <SomeComponent />
      {createPortal(children, domNode, key?)}
    </div>

    flushSync 允许你强制 React 在提供的回调函数内同步刷新任何更新，这将确保 DOM 立即更新。
    preconnect 可以帮助提前连接到一个期望从中加载资源的服务器。
    prefetchDNS 允许提前查找期望从中加载资源的服务器的 IP。
    preinit 可以预获取和评估样式表或外部脚本。
    preinitModule 可以预获取和评估 ESM 模块。
    preload 可以预获取期望使用的资源，比如样式表、字体或外部脚本。
    preloadModule 可以急切地预获取期望使用的 ESM 模块。

  2. 客户端API
    react-dom/client API 允许你在客户端（浏览器）渲染 React 组件。这些 API 通常在应用程序顶层调用，以初始化 React 树。大多数组件不需要导入或使用这些 API。
    createRoot 允许在浏览器的 DOM 节点中创建根节点以显示 React 组件。
    hydrateRoot 函数允许你在先前由 react-dom/server 生成的浏览器 HTML DOM 节点中展示 React 组件。

  3. 服务端API
    react-dom/server API 允许你通过服务端渲染将 React 组件渲染为 HTML。这些 API 仅在服务器应用程序顶层调用，以生成初始 HTML。大多数组件不需要导入或使用这些 API。
    renderToPipeableStream 将一个 React 组件树渲染为管道化（pipeable）的 Node.js 流。
    renderToReadableStream 将 React 树渲染后发送至 Web 可读流。
    renderToStaticMarkup 会将非交互的 React 组件树渲染成 HTML 字符串。
    renderToString 将 React 树渲染为一个 HTML 字符串。

  4. static APIs
    react-dom/static API 允许你为 React 组件生成静态 HTML。大多数组件不需要导入或使用这些 API。
    prerender 使用 Web Stream 将 React 树渲染为静态 HTML 字符串。
    prerenderToNodeStream renders a React tree to a static HTML string using a Node.js Stream..

javascript
以下这些特殊的 React 属性适用于所有内置组件：
（1）children：React 节点（可以是元素、字符串、数字、portal，如 null，undefined 这样的空节点和布尔值，或其他 React 节点数组）。children 属性指定了组件内部的内容。当使用 JSX 时，通常会通过嵌套标签

隐式地指定 children 属性。
（2）dangerouslySetInnerHTML：其中包含原始的 HTML 字符串。
（3）ref：使用 useRef 或者 createRef 的 ref 对象，或者一个 ref 回调函数，再或者一个用于 传统 ref 的字符串。ref 将被填充为此节点的 DOM 元素。
（4）suppressContentEditableWarning：布尔值。如果为 true 将会抑制 React 对同时具有 child 和 contentEditable={true} 属性的元素发出的警告。
（5）suppressHydrationWarning：布尔值。如果你使用 服务器渲染，通常会在服务器和客户端渲染不同内容时发出警告。
（6）style：CSS 样式对象，使用像 camelCase 这样的驼峰命名法。

所有内置组件也支持这些标准的 DOM 属性：
accessKey：为该元素指定一个键盘快捷键。通常不建议使用。
aria-*：指定辅助功能树信息。
autoCapitalize：指定用户输入的大小写形式。
className：指定元素的 CSS 类名。阅读更多关于应用 CSS 样式的内容。
contentEditable：一个布尔值。如果为 true，浏览器允许用户直接编辑渲染的元素。
data-*：数据属性允许你将一些字符串数据附加到元素上，例如 data-fruit=”banana”。由于通常会从 props 与 state 中读取数据，因此在 React 中不常用此属性。
dir：值为 ltr 与 rtl 之一，指定元素的文本方向。
draggable：布尔值，指定元素是否可拖动。
enterKeyHint：字符串，指定虚拟键盘上的回车键应该呈现哪种操作。
htmlFor：字符串，用于

onAnimationEnd(onAnimationEndCapture)：在 CSS 动画完成时触发。
onAnimationIteration(onAnimationIterationCapture)：当 CSS 动画的一次迭代结束并开始另一个迭代时触发。
onAnimationStart(onAnimationStartCapture)：当 CSS 动画开始时触发。
onAuxClick(onAuxClickCapture)：当非主要指针按钮被点击时触发。
onBeforeInput(onBeforeInputCapture)：在可编辑元素的值被修改之前触发。React 尚未使用原生的 beforeinput 事件。
onBlur(onBlurCapture)：当元素失去焦点时触发。与内置的浏览器 blur 不同，在 React 中，onBlur 事件会冒泡。
onClick(onClickCapture)：当指针设备上的主按钮被点击时触发。
onCompositionStart(onCompositionStartCapture)：当输入法编辑器开始新的组合会话时触发。
onCompositionEnd(onCompositionEndCapture)：在输入法编辑器完成或者取消组合会话时触发。
onCompositionUpdate(onCompositionUpdateCapture)：在输入法输入法编辑器收到一个新的字符时触发。
onContextMenuCaptureonContextMenu()：当用户尝试打开上下文菜单时触发。
onCopy(onCopyCapture)：当用户尝试将某些内容复制到剪贴板时触发。
onCut(onCutCapture)：当用户尝试将某些内容剪切到剪贴板时触发。
onDoubleClick(onDoubleClickCapture)：在用户双击时触发。对应于浏览器 dblclick 事件。
onDrag(onDragCapture)：当用户拖拽某些元素时触发。
onDragEnd(onDragEndCapture)：当用户停止拖拽元素时触发。
onDragEnter(onDragEnterCapture)：当拖动的元素进入有效的放置目标时触发。
onDragOver(onDragOverCapture)：当拖动的元素进入有效的放置目标完成时触发。你需要声明 e.preventDefault() 去允许拖拽。
onDragStart(onDragStartCapture)：当用户开始拖拽元素时触发。
onDrop(onDropCapture)：当元素被拖放到有效的目标区域时触发。
onFocus(onFocusCapture)：当元素失去焦点时触发。与内置的浏览器 focus 时间不同，在 React 中，onFocus 事件会冒泡。
onGotPointerCapture(onGotPointerCaptureCapture)：当元素以编程方式捕获指针时触发。
onKeyDown(onKeyDownCapture)：当按键被按下时触发。
onKeyPress：此属性已废弃，请使用 onKeyDown 或 onBeforeInput 替代。
onKeyUp(onKeyUpCapture)：当按键被释放时触发。
onLostPointerCapture(onLostPointerCaptureCapture)：当元素停止捕获指针时触发。
onMouseDown(onMouseDownCapture)：当指针按下时触发。
onMouseEnter：当指针在元素内移动时触发。没有捕获阶段。
onMouseLeave：当指针移动到元素外部时触发。没有捕获阶段。
onMouseMove(onMouseMoveCapture)：当指针改变坐标时触发。
onMouseOut(onMouseOutCapture)：当指针移动到元素外部或移动到子元素时触发。
onMouseUp(onMouseUpCapture)：当指针释放时触发。
onPointerCancel(onPointerCancelCapture)：当浏览器取消指针交互时触发。
onPointerDown(onPointerDownCapture)：当指针变为活动状态时触发。
onPointerEnter：当指针在元素内移动时触发。没有捕获阶段。
onPointerLeave：当指针移动到元素外部时触发。没有捕获阶段。
onPointerMove(onPointerMoveCapture)：当指针改变坐标时触发。
onPointerOut(onPointerOutCapture)：当指针移动到元素外部时触发，如果指针交互被取消以及 其他一些原因。
onPointerUp(onPointerUpCapture)：当指针不再活动时触发。
onPaste(onPasteCapture)：当用户尝试从剪贴板粘贴内容时触发。
onScroll(onScrollCapture)：当元素被滚动时触发。此事件不会冒泡。
onSelect(onSelectCapture)：在可编辑元素内部的选择更改后触发，例如输入框。React 扩展了 onSelect 事件以适用于 contentEditable={true} 元素。此外，React 还将其扩展为在空选择和编辑时触发（可能会影响选择）。
onTouchCancelCaptureonTouchCancel()：当浏览器取消触摸交互时触发。
onTouchEnd(onTouchEndCapture)：当一个或多个触摸点被移除时触发。
onTouchMove(onTouchMoveCapture)：当一个或多个触点移动时，会触发火灾。
onTouchStart(onTouchStartCapture)：当一个或多个触摸点被放置时触发。
onTransitionEnd(onTransitionEndCapture)：当 CSS 过渡完成时触发。
onWheel(onWheelCapture)：当用户旋转滚轮按钮时触发。
role：一个字符串。为辅助技术明确指定元素角色
slot：一个字符串。当使用 shadow DOM 时，指定插槽名称。在 React 中，通常通过将 JSX 作为 props 传递来实现等效模式。例如 <Layout left={} right={} />。
spellCheck：布尔值或空值。如果明确设置为 true 或 false，则启用或禁用拼写检查。
tabIndex：一个数字。覆盖默认的 Tab 按钮行为。避免使用除了 -1 和 0 以外的值。
title：一个字符串。指定元素的工具提示文本。
translate：’yes’ 或者 ‘no’。选择 ‘no’ 将排除元素内容的翻译。
你还可以将自定义属性作为 props 传递。例如 mycustomprop=”someValue”。当与第三方库集成时，这可能很有用。但是自定义属性名称必须为小写，并且不能以 on 开头。该值将被转换为一个字符串。如果你传递 null 或 undefined，则自定义属性将被删除。

这些事件仅适用于

元素：
onReset(onResetCapture)：当表单被重置时触发。
onSubmit(onSubmitCapture)：当表单提交时触发。

这些事件仅适用于

元素，与浏览器事件不同，React 中的事件会冒泡：
onCancel(onCancelCapture)：当用户尝试关闭对话框时触发。
onClose(onCloseCapture)：当对话框已关闭时触发。

这些事件仅适用于

元素，与浏览器事件不同，React 中的事件会冒泡：
onToggle(onToggleCapture)：当用户切换详细信息时触发。

这些事件会触发在 、