React官方文档学习记录

官方文档: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>
    </>
  );
}
相关推荐
Deepsleep.14 分钟前
react和vue的区别之一
javascript·vue.js·react.js
WEI_Gaot15 分钟前
react19 的项目创建和组件使用
前端·react.js
资深前端外卖员18 分钟前
【nodejs高可用】前端APM应用监控方案 + 落地
前端·后端
OhBonsai19 分钟前
Shader 图像处理1_ToneMap技术处理过曝
前端
突头小恐龙19 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子19 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
土豆125021 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
花生了什么树lll21 分钟前
面试中被问到过的前端八股(四)
前端·面试
zqlcoding22 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
冰茶_27 分钟前
.NET MAUI 发展历程:从 Xamarin 到现代跨平台应用开发框架
学习·microsoft·微软·c#·.net·xamarin