React官方文档学习记录

a堅強的泡沫2024-06-26 8:36

官方文档：React

代办：组件通信的方式；

1 标签语法JSX

你必须闭合标签，如 <br />。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的<>...</>包裹。

2 Typescript

react类型定义：@types/react，可以看一下源码

typescript文档：typescript

DefinitelyTyped 的 React 目录中整理了一些常见的类型定义。

React TypeScript Cheatsheet: 是一个社区维护的，用于在 React 中使用 TypeScript 的速查表，涵盖了许多有用的边界情况，并提供了比本文更广泛全面的内容。

dom事件：类型完整列表、、dom事件列表

javascript 复制代码

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setValue(event.currentTarget.value);
  }

样式属性 :

javascript 复制代码

interface MyComponentProps {
  style: React.CSSProperties;
}

3 Hook

以use开头的函数被称为 Hook。

Hook 比普通函数更为严格。你只能在你的组件（或其他 Hook）的顶层调用 Hook。如果你想在一个条件或循环中使用 useState，请提取一个新的组件并在组件内部使用它。

3.1 useCallback

useCallback 会在第二个参数中传入的依赖项保持不变的情况下，为函数提供相同的引用。

当在 TypeScript 严格模式下，使用 useCallback 需要为回调函数中的参数添加类型注解。这是因为回调函数的类型是根据函数的返回值进行推断的------如果没有参数，那么类型就不能完全理解。

根据自身的代码风格偏好，你可以使用 React 类型中的 *EventHandler 函数以在定义回调函数的同时为事件处理程序提供类型注解：

javascript 复制代码

import { useState, useCallback } from 'react';

export default function Form() {
  const [value, setValue] = useState("Change me");

  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>((event) => {
    setValue(event.currentTarget.value);
  }, [setValue])
  
  return (
    <>
      <input value={value} onChange={handleChange} />
      <p>值： {value}</p>
    </>
  );
}