React - freeCodeCamp.org

React 19 的新功能

Devan Wang — Wed, 03 Jul 2024 04:20:13 +0000

React 19 刚刚发布，为这个流行的 JavaScript 库带来了大量新功能和增强功能。对于希望保持领先地位的开发人员来说，了解这些更新至关重要。本课程旨在帮助你了解 React 19 的最新变化，从数据变更处理到有助于改善用户体验的创新型新 API。

我们刚刚在 freeCodeCamp.org YouTube 频道上发布了一门课程，该课程将向你介绍 React 19 中令人兴奋的新功能。其中包括处理 Actions、乐观更新、表单状态、新的 use() API 等的内置方法。React 19 中包含大量改进，可简化开发流程并提高应用程序性能，对于 React 开发者来说是重大的更新。

来自 Scrimba 的 Bob Ziroll 开发了本课程。他是世界上最受欢迎的 React 讲师之一。

自 2022 年 React 18 发布以来，React 已经两年多没有重大版本更新了。在 React 19 中，有许多特性可以简化对数据变更的处理，同时提供 API 通过乐观更新来增强用户体验。这些更新旨在使应用程序更快、反应更灵敏，即使在执行复杂的数据操作时也是如此。此外，React 团队还发布了新的开源编译器，他们已经开发了多年，旨在管理许多与性能相关的幕后细节，使开发者能够更多地专注于构建功能，而不是优化。

课程概览

参与这个综合课程，我们将深入研究 React 19 最新和最强大的功能。本课程包括对 React 18 中重要概念的复习，以及对 React 19 中新功能的深入介绍。以下是你将学习的内容：

Transition（复习 React 18）

我们先快速回顾一下 Transition，这是 React 18 中引入的一个关键特性，有助于更顺畅地管理 UI 更新。

React 编译器

了解新的 React 编译器，这是一个强大的工具，可自动处理性能优化，让开发者编写出更简洁、更高效的代码。

表单 Actions

探索新的表单 Actions 特性，简化表单状态管理，更有效地处理用户交互。

`useActionState()`

了解如何使用 useActionState() 这个新 Hook，以更直观的方式管理异步 Actions 的状态。这部分内容分为三个部分进行深入探讨。

Actions 中的错误处理

掌握 Actions 中改进的错误处理方式，以创建更强大的应用程序。

`useOptimistic()`

了解 useOptimistic() 这个 Hook 如何帮助你乐观更新用户界面，在等待服务器确认期间立即呈现更改，提供更好的用户体验。

`useFormStatus`

了解如何使用 useFormStatus 这个新 Hook 来更有效地追踪表单状态。

ref 作为 prop

了解将 ref 用作 prop 的新方法，这种方法增强了组件的交互和操作。

`use()`

深入了解 use() API 这个新增功能，它进一步简化了 React 应用中的对异步代码的管理。

其他改进

我们还将介绍其他一些改进，例如增加了对元数据标签的支持，从而带来更流畅、更高效的开发体验。

课程目录

React 19 有什么新特性？
React 18 回顾 - useTransition (1)
React 18 回顾 - useTransition (2)
React 编译器
表单 Actions
React 中的错误和加载状态
useActionState() - 第 1 部分
useActionState() - 第 2 部分
useActionState() - 第 3 部分
useOptimistic()
useFormStatus()
ref 作为 prop
use()
其他改进 - 元数据标签
总结

无论你是经验丰富的 React 开发者还是刚刚入门，本课程都能提供充分利用 React 19 潜力所需的知识技能。在 freeCodeCamp.org YouTube 频道上观看完整课程（总共 1 小时）。

你也可以在 bilibili 观看这个视频。

React 开发人员的 TypeScript 手册 —— 如何构建类型安全的 Todo 应用程序

YiWei — Mon, 26 Feb 2024 04:17:04 +0000

原文： TypeScript Handbook for React Developers – How to Build a Type-Safe Todo App

在当今的JavaScript生态中，TypeScript越来越受欢迎。越来越多的React开发者开始使用它。

如果你是React开发者，希望探索TypeScript或提升自己的技能，这本手册正适合你。我将指导你通过构建一个经典的待办事项应用，来在React应用中使用TypeScript。

我将涵盖作为一个React开发者开始使用TypeScript所需知道的一切。你将学会如何使用强类型处理状态和属性，如何用TypeScript创建React组件，如何在React Hooks中使用TypeScript，以及如何与Context API一起使用TypeScript。

通过本教程的学习，你将对TypeScript有一个坚实的理解，并准备好自信地开发类型安全的React应用程序。所以，不用再等待，让我们开始吧！

我们将涵盖以下内容

先决条件
我们将要构建什么
如何开始
如何设置待办事项应用的组件
如何在React中创建一个简单的表单元素
TypeScript中的类型错误是什么以及如何修复它
TypeScript中的泛型是什么
如何在React中用TypeScript处理表单提交
如何在React中自动聚焦一个输入字段
什么是useRef以及如何在TypeScript中使用它
如何用TypeScript创建类型安全的React组件
React中的forwardRef是什么
如何在表单提交时创建一个待办事项
什么是React上下文
如何在TypeScript中使用React上下文
TypeScript中的接口是什么
如何将TypeScript接口与React上下文一起使用
如何创建一个自定义钩子来使用React上下文
如何为待办事项定义一个接口
如何构建一个自定义的React组件来展示待办事项
如何实现功能：编辑、删除和更新待办事项
结论

先决条件

开始本教程无需事先了解TypeScript，使其非常适合初学者。然而，拥有React的背景知识将极大地增强你的理解力，并在整个教程中最大限度地提升你的学习潜力。

在本教程中，你将使用以下工具：

React 18.2.0： React是一个用于构建用户界面的JavaScript库。它允许开发者创建可重用的UI组件，并根据数据变化高效地更新UI。
TypeScript： TypeScript是JavaScript的一种静态类型超集，增加了可选的类型注释。它提供了增强的工具，并帮助在开发过程中捕获潜在的错误，使代码更可靠，更易于维护。
Vite： Vite是一个用于现代Web应用的快速开发服务器和构建工具。它提供即时服务器启动、热模块替换和优化的构建输出，使开发流程快速而高效。
Framer Motion： Framer Motion是React的一种流行动画库。它提供了一个易于使用的界面，用于在Web应用中创建流畅的互动动画和过渡，增强了整体用户体验。

在接下来的部分中，你将对你将在本教程中构建的项目有一个简洁的预览。

我们将要构建什么

我们将要构建一个经典的待办事项应用程序。它将具有以下功能：

添加一个待办事项。
编辑一个待办事项。
删除一个待办事项。
标记一个待办事项是否完成。
在浏览器的本地存储中存储待办事项。
当用户尝试添加或编辑一个空标题的待办事项时，显示适当的错误消息。

上图是应用程序最终预览。

如何开始

为了开始本教程，我已经为你准备了一个包含所有必需依赖项的样板项目。这消除了从头开始设置项目的需要。

只需从GitHub仓库克隆起始样板，然后跟随教程。这样，你可以专注于学习和实现概念，而不会被设置细节所困扰。

起始样板：在GitHub上查看
最终版本：在GitHub上查看

一旦你设置好起始样板并成功地在你的本地机器上运行它，你应该能够看到初始页面。这个页面将作为我们旅程的起点。

起始样板

现在，我们将开始为我们的应用添加令人兴奋的功能。让我们立即开始吧！

如何设置待办事项应用的组件

在这一部分，你将设置你的待办事项应用的主要组件，并逐渐增强它的附加功能。打开./src/App.tsx并添加以下代码：

//📂./src/App.tsx

import { TodoList, AddTodo } from './components'
import { Toaster } from 'react-hot-toast'

function App() {
  return (
    
      
      
      
    
  )
}

export default App

让我们一步步分解：

：这个组件负责在屏幕底部中央显示toast通知。
：这个组件将表示一个输入字段和一个按钮，用于向应用添加新的待办事项。
：这个组件将渲染现有待办事项的列表。

现在，在你的浏览器上打开你的本地服务器，你将能看到以下页面：

App.tsx的预览

这两个组件在你的应用中起着至关重要的作用。在接下来的部分中，你将构建使用组件添加待办事项的功能。具体来说，你将学习如何在React中使用TypeScript处理表单提交。

如何在React中创建一个简单的表单元素

首先，你需要为创建一个待办事项创建一个表单元素。为了在你的应用中实现这一点，你需要创建一个表单并有效地处理表单提交。在这一部分中，你将探索如何在React应用中使用TypeScript处理表单提交。

我只是想给你一个快速提示，因为你即将遇到你在TypeScript中的第一个类型错误！将以下代码添加到components/AddTodo.tsx：

//📂./src/components/AddTodo.tsx
//⚠️TypeScript is not happy with this code

import React, { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import { useTodo } from '../context'
import { Input } from './Input'

export const AddTodo = () => {
  const [input, setInput] = useState()

  return (
    
      
         setInput(e.target.value)}
          type="text"
          className="w-full px-5 py-2 bg-transparent border-2 outline-none border-zinc-600 rounded-xl placeholder:text-zinc-500 focus:border-white"
          placeholder="start typing ..."
        />
        
      
    
  )
}

你创建了一个useState钩子，它会随着输入值的改变而更新状态。然而，TypeScript对这段代码不满意。但为什么TypeScript会不满意呢？

TypeScript中的类型错误是什么以及如何修复它

TypeScript中的类型定义了变量可以持有的数据种类，并在开发过程中启用了错误和漏洞的检测。

当一个值以与其预期类型不兼容的方式使用时，就会在TypeScript中出现类型错误，导致代码中可能出现漏洞或意外行为。

在我们的案例中，TypeScript显示这段代码有错误，因为它无法自动推断状态变量input的类型。要解决这个问题，你需要明确地提供TypeScript类型信息。在这种情况下，你希望input是字符串类型，因为它代表输入字段的值。

要修复这个错误，你有两个选择。简单的解决方案是向useState钩子添加一个初始值，TypeScript将自动推断input类型为字符串：

 const [input, setInput] = useState('')

通过添加上述代码，你可能会注意到错误消失了，TypeScript也满意了。但并不是所有的错误都能在TypeScript中这么容易解决。

让我们考虑一个情况，你对你的状态的类型不确定，不能确定它应该初始化为数字还是字符串。这种不确定性引导我们使用第二个选项，即使用泛型。

TypeScript中的泛型是什么

泛型提供了一种处理你不确定特定值类型的情况的方法。通过泛型，你可以定义一个占位符来代表实际的类型，使你的代码更加灵活和可重用：

const [state, setState] = useState('')

上述代码初始化了一个名为“state”的状态变量，其初始值为空字符串，但它允许状态变量存储字符串或数字作为其值。

现在，让我们在你的应用中引入一个泛型。我们不希望你的用户添加数字作为待办事项 - 我们希望他们只能添加字符串：

//📂./src/components/AddTodo.tsx
//✅TypeScript is happy with this code

import React, { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import { useTodo } from '../context'
import { Input } from './Input'

export const AddTodo = () => {
  const [input, setInput] = useState('')

  return (
    
      
         setInput(e.target.value)}
          type="text"
          className="w-full px-5 py-2 bg-transparent border-2 outline-none border-zinc-600 rounded-xl placeholder:text-zinc-500 focus:border-white"
          placeholder="start typing ..."
        />
        
      
    
  )
}

通过在useState函数后指定，我们确保状态变量input只能持有字符串类型的值。这样可以防止用户输入数字或任何其他不兼容的数据类型作为待办事项。

如何在React中使用TypeScript处理表单提交

既然你已经成功地将输入值存储在状态中，让我们继续处理表单提交本身：

//📂./src/components/AddTodo.tsx

import React, { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import { useTodo } from '../context'
import { Input } from './Input'

export const AddTodo = () => {
  const [input, setInput] = useState('')

  const handleSubmission = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('form has been submitted')
  }

  return (
    
      
         setInput(e.target.value)}
          type="text"
          className="w-full px-5 py-2 bg-transparent border-2 outline-none border-zinc-600 rounded-xl placeholder:text-zinc-500 focus:border-white"
          placeholder="start typing ..."
        />
        
      
    
  )
}

当表单被提交时，会调用handleSubmission函数。让我们逐步分解它：

(e: React.FormEvent)是函数的参数声明。它指定函数期望传递一个类型为React.FormEvent的事件对象作为参数。React.FormEvent是表示在表单元素上发生的事件的事件对象类型，例如提交表单或与表单字段互动。
e.preventDefault()是属于事件对象（e）的方法。它被调用以阻止表单提交的默认行为，即刷新页面。通过调用preventDefault()，我们覆盖了默认行为并阻止了页面刷新。
console.log('form has been submitted')是一个简单的语句，将消息记录到浏览器的控制台。在这种情况下，它在表单提交事件发生时记录消息“form has been submitted”。

太好了！你已经完成了处理表单提交所需的步骤。现在让我们继续到下一部分，在那里你将通过做一些修改来增强你的表单功能。

如何在React中自动聚焦输入字段

为了提升用户体验，你可以在应用最初加载时自动将焦点设置在“添加待办事项”的输入字段上。这消除了用户在打开应用时手动点击输入框的需要。

为了实现这个功能，你可以使用一个特定的React钩子，称为useRef，它允许你将这个特性整合到输入框中。

什么是`useRef`以及如何在TypeScript中使用它

useRef是React中的一个特殊钩子，用于在组件中创建对一个元素或值的引用。这个引用可以用来直接访问和操作被引用的元素，而不会导致重新渲染。

你通常会用它来访问DOM元素、管理焦点或在组件渲染中存储可变值。

打开应用components/AddTodo.tsx并添加以下代码：

//📂./src/components/AddTodo.tsx

import React, { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import { useTodo } from '../context'
import { Input } from './Input'

export const AddTodo = () => {
  const [input, setInput] = useState('')
  const inputRef = useRef(null)

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }, [])

  const handleSubmission = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('form has been submitted')
  }

  return (
    
      
         setInput(e.target.value)}
          type="text"
          className="w-full px-5 py-2 bg-transparent border-2 outline-none border-zinc-600 rounded-xl placeholder:text-zinc-500 focus:border-white"
          placeholder="start typing ..."
        />
        
      
    
  )
}

这里，React的useRef钩子与TypeScript一起使用。

行const inputRef = useRef(null)使用useRef钩子声明了一个名为inputRef的引用变量。类型参数指定该ref用于输入元素。ref的初始值设置为null。
在useEffect钩子中，检查inputRef.current是否存在。如果存在，则调用其上的focus()方法，这意味着当组件被装载时，输入字段将接收焦点。

useRef钩子使用进行类型参数化，以确保引用与输入元素兼容。

通过结合使用useRef和TypeScript，代码不仅受益于TypeScript的静态类型检查，还能使用useRef与输入元素的DOM引用进行交互。

虽然这段代码可以正确运行，但将此输入组件在应用的其他部分复用将是有益的。因此，让我们创建一个可复用的输入组件，并探索如何通过实现这个输入来开发类型安全的React组件。

如何用TypeScript创建类型安全的React组件

在这一部分中，你将为应用中未来的使用案例创建一个类型安全的Input组件。

为了创建这个自定义的Input组件，你需要将在上一节中创建的ref作为prop传递给这个组件。

Refs作为普通的props传递，为了将refs传递给子组件，你需要实现一个名为forwardRef的特殊内置React函数。

React中的`forwardRef`是什么

在React中，forwardRef函数是一个特性，它允许你从父组件向子组件传递ref。Refs用于直接访问和操作底层的DOM元素。

通过使用forwardRef，你可以创建一个自定义组件，该组件可以接收一个ref，并将其传递到组件内的特定元素。

这使得父组件能够与子组件的底层元素进行交互，例如聚焦输入字段或触发某些动作。

简而言之，forwardRef帮助你在组件之间连接ref，使你在需要时能够控制或访问子组件的内部元素。

现在，让我们创建一个可复用的Input组件。打开components/Input.tsx：

// 📂./src/components/Input.tsx

import { InputHTMLAttributes, forwardRef } from 'react'
import cn from 'classnames'

export const Input = forwardRef<
  HTMLInputElement,
  InputHTMLAttributes
>(({ className, ...rest }, ref) => {
  return (
    
  )
})

让我们逐步分解这个组件：

该组件使用React中的forwardRef函数将ref传递到底层的元素。这允许父组件直接访问和操作输入元素。
HTMLInputElement指定了将被传递到底层元素的ref的类型。这确保了ref与输入元素期望的类型兼容。
InputHTMLAttributes指定了组件接受的props对象的类型。这包括所有标准的HTML输入元素属性，例如value、placeholder、onChange等。
该组件从rest对象中解构出className属性，并且接收ref作为参数。
在组件内部，使用JSX表达式来渲染一个元素。扩展运算符（{...rest}）被用于将组件接收到的所有props（除了className和ref）传递给元素。这确保传递给组件的任何额外属性都将应用于底层的元素。
使用ref属性将ref分配给底层的元素，使得父组件能够引用输入元素。
className是通过classnames模块中的cn函数构建的。这个函数基于提供的条件组合多个CSS类名。在这种情况下，它将默认输入元素的类名与传递给组件的className属性结合起来。

最终渲染的元素将具有组合的类名，并继承传递给组件的所有其他属性。

现在，让我们更新组件，以使用自定义的替代默认的HTML输入元素：

//📂./src/components/AddTodo.tsx

import React, { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import { useTodo } from '../context'
import { Input } from './Input'

export const AddTodo = () => {
  const [input, setInput] = useState('')
  const inputRef = useRef(null)

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }, [])

  const handleSubmission = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('form has been submitted')
  }

  return (
    
      
         setInput(e.target.value)}
          type="text"
          className="w-full px-5 py-2 bg-transparent border-2 outline-none border-zinc-600 rounded-xl placeholder:text-zinc-500 focus:border-white"
          placeholder="start typing ..."
        />
        
      
    
  )
}

现在，你可以在整个应用程序中使用这个自定义的组件。在下一部分中，你将创建在表单提交时添加待办事项的功能。

如何在表单提交时创建一个待办事项

为了存储每个待办事项，你可以使用一个数组来保存用户的输入。本质上，我们需要一个字符串数组来存储每个待办事项：

const [todos, setTodos] = useState([])

string[]指定了将存储在todos状态变量中的数据类型。在这种情况下，它是一个字符串数组，意味着它将保存一个待办事项列表，其中每个项都表示为一个字符串。

现在让我们在表单提交时向todos中添加一个项：

//📂./src/components/AddTodo.tsx

import React, { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import { useTodo } from '../context'
import { Input } from './Input'

export const AddTodo = () => {
  const [input, setInput] = useState('')
  const [todos, setTodos] = useState([])

  const handleSubmission = (e: React.FormEvent) => {
    e.preventDefault()
    if (input.trim() !== '') {
      setTodos([...todos, input])
      setInput('')
    }
  }

  return (
    
      
         setInput(e.target.value)}
          type="text"
          className="w-full px-5 py-2 bg-transparent border-2 outline-none border-zinc-600 rounded-xl placeholder:text-zinc-500 focus:border-white"
          placeholder="start typing ..."
        />
        
      
    
  )
}

handleSubmission检查input（用户输入的待办事项）在使用input.trim() !== ''去除任何前导或尾随空格后是否不是空字符串。

如果它不为空，则使用setTodos([...todos, input])将input值添加到现有的todos数组中。这将创建一个新数组，其中包含所有之前的待办事项和在末尾添加的新待办事项。它使用setInput('')将input值重置为空字符串，这样输入字段就变为空的，准备好输入下一个待办事项。

现在，虽然你已经成功实现了创建待办事项的功能，但它还不能在屏幕上显示。

这是因为组件负责添加待办事项，而不是显示它们。

另一方面，组件负责显示所有项目。为了弥合这一差距并在这些组件之间共享待办事项，你可以利用React Context的力量。

什么是React上下文

React Context API是React中的一个特性，它允许数据在不通过props显式传递的情况下被组件共享和访问。它提供了一种创建全局状态的方法，该状态可以被应用中的任何组件访问。

假设你有一个类似树的组件结构，其中某些数据需要被不同层级的多个组件访问。与其通过多层组件传递数据，你可以使用React Context为该数据创建一个中心存储。

它是这样工作的：

创建Context： 首先，你使用createContext()函数定义一个context。这将创建一个包含共享数据的context对象。
提供Context： 你用包裹父组件或应用的特定部分。这个提供者组件接受一个value属性，你可以在其中传递你想要共享的数据。
使用Context： 要在一个组件内访问共享数据，你使用React提供的useContext()钩子。通过将创建的context作为参数传递给useContext()，你可以访问共享数据，并在该组件内使用它。
更新Context： 如果你需要更新共享数据，可以通过修改提供者组件中的值来实现。这个更改将自动传播到所有使用context的组件。

React Context API简化了跨组件共享数据的过程，消除了手动传递prop的需要。

在你的情况下，你需要创建一个Context来在多个组件之间共享待办事项。让我们创建一个Context来看看这个机制在实践中是如何工作的。

如何在TypeScript中使用React上下文

在这一部分中，你将学习如何创建一个React Context来隔离应用逻辑，并提高你的应用的状态管理能力。

如果你打开context/TodoContext.tsx，你会看到以下代码：

// 📂./src/context/TodoContext.tsx

import React, { createContext } from 'react'
import { nanoid } from 'nanoid'
import { useLocalStorage } from 'usehooks-ts'

export const TodoContext = createContext(undefined)

export const TodoProvider = (props: { children: React.ReactNode }) => {
  return (
    
      {props.children}
    
  )
}

让我们逐步分解：

TodoContext是使用React提供的createContext函数创建的。它以未定义的值进行初始化。
此外，定义了一个名为TodoProvider的组件。它接受一个children属性，代表将被这个提供者包裹的子组件。
在TodoProvider组件内部，渲染了一个组件。它包裹了props.children，允许子组件访问TodoContext。
目前为止，提供给组件的值被设置为undefined。

在接下来的部分中，你将通过学习TypeScript中所谓的接口来创建一个更复杂的Context。

TypeScript中的接口是什么

在TypeScript中，接口是一种定义对象结构和形状的方式。它们允许你指定一个对象应该具有的属性及其类型。可以将接口视为一个蓝图或契约，描述一个对象应该具备的外观。

想象一下你正在建造一座房子。在开始施工之前，你会有一个蓝图，勾画出房子的设计和布局。类似地，TypeScript中的接口就像是一个对象的蓝图。

让我们来看一个简单的接口示例：

interface Person {
  name: string;
  age: number;
}

在这个示例中，我们定义了一个名为Person的接口，描述了一个人对象的结构。它指定一个人对象应该有两个属性：name，其类型应为string，和age，其类型应为number。

让我们考虑你的Todo Context以及你想传递给其消费者的属性。在这种情况下，你需要一个定义所需属性的接口，包括包含所有待办事项的字符串数组，以及一个接受字符串并将其添加到待办事项列表中的函数。

interface TodoContextProps {
  todos: string[]
  addTodo: (text: string) => void
}

TodoContextProps接口指定了TodoContext中期望的属性结构。它有两个属性：

todos：表示待办事项的字符串数组。这个属性包含了所有现有的待办事项。
addTodo：一个接受类型为字符串（text）的参数并返回void类型的函数。这个函数负责将新的待办事项添加到列表中。它接受新的待办事项作为输入，并执行必要的操作，但不返回任何值。

如何在React Context中使用TypeScript接口

现在你已经了解了TypeScript接口的好处，是时候通过整合这个接口来增强你的Context了：

// 📂./src/context/TodoContext.tsx

import React, { createContext, useState } from 'react'
import { nanoid } from 'nanoid'
import { useLocalStorage } from 'usehooks-ts'

interface TodoContextProps {
  todos: string[]
  addTodo: (text: string) => void
}
export const TodoContext = createContext(
  undefined,
)

export const TodoProvider = (props: { children: React.ReactNode }) => {
  const [todos, setTodos] = useState([])

  // ::: ADD NEW TODO :::
  const addTodo = (text: string) => {
    setTodos([...todos, text])
  }

  const value: TodoContextProps = {
    todos,
    addTodo,
  }

  return (
    {props.children}
  )
}

在这个更新的代码中，与之前的版本相比有显著的变化。这些变化引入了TypeScript，并修改了TodoContext和TodoProvider组件：

这里，TodoContextProps指定它应该有两个属性：todos，表示待办事项的字符串数组，以及addTodo，一个接受字符串参数并返回void（无返回值）的函数。
现在使用createContext创建了TodoContext，并用TodoContextProps | undefined类型进行初始化。这意味着context值可以是TodoContextProps类型或未定义。
TodoProvider组件现在使用useState钩子初始化todos状态。它使用一个字符串数组来跟踪待办事项。
引入了一个新函数addTodo，它接受一个字符串text作为参数。它使用setTodos函数通过将新的待办事项追加到现有数组来更新todos状态。
创建context的值：value变量被赋值为一个TodoContextProps类型的对象，包含todos数组和addTodo函数。
提供context值：组件包裹props.children，并将value属性设置为value，它向子组件提供todos和addTodo。

总而言之，你正在使用TypeScript为TodoContextProps定义一个接口，使用useState和自定义函数添加新的待办事项，并向子组件提供更新后的context值。

如何创建一个自定义钩子来使用React Context

为了使用context提供的值，你需要创建一个自定义钩子来使用这个context，并将其值提供给子组件。打开context/useTodo.ts并添加以下代码：

// 📂./src/context/useTodo.ts

import { useContext } from 'react'
import { TodoContext } from './TodoContext'

export const useTodo = () => {
  const context = useContext(TodoContext)

  if (!context) {
    throw new Error('useTodo must be used within a TodoProvider')
  }

  return context
}

让我们逐步分解：

你从'react'模块导入useContext钩子，并从./TodoContext文件导入TodoContext。
在钩子内部，调用useContext钩子并以TodoContext作为参数。这样连接到TodoContext并检索其当前值。
如果context值是undefined，这意味着useTodo钩子正在TodoProvider的范围之外使用。在这种情况下，会抛出一个错误消息，内容为'useTodo必须在TodoProvider内部使用'。

总体来说，这段代码允许你创建一个名为useTodo的自定义钩子，可以在你的组件中使用。

通过调用这个钩子，你可以访问TodoContext并检索其值，其中包括在TodoProvider中定义的与待办事项相关的数据和函数。

它还确保useTodo钩子只在TodoProvider的范围内使用，以维护正确的使用方式并防止任何错误。

接下来，你需要用TodoProvider组件包裹整个应用程序。这确保了通过使用useTodo钩子，context值可以被其子组件访问：

// 📂 ./src/main.tsx

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  
    
      
    
  ,
)

包裹了整个应用程序，并提供了管理待办事项相关数据所需的context。

现在，让我们在组件中集成useTodo钩子，以通过context高效管理待办事项。此外，让我们实现toast通知，以根据用户交互提供反馈：

//📂./src/components/AddTodo.tsx

import React, { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import { useTodo } from '../context/useTodo'
import { Input } from './Input'

export const AddTodo = () => {
  const [input, setInput] = useState('')
  const inputRef = useRef(null)
  const { addTodo } = useTodo()

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }, [])

  const handleSubmission = (e: React.FormEvent) => {
    e.preventDefault()
    if (input.trim() !== '') {
      addTodo(input)
      setInput('')
      toast.success('Todo added successfully!')
    } else {
      toast.error('Todo field cannot be empty!')
    }
  }

  return (
    
      
         setInput(e.target.value)}
        />
        
      
    
  )
}

行const { addTodo } = useTodo()使用useTodo钩子从待办事项context中检索addTodo函数。这使我们能够添加新的待办事项。
行toast.success('Todo added successfully!')显示一个成功的toast通知，指示待办事项已成功添加。
行toast.error('Todo field cannot be empty!')在尝试提交时如果待办事项字段为空，则显示一个错误的toast通知。
如果input值（去除空格）不为空，则调用addTodo函数并传入输入值，清除input状态，并显示成功的toast通知。
如果input值为空，则显示一个错误的toast通知，指出待办事项字段不能为空。

这段代码集成了useTodo钩子，通过context管理待办事项。它捕获用户输入，添加待办事项，并显示toast通知，以提供关于添加待办事项成功或失败的反馈。

现在，让我们也修改组件，并在屏幕上显示待办事项。打开components/TodoList.tsx并添加以下代码：

//📂./src/components/TodoList.tsx

import { useTodo } from '../context/useTodo'
import { SiStarship } from 'react-icons/si'

export const TodoList = () => {
  const { todos } = useTodo()

  if (!todos.length) {
    return (
      
        
          
          You have nothing to do!
        
      
    )
  }

  return (
    
      {todos.map(todo => (
        {todo}
      ))}
    
  )
}

导入语句import { useTodo } from '../context/useTodo'从自定义context中导入useTodo钩子，使我们能够访问todos数组。
如果todos数组为空（!todos.length），意味着没有待办事项，将显示一条消息表明没有要做的事情。
如果todos数组中有待办事项，则渲染一个无序列表（
- 在
  - ），key设置为待办事项的值。
  - 然后将待办事项本身显示在列表项中。

这个组件使用useTodo钩子从context中检索todos数组。如果没有待办事项，它会显示一条消息。如果有待办事项，它会渲染一个无序列表，并为每个待办事项填充列表项。

上图显示添加待办事项和显示toast通知。

到目前为止做得很好！你现在有了一个基本的待办事项应用程序。是时候增加一些令人兴奋的功能，进一步提升你的应用了。

如何为待办事项定义一个接口

在这一部分中，你将基于上一节中的现有context进行构建，并增强它，以创建具有额外功能的更复杂的待办事项。

每个待办事项由三个属性组成：

id： 一个独特的字符串，作为该项的标识符
text： 一个简单的字符串，代表待办事项的内容
status： 待办事项的状态，可以是“未完成”或“已完成”

基于上述信息，适当的待办事项接口如下所示：

interface Todo {
  id: string
  text: string
  status: 'undone' | 'completed'
}

为了将Todo接口集成到你的context中，我们将进行必要的更新和修改，以有效地利用这个增强的context：

//📂./src/context/TodoContext.tsx

import React, { createContext, useState } from 'react'
import { nanoid } from 'nanoid'
import { useLocalStorage } from 'usehooks-ts'

interface TodoContextProps {
  todos: Todo[]
  addTodo: (text: string) => void
}

export interface Todo {
  id: string
  text: string
  status: 'undone' | 'completed'
}

export const TodoContext = createContext(
  undefined,
)

export const TodoProvider = (props: { children: React.ReactNode }) => {
  const [todos, setTodos] = useState([])

  // ::: ADD NEW TODO :::
  const addTodo = (text: string) => {
    const newTodo: Todo = {
      id: nanoid(),
      text,
      status: 'undone',
    }

    setTodos([...todos, newTodo])
  }

  const value: TodoContextProps = {
    todos,
    addTodo,
  }

  return (
    {props.children}
  )
}

以下是context中变更的解释：

Todo接口：

Todo接口定义了待办事项的结构。
它包括三个属性：id（一个字符串），text（一个代表待办事项内容的字符串），以及status（一个可以取值为'undone'或'completed'的字符串）。
这个接口有助于确保待办事项具有一致的属性和数据类型。

useState：

useState钩子用于在函数组件中管理状态。
在这种情况下，useState初始化了一个名为"todos"的状态变量作为Todo项目的数组。
"todos"状态变量将用于存储和更新待办事项。

addTodo函数和newTodo变量：

addTodo函数是一个回调函数，它接受一个文本参数（字符串）。
在addTodo函数内部，声明了一个名为newTodo的变量作为Todo对象。
newTodo对象使用nanoid()函数生成的唯一id、提供的文本以及初始状态'undone'创建。
调用useState中的setTodos函数来更新todos状态，通过将newTodo对象添加到现有的todos数组中。
这允许向列表中添加新的待办事项。

现在，你需要更新组件以反映你对context所做的更改：

//📂./src/components/TodoList.tsx

import { useTodo } from '../context/useTodo'
import { SiStarship } from 'react-icons/si'

export const TodoList = () => {
  const { todos } = useTodo()

  if (!todos.length) {
    return (
      
        
          
          You have nothing to do!
        
      
    )
  }

  return (
    
      {todos.map(todo => (
        {todo.text}
      ))}
    
  )
}

通过这个更新的代码，现在每个渲染的待办事项的id被用作每个待办事项的key属性，待办事项的text被用来显示每个待办事项的内容。

现在，让我们创建一个自定义的React组件来适当地显示每个待办事项，并在我们的应用中引入诸如编辑、删除和更新单个待办事项等额外功能。

如何构建一个自定义的React组件来显示待办事项

在这一部分中，你将创建一个自定义的React组件，用于处理每个单独待办事项的显示和管理。

打开components/TodoItem.tsx并添加以下代码：

//📂./src/components/TodoItem.tsx

export const TodoItem = (props: { todo: Todo }) => {
  const { todo } = props

  return (
    
      
        {todo.text}
      
    
  )
}

负责渲染单个待办事项：

该组件接受一个名为props的属性，这是一个包含名为todo的属性的对象。todo属性是Todo类型，代表单个待办事项。
在组件内部，使用解构赋值从props对象中提取todo属性。
使用Framer Motion的motion.li组件提供动画效果。它代表一个列表项（
），并支持布局动画。
className属性使用cn实用函数（来自classnames库）根据todo.status条件性地应用CSS类。如果待办事项已完成，它会添加半透明背景和文本颜色的类。
在列表项内部，使用motion.span组件包裹待办事项文本。它同样支持布局动画。
span元素的样式根据todo.status设置。如果待办事项已完成，会应用删除线文本装饰。
{todo.text}表达式渲染待办事项的文本内容。

TodoItem接收一个待办事项作为属性，并根据待办事项的状态，使用可选动画、样式和条件CSS类进行渲染。

现在让我们修改组件，以使用组件：

//📂./src/components/TodoList.tsx

import { TodoItem } from './TodoItem'
import { useTodo } from '../context/useTodo'
import { SiStarship } from 'react-icons/si'
import { motion } from 'framer-motion'

export const TodoList = () => {
  const { todos } = useTodo()

  if (!todos.length) {
    return (
      
        
          
          You have nothing to do!
        
      
    )
  }

  return (
    
      {todos.map(todo => (
        
      ))}
    
  )
}

以下是中所做更改的解释：

导入额外的依赖：

现在的代码从framer-motion库中导入了motion组件。这允许在组件中实现动画效果。

渲染TodoItem组件：

之前，待办事项被作为简单的列表项（
）直接在TodoList组件中渲染。
在更新的版本中，导入（import { TodoItem } from './TodoItem'）并使用TodoItem组件来渲染每个待办事项。
TodoItem组件传递了一个代表单个待办事项的todo属性。
同时为每个TodoItem组件提供了key属性，确保每个渲染的待办事项具有唯一标识符。

使用motion组件包裹列表：

- 这允许在添加、移除或更新待办事项时实现动态和平滑的过渡。
总的来说，更新后的TodoList组件使用framer-motion的motion组件引入了动画，并用组件替换了直接渲染待办事项的方式。

现在你已经成功创建了组件，让我们将重点转向实现必要的功能，以启用使用Todo Context和TodoItem组件来编辑、删除和更新每个待办事项。

如何实现功能：编辑、删除和更新待办事项

在这一部分中，你将通过增加额外功能来增强你的待办事项应用。

首先，你将在待办事项context中实现处理这些功能所需的逻辑。然后，你将向组件添加相应的JSX，以引入交互性，并使用户能够与应用互动。

正如你所记得的，你使用context处理了向应用添加待办事项，你将采用类似的方法来处理编辑、删除和更新功能。

这些操作的逻辑将被封装在待办事项context中，将使用useTodo钩子在组件中利用这些逻辑。你还将把待办事项存储在浏览器的本地存储中，以确保用户离开应用时不会丢失他们的进度。

打开context/TodoContext.tsx并添加以下代码：
```
// 📂./src/context/TodoContext.tsx

import React, { createContext } from 'react'
import { nanoid } from 'nanoid'
import { useLocalStorage } from 'usehooks-ts'

interface TodoContextProps {
  todos: Todo[]
  addTodo: (text: string) => void
  deleteTodo: (id: string) => void
  editTodo: (id: string, text: string) => void
  updateTodoStatus: (id: string) => void
}

export interface Todo {
  id: string
  text: string
  status: 'undone' | 'completed'
}

export const TodoContext = createContext(
  undefined,
)

export const TodoProvider = (props: { children: React.ReactNode }) => {
  const [todos, setTodos] = useLocalStorage('todos', [])

  // ::: ADD NEW TODO :::
  const addTodo = (text: string) => {
    const newTodo: Todo = {
      id: nanoid(),
      text,
      status: 'undone',
    }

    setTodos([...todos, newTodo])
  }

  // ::: DELETE A TODO :::
  const deleteTodo = (id: string) => {
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id))
  }

  // ::: EDIT A TODO :::
  const editTodo = (id: string, text: string) => {
    setTodos(prevTodos => {
      return prevTodos.map(todo => {
        if (todo.id === id) {
          return { ...todo, text }
        }
        return todo
      })
    })
  }

  // ::: UPDATE TODO STATUS :::
  const updateTodoStatus = (id: string) => {
    setTodos(prevTodos => {
      return prevTodos.map(todo => {
        if (todo.id === id) {
          return {
            ...todo,
            status: todo.status === 'undone' ? 'completed' : 'undone',
          }
        }
        return todo
      })
    })
  }

  const value: TodoContextProps = {
    todos,
    addTodo,
    deleteTodo,
    editTodo,
    updateTodoStatus,
  }

  return (
    {props.children}
  )
}
```
以下是正在发生的事情的解释：

定义TodoContextProps：
- TodoContextProps是一个接口，指定了TodoContext的值的结构。
- 它包括诸如todos（一个Todo项的数组）之类的属性，以及添加、删除、编辑和更新待办事项状态的函数。
实现addTodo：
- addTodo函数接受一个文本参数，使用nanoid生成一个唯一ID，并用提供的文本和初始状态'undone'创建一个新的待办事项对象。
- 它使用useLocalStorage提供的setTodos函数，通过将newTodo追加到现有的todos数组来更新todos状态。
实现deleteTodo：
- deleteTodo函数接受一个id参数，并使用setTodos函数从todos状态中过滤掉具有匹配id的待办事项。
实现editTodo：
- editTodo函数接受一个id和文本参数。
- 它使用setTodos函数遍历todos状态，并更新具有匹配id的待办事项的文本。
实现updateTodoStatus：
- updateTodoStatus函数接受一个id参数。
- 它使用setTodos函数遍历todos状态，并在'undone'和'completed'之间切换具有匹配id的待办事项的状态。
提供值并渲染子组件：
- 使用todos数组和定义的函数创建了一个value对象。
- 它作为value属性传递给TodoContext.Provider组件，以向其嵌套的子组件提供定义的值。
总而言之，TodoContext和TodoProvider处理与管理待办事项相关的状态和逻辑。它们通过TodoContext提供必要的函数和数据供子组件使用，如，以执行添加、删除、编辑和更新待办事项等操作。

现在，让我们加入相应的JSX，使用户能够与你刚刚实现的逻辑进行交互。打开components/TodoItem.tsx并添加以下代码：
```
//📂./src/components/TodoItem.tsx

import { useEffect, useRef, useState } from 'react'
import { Todo } from '../context/TodoContext'
import { useTodo } from '../context/useTodo'
import { Input } from './Input'
import { BsCheck2Square } from 'react-icons/bs'
import { TbRefresh } from 'react-icons/tb'
import { FaRegEdit } from 'react-icons/fa'
import { RiDeleteBin7Line } from 'react-icons/ri'
import { toast } from 'react-hot-toast'
import cn from 'classnames'
import { motion } from 'framer-motion'

export const TodoItem = (props: { todo: Todo }) => {
  const { todo } = props

  const [editingTodoText, setEditingTodoText] = useState('')
  const [editingTodoId, setEditingTodoId] = useState(null)

  const { deleteTodo, editTodo, updateTodoStatus } = useTodo()

  const editInputRef = useRef(null)

  useEffect(() => {
    if (editingTodoId !== null && editInputRef.current) {
      editInputRef.current.focus()
    }
  }, [editingTodoId])

  const handleEdit = (todoId: string, todoText: string) => {
    setEditingTodoId(todoId)
    setEditingTodoText(todoText)

    if (editInputRef.current) {
      editInputRef.current.focus()
    }
  }

  const handleUpdate = (todoId: string) => {
    if (editingTodoText.trim() !== '') {
      editTodo(todoId, editingTodoText)
      setEditingTodoId(null)
      setEditingTodoText('')
      toast.success('Todo updated successfully!')
    } else {
      toast.error('Todo field cannot be empty!')
    }
  }

  const handleDelete = (todoId: string) => {
    deleteTodo(todoId)
    toast.success('Todo deleted successfully!')
  }

  const handleStatusUpdate = (todoId: string) => {
    updateTodoStatus(todoId)
    toast.success('Todo status updated successfully!')
  }

  return (
    
      {editingTodoId === todo.id ? (
        
           setEditingTodoText(e.target.value)}
          />
          
        
      ) : (
        
          
            {todo.text}
          
          
            
            
              
              
            
          
        
      )}
    
  )
}
```
让我们关注handleEdit、handleUpdate、handleDelete和handleStatusUpdate函数及其工作方式：

handleEdit函数：

当用户点击“编辑”按钮时调用此函数。它接受todoId（待办事项的唯一标识符）和todoText（待办事项当前文本）作为参数。

它将editingTodoId状态设置为todoId，将editingTodoText状态设置为todoText。此外，如果editInputRef（输入字段的引用）存在，它将使用focus方法将焦点设置在输入字段上。

handleUpdate函数：

当用户在编辑待办事项后点击“更新”按钮时调用此函数。它接受todoId作为参数。

它首先检查修剪后的editingTodoText是否不为空。如果不为空，它将调用useTodo钩子中的editTodo函数，传递todoId和editingTodoText作为参数。然后将editingTodoId和editingTodoText状态分别重置为null和空字符串。

最后，如果更新成功则显示成功的toast消息，如果待办事项字段为空则显示错误的toast消息。

handleDelete函数：

当用户点击“删除”按钮时调用此函数。它接受todoId作为参数。它将调用useTodo钩子中的deleteTodo函数，传递todoId作为参数。然后显示一条成功的toast消息，指示待办事项已成功删除。

handleStatusUpdate函数：

当用户点击“标记完成”或“标记未完成”按钮时调用此函数。它接受todoId作为参数。

它将调用useTodo钩子中的updateTodoStatus函数，传递todoId作为参数。然后显示一条成功的toast消息，指示待办事项的状态已成功更新。

这些函数处理与在TodoItem组件中编辑、更新、删除和更新待办事项状态相关的交互和操作。

JSX显示待办事项的文本，并提供编辑、删除和更新其状态的选项。待办事项的外观和行为由todo对象的值和组件的状态变量决定。

如果待办事项正在被编辑，则显示输入字段和“更新”按钮。否则，将显示待办事项的文本，并提供标记为完成或未完成、编辑和删除的按钮。

handleEdit、handleUpdate、handleDelete和handleStatusUpdate函数用作这些按钮的事件处理程序，使用户能够与待办事项进行交互和修改。

以上是最终结果。

恭喜！你已经成功创建了一个具有基本功能的漂亮的待办事项应用。

通过本文所获得的知识，你现在已经准备好根据你的特定需求和偏好进一步增强和定制应用程序。

结论

在整篇文章中，我们介绍了使用TypeScript进行React开发的基础知识，并学习了如何创建一个功能齐全的待办事项应用。

我们探索了状态管理、context和钩子等概念，使你能够添加、编辑、删除和更新待办事项。

有了这些知识，你现在已经准备好将这些原则应用到你的未来项目中，并使用React构建类型安全的应用程序。继续探索和实验新功能，将你的应用提升到一个新的水平。

你可以在Twitter上关注我，我会在那里分享更多关于Web开发的有用提示。编码愉快！

如何使用 Three.js 在 React.js 应用程序中实现一个 Blender 模型

freeCodeCamp.org — Sun, 18 Feb 2024 04:25:34 +0000

原文： How to Implement a Blender Model in a React.js Application using Three.js

在这个分步指南中，你将学习如何建立一个带有基本动画的 Blender 文件。之后，你还将学习如何使用 React Three Fiber 来将 Three.js 集成到 React 应用程序中。熟悉这些概念可以帮助你以后开发的 React.js 应用程序脱颖而出。

🔐 以下是我们将涵盖的内容：

制作一个包括动画、材质和导出过程的 Blender 模型。
使用 React Three Fiber 构建与 Three.js 集成的 React.js 应用程序。
将个人创建的 Blender 模型整合到 React.js 应用程序中。

📝 先决条件：

建议对 3D 软件 Blender 有基本了解。
需要基本熟悉 React.js。
无需具备之前使用 Three.js 的经验。

💭 Three.js 和 Blender 是什么？

Three.js 是一个 JavaScript 的库，通过提供的API可以让你在 Web 浏览器中展示 3D 模型。

利用 Three.js 可以帮助您将互动性和独特的功能无缝集成到您的网站中。

Blender 是一款专为制作和完善 3D 模型而定制的强大软件。它的多功能性提供了无限的机会，满足广泛的创意愿景。

除了显示功能之外，Blender 还为您提供了一系列工具，包括相机、灯光，甚至后期制作增强功能。

当一起使用时，这些工具可以激发无限的创造力，使您能够将您的艺术创作无缝地转化为您即将推出的网站项目。

🔧 如何使用 Three.js 设置 React.js

首先，安装 React.js 应用程序：

npx create-react-app my-app

然后，需要安装 Three.js 和 React Three Fiber. React Three Fiber 充当 Three.js 的 React 渲染器，利用 React 组件的强大功能来简化 React.js 环境中 Three.js 的集成：

npm install three @react-three/fiber

为了丰富 Three.js 体验，我们还将集成 React Three Drei，这个包为各种 Three.js 应用场景引入了各种辅助工具，包括多个相机控件，例如：

npm install @react-three/drei

glTF Tools 扩展

我还建议安装 glTF Tools 扩展。尽管不是绝对必要的，但此扩展可以帮助您执行各种任务。

如果您使用 Visual Studio Code 作为集成开发环境（IDE），则可以通过扩展选项卡方便地添加扩展。同样，此扩展是可选的，但它可以显著简化以后的某些流程。我将在整个教程中使用它：

Visual Studio Code 中的 gltf Tools 扩展

在 React.js 中完成 Three.js 的设置

React.js 应用程序的 package.json 文件中的依赖项现在如下所示：

"dependencies": {
    "@react-three/drei": "^9.80.2",
    "@react-three/fiber": "^8.13.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "three": "^0.155.0",
    "web-vitals": "^2.1.4"
  },

package.json 文件中的依赖项，包括 React Three Fiber 和 React Three Drei

这些依赖项足以在 React.js 环境中使用 Three.js 完成各种任务。当然，你还可以根据需要集成其他依赖库，来实现其他功能。

除此之外，我还在 GitHub 上提供了本教程中的代码。这将使您能够快速访问信息，而无需滚动浏览整篇文章。

🔨 如何创建 Blender 模型

首先，我们的初始任务涉及创建一个 Blender 模型，然后将其集成到我们的 React.js 应用程序中。在这一阶段，让我们考虑 Layout 选项卡中的一个场景，其中我们有三个对象：两个球体和一个平面。您可以在 Blender 中使用 Shift + A 快捷键添加此类对象。

Layout 选项卡中包含两个球体和一个平面的 Blender 场景

该构图仅包括一个平面和两个球体，没有其他细节。当然，您可以根据自己的喜好进行更精细的场景和模型设计。

但是，为了说明将自定义 Blender 模型整合到 React.js 的基本过程，这个基本示例将对我们足够了。

如何给模型添加动画

现在，将我们的重点转移到向该 Blender 场景中的三个对象引入基本动画。这些动画可以促进对象的移动、旋转甚至缩放，从而实现动态变换。

为了在 Blender 中为对象添加动画，您可以切换到 Shading 和 Rendering 选项卡旁边的 Animation 选项卡。

在 “Animation” 选项卡中，你可以向特定帧添加点。例如，如果要将球体向左移动一点，请首先添加起始关键帧（右键单击对象，选择 “Insert Keyframe” ，然后选择 “Location” ）。

然后，在对象的动画时间轴上向前移动几帧，调整对象的位置，然后重复相同的过程。这样，您将拥有两个关键帧：初始关键帧和处于新位置的关键帧。

请记住，这一动作是朝一个方向的。如果想重复动画，它将移动到新位置，然后再跳转返回到其初始位置。

为了使运动更加平滑，可以复制初始关键帧并将其插入到末尾。这将使物体在到达新位置后再平滑的运动向后移动。这也是我在 Blender 模型中设置关键帧的方法。

当然，你可以添加更多关键帧来制作更复杂的动画。这只是开始使用 Blender 动画的基本介绍。与 Blender 其他方面一样，还有很多东西需要探索和学习。

在 Animation 选项卡中的三个对象添加动画

在这种情况下，没有必要彻底了解我们在此处添加的这些动画的细节。因此，实际上不需要知道第一个球体在动画中移动到哪个确切位置。

关键点是承认它们的存在，因为它们将在稍后阶段集成到我们的 React.js 应用程序中，以便我们可以在浏览器中激活它们。

如何添加颜色

接下来，我们将为小球体和底层平面添加一些简单的颜色，例如，可以在 Shading 选项卡中执行此操作。

对于基本颜色，可以转到对象的 Material Properties 部分（右键单击对象，然后选择底部的倒数第二个类别）。但我想重点讨论您稍后可能会在模型中遇到的特定情况。因此，在本教程中，我将专门使用 Shading 选项卡来设置对象颜色。

在 Shading 选项卡中，可以在屏幕底部添加节点。这些节点可以修改对象的颜色和纹理等。你还会发现 Vector 和 Shader 节点，将它们组合起来可以为您的对象创建独特的视觉效果。

所有这些调整都适用于特定材料。因此，如果希望不同的对象具有相同的视觉效果，只需对它们应用相同的材质即可。

当我们第一次打开 Shading 选项卡来查找对象的材质时，最初会生成 Principled BSDF 和 Material Output 节点。这两个节点都是用来设置基本情况。

Principled BSDF 有很多可以使用的设置。在这个例子中，我们只将 Base Color 属性更改为蓝色。

我们只需在 “Principled BSDF” 节点中调整 “Base Color” 的球体的材质。

对于较大的球体，使用类似的材料应用。但是，与 Principled BSDF 节点相比，我们将使用 Glossy BSDF 节点，它是 Shader 类别中的一个节点。这将帮助我们认识到您在为 React.js 应用程序设计 Blender 模型时可能会遇到的问题 - 您稍后会看到。

使用 “Glossy BSDF” 节点向大的球体添加材质

完成此操作后，我们就可以导出 Blender 模型了。请注意，此版本已大大简化。可以根据偏好进行更详细的模型设计。整体工作流程仍然相似。

如何导出模型

要导出模型，我们需要生成 .glb/.gltf 文件。这一点至关重要，因为 Three.js 需要特定的文件格式来实现兼容性，在本例中，.glb 或 .gltf 文件符合库的要求。

因此，使用对象、动画、颜色等创建完模型后，您可以执行以下操作：

单击左上角的 File 选项卡。
从列出的选项中选择 Export。现在，可以看到多种导出格式。
正如之前提到的那样，如果计划在应用程序中将模型与 Three.js 一起使用，则需要选择 glTF 2.0 (.glb/.gltf) 选项。

选择此选项后，将弹出一个新的对话框。通过此窗口，您可以选择要保存文件的路径。

在此窗口的右侧，有其他选项。例如，您可以决定要导出哪些特定对象。在大多数情况下，默认设置应该可以正常工作。请记住，如有必要，可以根据自己的偏好调整这些设置。

请记住导出的格式是 glTF 2.0 (.glb/.gltf)。

如何将导出的模型可视化

接下来，我们切换到 Visual Studio Code 并导航到导出文件的文件夹。

在此目录中，可以找到一个 .glb 文件。参考之前的 glTF Tools 扩展设置，只需右键单击 .glb 文件即可找到位于底部的两个附加选项，分别叫做 glTF：从 GLB 导入 和 glTF：验证 GLB 或 GLTF 文件。

在这种情况下，我们会选择 glTF：从 GLB 导入 选项。此操作将在同一文件夹中生成一个 .gltf 文件，在我们的例子中为 blenderFile.gltf。

在 Blender 中利用 glTF Tools 扩展应用将初始导出的 .glb 文件生成一个 .gltf 文件。

我们选择这种方法是为了增强对 .gltf 文件的可访问性，可以通过在 Visual Studio Code 的 glTF Tools 扩展中直接查看。这对于在实际实施之前检查您的文件非常有帮助。

如果我们访问新创建的 .gltf 文件，我们可以观察到一些基于 Blender 模型的信息。请务必注意，具体内容可能根据每个工程的情况而有所不同，因为它们是为了反映 Blender 工程中对象和场景的属性而定制的。

如果我们看一下右上角，有一个符号看起来像一个立方体，旁边有一个圆锥体。通过单击此符号，可以直接在 IDE 中预览 Blender 场景。此功能只能由 .gltf 文件访问，在本例中不适用于 .glb 文件。

新创建的 .gltf 文件，可以选择直接在 Visual Studio Code 中查看模型（在右上角，用红色圈出）

值得注意的是，不一定要通过 glTF Tools 扩展来完成这个过程。另外，一些网站允许上传文件进行可视化。但我个人发现这种在集成开发环境中的方法特别方便。它将整个过程集中起来，使你能够在实际实施之前评估文件的完整性。

如果你发现任何错误，这个做法可以让你提前发现问题是基于导出的文件有问题还是 React.js 应用中存在实施的疏忽。因此，我非常推荐在从 Blender 导出后评估你的模型文件。

在 Visual Studio Code 中使用 glTF Tools 查看 Blender 模型

在 Visual Studio Code 中通过使用 glTF Tools 扩展查看我们的 Blender 模型，我们可以看到所有三个对象都被正确识别。小球体和平面都以其预期的颜色显示。

但是由于大球体没有指定预期的颜色，只是以默认的白色显示。

这种差异引发了一个问题：是什么导致了这种异常现象？像这样的情况证明了在将模型集成到 React.js 应用程序之前预览模型是多么有用。

通过在此阶段检查您的模型，就可以确认问题源于 Blender 模型本身而不是实现过程，因为我们还没有进行任何实现。

事实证明，这种实施前评估非常方便，使你能够在 React.js 中的实施过程之前诊断和解决潜在的复杂情况。

✏️ 程序材质的纹理烘焙

简而言之，Blender 提供了使用程序节点处理材质的灵活性。虽然这些节点在 Blender 中可以无缝运行，但它们与其他游戏引擎或软件框架（如 Three.js ）并不直接兼容。

要了解更多信息，请考虑观看以下视频。在短短10分钟内演示了纹理烘焙的过程，有效解决了当前的问题。

程序材质纹理烘焙教程

就我个人而言，当面对这一挑战并且最初不确定其性质时，我发现了这个视频，它是帮助我们深入了解该主题的宝贵资源。

在实际的具体场景中，虽然我们可能不会遇到视频中看到的那么复杂的情况，但仍然有可能面临着使用与各种软件工具缺乏直接兼容性的节点。

接下来，我们将简要介绍视频中提到的步骤。但是，如果你有兴趣深入研究此过程，我强烈建议观看该视频。

如何创建文件纹理节点

首先，在包含 Glossy BSDFF 节点的材质的 “Shading” 选项卡中，我们将引入一个 Image Texture 节点并将其连接到新图像（通过单击 New）。

我们将保留设置的默认值，这意味着宽度和高度为 1024px。使用较大的值将大大延长我们将面临的处理时间。不过，值得注意的是，较大的纹理可以提供更多细节并改善整体外观。

在目前的情况下，我们的目标是加快流程。但对于更重要的项目，视觉质量可能至关重要。在这种情况下，可能需要选择更高的分辨率。

创建一个 Image Texture 节点并使用默认设置为其分配一个新图像

如何应用智能 UV 投射流程

接下来，我们需要使用 UV Editing 选项卡中的 Smart UV Projec 选项。本质上，此操作将特定对象的面展开到纹理上。

此过程使我们能够在返回 Shading 选项卡后立即指定应该对纹理的哪些部分进行着色和修改。为了使这个过程有效，我们必须选择大球体的所有面。

在 UV Editin 选项卡中选择对象的所有面并在其上应用 Smart UV Project

一旦我们完成此步骤并使用 Smart UV Project 过程的默认设置，左侧的图像（之前具有网格）现在将显示应用此过程的球体的形状。在这种情况下，纹理似乎捕获了球体的各个角度。

Smart UV Project 后的纹理

根据具体对象，单击 Smart UV Project 按钮，然后可能需要微调显示的设置。如果遇到特定对象的其他问题，我之前分享的视频可以为你提供这方面的额外指导。

一般来说，为了缓解问题，应该在创建阶段优化对象布局。例如，避免在特定位置引入过多边缘可以防止剪裁等问题。

烘焙过程

现在，返回到 Shading 选项卡，我们将在其中访问右侧的 “Render Properties”（由小屏幕或电视符号表示）。如果尚未选择，请选择 “Cycles” 作为 “Render Engine”。然后导航到 “Bake” 类别，该类别在“ Performance” 类别下方。

在 Render Properties 里面 Shading 选项卡中的 Bake 选项

使用现有的默认设置，可以通过单击 “Bake” 按钮继续，并且确保选择 “Image Texture” 节点和大球体。

请记住，我将“太阳”光集成到了场景中，因为此烘焙过程考虑了场景的照明。如果没有足够的照明，结果可能会显得过暗。

经过一段时间的处理（如果您为 “Image Texture” 节点的图像使用了更大的尺寸，可能会更耗时），烘焙过程将完成。这会导致纹理从 “Image Texture” 应用到图像。现在可以通过常规的“正常”图像纹理来访问它，而不是从 “Glossy BSDF” 的 “Shader” 节点获取纹理。

然后可以建立从 “Image Texture” 节点到 “Material Output” 节点的连接，从而成功实现材质。之前的方法是将 “Principled BSDF” 节点连接到 “Material Output” 节点的 “Surface” 输入。在此阶段，两个方法方法相比较，没有显着差异。

具有“烘焙”纹理的 “Image Texture” 节点与 “Material Output” 节点相连，而不是与 “Glossy BSDF” 节点连接。

如何看到最终结果

现在，我们可以再次导出文件，使用 glTF Tools 扩展在 IDE 中重复之前的相同过程，并查看扩展名为 “.gltf” 的文件。检查结果后，你可能会注意到它与我们在 Blender 中使用 “Glossy BSDF” 节点的版本不完全匹配。这种差异主要归因于 Blender 场景中的照明条件。

请记住，我说明的方法不是烘焙过程的典型用法，因为在这种情况下，也可以使用 “Principled BSDF” 节点选择类似的基色，并且会实现几乎相同的解决方案。

使用 glTF Tools 完成的视图，包括大球体的“烘焙”纹理

根据个人经验介绍一下烘焙过程。在某些情况下，我遇到了这样的场景：材质在 Blender 中的显示效果与在 React.js 应用程序中使用 Three.js 实现它们时的效果不同。这种情况促使我探索烘焙的概念，结果证明这是一个有用的解决方案。

总而言之，如果你在使用 Three.js 的 React.js 应用程序中遇到材料无法按预期显示的情况，那么考虑烘焙过程并研究该主题可以提供有价值的见解。这对于 Blender 新手来说尤其有益。

✒️ 如何在 React.js 应用程序中实现 Blender 模型

想要生成 Blender 文件，可以使用一个非常有用的命令（来源： https://github.com/pmndrs/gltfjsx ）：

npx gltfjsx public/blenderFileName.glb

需要注意的是，在此步骤中，需要将 Blender 文件存储在 React.js 应用程序的 “public” 文件夹中。还值得强调的是，需要 React Three Drei 才能使用这个命令。所以在我们的例子中，我们可以直接使用这个命令，而不需要任何额外的准备。

执行这个命令后，可以看到以下文件：

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.1.4 public/blenderStuff/blenderFile.glb
*/

import { useLayoutEffect, useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";

export function Model(props) {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF(
    "./blenderStuff/blenderFile.glb"
  );
  const { actions } = useAnimations(animations, group);

  return (
    
      
        
        
        
      
    
  );
}

useGLTF.preload("./blenderStuff/blenderFile.glb");

blenderFile.jsx，包括使其工作的基本代码

大概看一下，就可以看到这个过程添加了很多元素，所以基本上不需要自己添加太多。

配置的一个重要方面是在 useGLTF 钩子中设置路径。在我的实例中，要使用的准确路径是 ./blenderStuff/blenderFile.glb（同样适用于 useGLTF.preload() ）。这是因为我在 public 目录下创建了一个名为 blenderStuff 的子文件夹。

如何添加 Canvas 包装器和其他组件

完成此配置后，我们现在就可以使用 “Model” 组件了。但为了有效地将这个 “Model” 组件集成到想要的位置，需要在父组件中进行一些调整。

在这个例子中，我选择在主 App.js 文件中实现它。我为 App 的 CSS 类分配了 100vh 的高度，以确保所需的显示。

import "./App.css";
import { Model } from "./BlenderFile";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

function App() {
  return (
    
      
    
  );
}

export default App;

App.js，包括 “Canvas” 包装器、 “Model” 和其他组件

一般来说，你需要一个组件来封装所有 Three.js 相关元素。在 “Canvas” 组件中，可以配置各种设置。在本次的具体实例中，我正在调整初始相机位置。

光线对于组件起着至关重要的作用。在我们的例子中，我们使用了 “ambientLight” 来为整个场景添加灯光。如果没有足够的照明，尽管存在对象颜色，您的场景可能会显得非常暗甚至全黑。您还可以使用其他光源，比如 “spotLight” 组件。

“OrbitControls” 组件可从 Drei 库进行访问，通过在浏览器中启用模型内的滚动和旋转来增强交互性。这行代码极大地改进了用户交互选项。

请记住，“Canvas” 组件可以容纳多个模型。还可以有选择地将 “OrbitControls” 等组件应用到特定的 Blender 模型，从而定制它们的行为。

为此，需要为要集成到 “Canvas” 中的每个场景构建一个父组件。在每个新的父组件中，合并 Blender 模型组件以及想要添加的任何补充帮助器组件。

例如，当不同的模型需要不同的照明或独特的相机位置时，这种方法特别有利。

如何实现动画

到目前为止，我们已经建立了一个功能性的 Three.js Canvas 环境，展示了我们的 Blender 模型。但是重要的是要记住，我们还引入了尚未启用的基本动画。

为了解决这个问题，我们可以利用预先实现的 “useAnimations” 钩子。

  const { actions, names } = useAnimations(animations, group);

  useLayoutEffect(() => {
    names.forEach((animation) => {
      actions?.[animation]?.play();
    });
  }, [actions, names]);

BlenderFile.jsx 中有关如何在页面渲染时激活模型动画的部分

通过合并此实现，与此 Blender 模型关联的所有动画将在页面呈现时开始播放。此行为还包括每个动画的无限循环。

📄 其他信息

虽然本教程主要关注使用 Three.js 将 Blender 模型集成到 React.js 应用程序中，但 Three.js 中还有一个我们没有涉及的未开发的领域。

尽管我们在这个基本示例中没有使用它，但您可以将后处理引入到 React.js 中的 Three.js 模型中。React Three Postprocessing 库在这方面是一个非常有价值的工具。它可以让您通过复杂的效果（如绽放或噪音效果）提升您的 Three.js 场景，这可以为您的可视化添加更高级的维度。

此外，在开发未来 Three.js 项目时，请考虑探索 React Spring 库，该库与 React Three Fiber 集成在一起。React Spring 提供了在 Three.js 场景中整合自定义动画的机会，可以在 Blender 中直接集成的任何动画之上进行。

例如，你可以通过单击使场景中的特定对象变大或变小。与 Three.js 的其他方面一样，这个方面可能会增强交互性，并且可能值得花时间了解。

顺便说一句，如果发现框架的运行速度较低，请考虑在浏览器设置中切换硬件加速，以提高性能。

📋 总结

至此，我们已经成功制作了一个带有动画和材质的 Blender 模型。然后我们使用 React Three Fiber 将它集成到我们的 React.js 应用程序中。

尽管我们在这里看到的示例非常基础，但对于更复杂的 Blender 模型，集成方法仍然相同。 Three.js 的基本功能可以与补充帮助程序相结合来增强场景。

要在 Three.js 场景中增强 Blender 模型的视觉效果，除了后期处理、附加动画或特定的 Blender 材质外，相机和灯光等方面往往是最重要的。

如何使用 TDD 和 React 测试库构建健壮的 React 应用程序

herosql — Wed, 02 Aug 2023 13:10:00 +0000

原文： How to build sturdy React apps with TDD and the React Testing Library

在我开始学习 React 时，我曾经挣扎于如何以一种既有用又直观的方式测试我的 web 应用。每次我想要测试一个组件时，我都会使用 Enzyme 和 Jest 进行表层渲染。

当然，我绝对是在滥用快照测试功能。

好吧，至少我写了一个测试，对吧？

你可能在某个地方听说过，编写单元测试和集成测试将提高你编写的软件的质量。另一方面，糟糕的测试会滋生虚假的信心。

最近，我参加了 workshop.me 上由 Kent C. Dodds 主持的一个研讨会，他教我们如何为 React 应用编写更好的集成测试。

他还指导我们使用他的新的测试库，以强调以用户可能遇到的相同方式测试应用程序。

在本文中，我们将通过创建评论反馈来学习如何在构建稳定的 React 应用程序中运用 TDD。当然，这个过程适用于几乎所有的软件开发，而不仅仅是 React 或 JavaScript 应用。

开始

我们将首先运行 create-react-app 并安装依赖项。我的假设是，如果你正在阅读关于测试应用程序的文章，你可能已经熟悉安装和启动 JavaScript 项目。在这里，我将使用 yarn 而不是 npm。

create-react-app comment-feed

cd comment-feed

yarn

首先，我们将删除 src 目录中除 index.js 之外的所有文件。然后，在 src 文件夹内部，创建一个名为 components 的新文件夹和另一个名为 containers 的文件夹。

在测试工具方面，我将使用 Kent 的 React 测试库构建此应用程序。它是一款轻量级的测试工具，鼓励开发者以实际使用时相同的方式测试他们的应用程序。

与 Enzyme 一样，它导出一个渲染函数，但这个渲染函数始终对你的组件进行完整挂载。它导出辅助方法，允许你通过标签、文本甚至测试 ID 来定位元素。Enzyme 也通过其 mount API 实现了这一点，但它创建的抽象实际上提供了更多选项，其中许多选项允许你摆脱测试实现细节。

我们不想要测试所有的实现细节。我们想要渲染一个组件，看看当点击或更改 UI 上的某些内容时是否会发生正确的事情。就是这样！不再直接检查 props 、state 或类名。

现在让我们安装它们并开始工作。

yarn add react-testing-library

通过 TDD 构建评论反馈

让我们以 TDD 风格进行第一个组件的开发。启动你的测试运行器。

yarn test --watch

在 containers 文件夹中，我们将添加一个名为 CommentFeed.js 的文件。与之相伴的，添加一个名为 CommentFeed.test.js 的文件。在第一个测试中，让我们验证用户是否可以创建评论。太早了？好吧，既然我们还没有任何代码，我们将从一个较小的测试开始。检查一下是否可以渲染反馈。

关于 react-testing-library 的一些说明

首先，让我们注意这里的渲染函数。它类似于 react-dom 将组件渲染到 DOM 的方式，但它返回一个对象，我们可以解构该对象以获得一些实用的测试辅助工具。在这种情况下，我们得到 queryByText，它会返回我们期望在 DOM 上看到的 HTML 元素。

React 测试库文档提供了一个层次结构，帮助你决定使用哪个查询或获取方法。通常，顺序如下：

getByLabelText（表单输入）
getByPlaceholderText（仅在你的输入没有标签时使用 — 很少使用！）
getByText（按钮和标题）
getByAltText（图片）
getByTestId（用于动态文本或其他你想要测试的奇怪元素）

每个方法都有一个相关的 queryByFoo，除了在找不到元素时不会使测试失败之外，它们的功能相同。如果你只是测试元素的存在，请使用这些方法。

如果这些方法都无法满足你的需求，render 方法还返回映射到 container 属性的 DOM 元素，因此你可以像 container.querySelector(‘body #root’) 这样使用它。

首次实现代码

现在，实现看起来相当简单。我们只需要确保“评论反馈”是一个组件。

它可能会更糟糕 - 我的意思是，我在编写整篇文章的过程中，还要编写组件的样式。幸运的是，测试并不太关心样式，所以我们可以专注于应用逻辑。

接下来的测试将验证我们是否可以渲染评论。但是我们甚至还没有任何评论，所以也添加一个组件，在测试之后添加。

我还将创建一个 props 对象来存储我们可能在这些测试中重用的数据。

在这种情况下，我正在检查评论的数量是否等于传入 CommentFeed 的项目数量。这是无关紧要的，但测试失败给了我们创建 Comment.js 文件的机会。

这为我们的测试套件亮起了绿灯，我们就可以放心地继续了。向 TDD 致敬。当我们给它一个空数组时，它当然会工作。但是，如果我们给它一些真实的对象，会发生什么呢？

我们必须更新实现以实际渲染内容。现在我们知道要去哪里，这很简单，对吧？

看看这个，我们的测试再次通过了。这是一个美妙的截图。

注意我从未说过我们应该用 yarn start 启动程序吗？我们继续保持这种方式一段时间。关键是，你必须用心去感受代码。

样式只是外部表现 - 重要的是内部的东西。

以防你想启动应用程序，将 index.js 更新为以下内容：

添加评论表单

这是事情开始变得更有趣的地方。这是我们从困倦地检查 DOM 节点的存在到实际使用它并验证行为的地方。所有其他的东西都是热身。

让我们从描述我想要的表单开始。它应该：

包含一个作者的文本输入
包含一个评论条目的文本输入
有一个提交按钮
最终调用 API 或处理创建和存储评论的其他服务。

我们可以在一个集成测试中完成这个列表。对于之前的测试用例，我们进行得相当缓慢，但现在我们要加快速度，一举完成。

注意我们的测试套件是如何发展的吗？我们从在各自的测试用例中硬编码 props 转变为为它们创建一个工厂。

准备、执行、断言

以下集成测试可以分为三个部分：准备，执行和断言。

准备： 为测试用例创建props和其他测试用例
执行： 模拟对元素的更改，例如文本输入或按钮点击
断言： 断言所需的函数被正确次数调用，并使用正确的参数

关于代码，我们做了一些假设，比如我们的标签命名或我们将拥有一个 createComment prop。

在查找输入时，我们希望尝试通过它们的标签找到它们。这样在构建应用程序时，可以优先考虑可访问性。使用 container.querySelector 是获取表单的最简单方法。

接下来，我们必须为输入分配新值，并模拟更改以更新它们的状态。这一步可能感觉有点奇怪，因为通常一次输入一个字符，为每个新字符更新组件的状态。

这个测试的行为更像是复制/粘贴的行为，从空字符串变为 “Socrates” 。目前没有中断问题，但我们可能需要注意一下，以防以后出现问题。

在提交表单后，我们可以对诸如调用了哪些 props 以及使用了哪些参数等事项进行断言。我们还可以利用这个时刻来验证表单输入是否已清除。

这让人望而生畏吗？不要害怕。首先将表单添加到渲染函数中。

我可以将这个表单分解成一个单独的组件，但现在我会保持不变。相反，我会将其添加到我桌子旁边的“重构愿望清单”中。

这是 TDD 的方式。当某件事看起来可以重构时，做个记录然后继续。只有在抽象的存在对你有益且不感到多余时才进行重构。

还记得我们通过创建 createProps 工厂来重构测试套件的时候吗？就像那样。我们也可以重构测试。

现在，让我们添加 handleChange 和 handleSubmit 类方法。当我们更改输入或提交表单时，这些方法会被触发。我还将初始化状态。

这样做就可以了。我们的测试通过了，我们有一些类似于真实应用程序的东西。我们的覆盖率看起来如何？

还不错。如果我们忽略 index.js 中的所有设置，我们就有一个完全覆盖的 Web 应用程序，至少在执行的行数方面是这样。

当然，为了验证应用程序是否按照我们的意图工作，我们可能还需要测试其他用例。覆盖率的数字只是你的老板在谈论其他同事时可以炫耀的东西。

点赞评论

如何检查我们可以点赞评论呢？这可能是在我们的应用程序中建立某种身份验证概念的好时机。但我们现在还不会跳得太远。首先，让我们更新 props 工厂，为生成的评论添加一个 auth 字段和 ID。

“认证”用户将通过应用程序传递其 auth 属性。与他们是否经过身份验证相关的任何操作都将被记录。

在许多应用程序中，此属性可能包含在向服务器发出请求时发送的某种访问令牌或 cookie 中。

在客户端，此属性的存在使应用程序知道它们可以让用户查看其个人资料或其他受保护的路由。

然而，在这个测试示例中，我们不会过多地处理身份验证。想象这样一个场景：当你进入聊天室时，你提供网名。从那时起，你将负责使用此网名的每个评论，尽管其他人也使用同样的名称登录。

虽然这不是一个很好的解决方案，即使在这个人为的例子中，我们只关心 CommentFeed 组件的行为是否符合预期。我们不关心用户如何登录。

换句话说，我们可能有一个完全不同的登录组件来处理特定用户的身份验证，以获得让用户在我们的应用程序中大显身手的全能 auth 属性。

让我们“喜欢”一条评论。添加下一个测试用例，然后更新 props 工厂以包含 likeComment 。

现在，对于实现，我们将首先更新 Comment 组件，使其具有一个点赞按钮以及一个 data-testid 属性，以便我们可以找到它。

我将测试 ID 直接放在按钮上，以便我们可以立即模拟对它的点击，而无需嵌套查询选择器。我还在按钮上附加了一个 onClick 处理程序，以便它传递给它的 onLike 函数。

现在我们只需将此类方法添加到我们的 CommentFeed。

你可能想知道为什么我们不直接将 likeComment 通过 prop 传递给 Comment 组件。为什么我们要将其作为类属性？

在这种情况下，因为它相当简单，我们不必构建这个抽象。将来，我们可能会决定添加其他 onClick 处理程序，例如处理分析事件或启动对该帖子评论的订阅。

在此容器组件的 handleLike 方法中捆绑多个不同的函数调用具有其优势。如果我们愿意，在成功“点赞”后，我们还可以使用此方法更新组件的状态。

不喜欢评论

到目前为止，我们已经有了渲染、创建和喜欢评论的工作测试。当然，我们还没有实现实际执行此操作的逻辑——我们没有更新存储或写入数据库。

你可能还注意到，我们正在测试的逻辑很脆弱，不太适用于真实世界的评论反馈。例如，如果我们尝试喜欢我们已经喜欢的评论，会发生什么？它会无限地增加喜欢的计数，还是会取消喜欢？我可以喜欢我自己的评论吗？

我将把组件的功能扩展留给你的想象，但一个好的开始是编写一个新的测试用例。这里有一个基于我们想要实现不喜欢已经喜欢的评论的假设。

请注意，我们正在构建的评论反馈允许我喜欢我自己的评论。谁会这样做？

我已经更新了 Comment 组件，添加了一些逻辑来确定当前用户是否喜欢该评论。

好吧，我有点作弊：在我们之前将 author 传递给 onLike 函数的地方，我改为 currentUser ，这是传递给 Comment 组件的 auth 属性。

毕竟，当其他人喜欢他们的评论时，评论的作者出现在那里是没有意义的。

我之所以意识到这一点，是因为我一直在努力编写测试。如果我只是偶尔编写代码，这一点可能会被我忽略，直到我的一位同事斥责我的无知。

但是这里没有无知，只有测试和随之而来的代码。确保更新 CommentFeed，以便它期望传递 auth 属性。对于 onClick 处理程序，我们可以省略传递 auth 属性，因为我们可以从父级的 handleLike 和 handleDislike 方法中获取 auth 属性。

总结

希望你的测试套件看起来像一棵未点亮的圣诞树。

我们可以采取很多不同的方法，这可能会让人有点不知所措。每当你想到某个想法时，只需将其写下来，无论是在纸上还是在新的测试块中。

例如，假设你希望在一个单独的类方法中实现 handleLike 和 handleDislike，但你现在有其他优先事项。你可以通过在测试用例中编写文档来实现这一点：

这并不意味着你需要编写一个全新的测试。你也可以更新前两个案例。但关键是，你可以将测试运行器用作应用程序更加紧迫的“待办事项“列表。

有用的链接

有一些很棒的内容涉及到大规模的测试。以下是一些特别启发了本文以及我自己实践的内容。

Kent C. Dodds 编写的介绍 React 测试库。了解这个测试库背后的哲学是个好主意。
Kostis Kapelonis 写的软件测试反模式，一篇非常深入的文章，讨论了单元和集成测试。还有如何避免错误的方法。
Kent Beck 写的测试驱动开发的示例。这是一本讨论 TDD 模式的实体书。它不太长，写作风格通俗易懂，便于理解。

我希望这些能帮你处理测试问题。

想了解更多文章或机智的评论吗？如果你喜欢这篇文章，请给我一些掌声，并在 Medium、Github 和 Twitter 上关注我！

React.useEffect Hook 常见问题及解决方法

Chengjun.L — Wed, 19 Jul 2023 07:18:00 +0000

原文： React.useEffect Hook – Common Problems and How to Fix Them

大多数开发人员都非常熟悉 React hooks 的工作方式和常见用例，但是有一个 useEffect 问题很多人可能不太清楚。

用例

让我们从一个简单的场景开始。我们正在构建一个 React 应用程序，希望在一个组件中显示当前用户的用户名。但首先，我们需要从 API 中获取用户名。

因为我们知道我们也需要在应用程序的其他地方使用用户数据，所以我们还想在自定义 React hook 中抽象数据获取逻辑。

我们希望 React 组件看起来像这样：

const Component = () => {
  // useUser custom hook
  
  return {user.name};
};

看起来很简单！

useUser React hook

第二步是创建我们的 useUser 自定义钩子。

const useUser = (user) => {
  const [userData, setUserData] = useState();
  useEffect(() => {
    if (user) {
      fetch("users.json").then((response) =>
        response.json().then((users) => {
          return setUserData(users.find((item) => item.id === user.id));
        })
      );
    }
  }, []);

  return userData;
};

让我们分解一下。我们正在检查钩子是否正在接收用户对象。之后，我们从名为 users.json 的文件中获取用户列表，并对其进行过滤以找到具有我们需要的 id 的用户。

然后，一旦我们获得了必要的数据，我们就将其保存为钩子的 userData 状态。最后返回 userData。

注意：这是一个仅用于说明目的的示例！现实世界中的数据获取要复杂得多。如果你对该主题感兴趣，请查看我关于如何使用 ReactQuery、Typescript 和 GraphQL 创建出色的数据获取设置的文章。

让我们在 React 组件中插入钩子，看看会发生什么。

const Component = () => {
  const user = useUser({ id: 1 });
  return {user?.name};
};

好的，一切都按预期进行。但是等等……这是什么？

ESLint exhaustive-deps 规则

我们的钩子中有一个 ESLint 警告：

React Hook useEffect has a missing dependency: 'user'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

嗯，我们的 useEffect 似乎缺少依赖项。那好吧！让我们添加它。可能发生的最坏情况是什么？ 😂

const useUser = (user) => {
  const [userData, setUserData] = useState();
  useEffect(() => {
    if (user) {
      fetch("users.json").then((response) =>
        response.json().then((users) => {
          return setUserData(users.find((item) => item.id === user.id));
        })
      );
    }
  }, [user]);

  return userData;
};

看起来我们的组件 Component 现在不会停止重新渲染。这里发生了什么？！

让我们解释一下。

无限重新渲染问题

我们的组件重新渲染的原因是因为 useEffect 依赖项在不断变化。但为什么？我们总是将相同的对象传递给钩子！

虽然我们确实传递了一个具有相同键和值的对象，但它并不是完全相同的对象。每次重新渲染组件时，我们实际上都是在创建一个新对象，然后我们将新对象作为参数传递给 useUser 钩子。

在内部，useEffect 比较两个对象，由于它们有不同的引用，它再次获取用户并将新的用户对象设置为状态。状态更新然后触发组件中的重新渲染，不断重复……

所以，我们能做些什么？

如何修复

现在我们了解了问题，可以开始寻找解决方案。

第一个也是最明显的选择是从 useEffect 依赖数组中移除依赖，忽略 ESLint 规则，继续我们的生活。

但这是错误的做法。它可以（并且可能会）导致我们的应用程序中出现错误和意外行为。如果你想了解更多有关 useEffect 如何工作的信息，我强烈推荐 Dan Abramov 的完整指南。

下一个是什么？

在我们的例子中，最简单的解决方案是从组件中取出 { id: 1 } 对象。这将为对象提供稳定的引用并解决我们的问题。

const userObject = { id: 1 };

const Component = () => {
  const user = useUser(userObject);
  return {user?.name};
};

export default Component;

但这并不总是可能的。想象一下，用户 id 以某种方式依赖于组件 props 或状态。

例如，可能是我们使用 URL 参数来访问它。如果是这种情况，我们可以使用一个方便的 useMemo 钩子来记忆对象并再次确保稳定的引用。

const Component = () => {
  const { userId } = useParams();
  
  const userObject = useMemo(() => {
    return { id: userId };
  }, [userId]); // Don't forget the dependencies here either!

  const user = useUser(userObject);
  return {user?.name};
};

export default Component;

最后，不是将对象变量传递给我们的 useUser 钩子，而是可以只传递用户 ID 本身，这是一个原始值。这将防止 useEffect 钩子中的引用相等问题。

const useUser = (userId) => {
  const [userData, setUserData] = useState();

  useEffect(() => {
    fetch("users.json").then((response) =>
      response.json().then((users) => {
        return setUserData(users.find((item) => item.id === userId));
      })
    );
  }, [userId]);

  return userData;
};

const Component = () => {
  const user = useUser(1);

  return {user?.name};
};

问题解决啦！

在此过程中，我们甚至不必违反任何 ESLint 规则......

注意：如果我们传递给自定义钩子的参数是一个函数，而不是一个对象，我们将使用非常相似的技术来避免无限重新渲染。一个显着的区别是我们必须在上面的例子中用 useCallback 替换 useMemo。

感谢你阅读本文！

对代码感到好奇吗？在这里探索吧。

欢迎访问我的博客并在 Twitter 上关注我，以获取更多与 React 相关的内容。

图片作者：vectorjuice

如何使用 React、React Hooks 和 Axios 进行 CRUD 操作

luojiyin — Fri, 05 May 2023 11:10:00 +0000

原文： How to Perform CRUD Operations using React, React Hooks, and Axios

如果你正在使用React，理解和实现API请求可能是相当困难的。

所以在这篇文章中，我们将通过使用React、React Hooks、React Router和Axios实现CRUD操作来学习这一切。

让我们深入了解一下。

如何安装Node和npm

首先，让我们在系统中安装Node。我们将主要用它来执行我们的JavaScript代码。

去官方网站下载Node，https://nodejs.org/en/。

你还需要node包管理器，如npm，它是内建在Node上的。你可以用它来为你的JavaScript应用程序安装包。幸运的是，Node自带npm，所以你不需要单独下载它。

一旦它们都完成了，打开你的终端或命令提示符，输入node -v。这将检查你有哪个版本的Node。

如何创建你的React应用

为了创建你的React应用，在终端输入 npx create-react-app <你的应用程序名称>，或者本例中的**npx create-react-app**react-crud**。

你会看到软件包正在被安装。

一旦软件包安装完毕，进入项目文件夹，输入npm start。

你会看到默认的React模板，像这样：

默认的 React Boilerplate 模板

我们的 App.js文件

如何为React安装Semantic UI包（库）

让我们在我们的项目中安装Semantic UI React软件包。Semantic UI是一个为React制作的UI库，它有预建的UI组件，比如表格、按钮和许多功能。

你可以使用下面的一个命令来安装它，这取决于你的包管理器。

yarn add semantic-ui-react semantic-ui-css

对于使用 Yarn 包管理器

npm install semantic-ui-react semantic-ui-css

对于使用 NPM 包管理器

同时，在你的应用程序的主入口文件中导入该库，也就是index.js。

import 'semantic-ui-css/semantic.min.css'

在你的index.js文件中粘贴上面一行内容。

如何构建你的CRUD应用

现在，让我们开始使用React构建我们的CRUD应用。

首先，我们要给我们的应用程序添加一个标题。

在我们的app.js文件中，添加一个标题，像这样：

import './App.css';

function App() {
  return (
    
      React Crud Operations
    
  );
}

export default App;

在我们的应用程序中添加一个标题

现在，让我们确保它居中。

给父级div一个classname，即main。在App.css文件中，我们将使用Flexbox来使标题居中。

import './App.css';

function App() {
  return (
    
      React Crud Operations
    
  );
}

export default App;

app.js文件，在父 div 中的 className 为main的css定义。

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

我们的 app.css 文件

现在我们的标题已经完全居中了。

为了让它看起来更好一些，我们需要使它加粗，并添加一些很酷的字体。要做到这一点，我们将在我们的标题周围使用标题标签，像这样：

import './App.css';

function App() {
  return (
    
      React Crud Operations
    
  );
}

export default App;

让我们从 Google Font导入一种字体. 从 https://fonts.google.com/选择一种。

选择任何你喜欢的字体，但我将使用Montserrat字体家族。

在App.css文件中导入你选择的字体，像这样：

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

现在，让我们改变标题的字体。


      React Crud Operations

给 h2一个 lassName 为 main-header，就像上面。

然后，在你的 App.css文件，添加font family：

.main-header{
  font-family: 'Montserrat', sans-serif;
}

现在你会看到改变后的标题。

如何创建你的CRUD组件

让我们创建四个CRUD组件，它们将是创建、读取、更新和删除。

在我们的src文件夹中，创建一个名为组件的文件夹。在这个文件夹中，创建三个文件--创建、读取和更新。对于删除，我们不需要任何额外的组件。

现在，让我们来实现这些。

但为此，我们需要使用Mock API。这些API将向我们将要创建的假服务器发送数据，这只是为了学习的目的。

所以，请前往 https://mockapi.io/ ，创建账号。

MockAPI

通过点击(plus)加号按钮创建一个项目。

点击(plus)加号按钮，创建一个新的项目。

添加你的项目名称，然后点击(create)创建按钮。

现在，通过点击 (NEW RESOURCE)新资源 按钮创建一个新资源。

它将要求你提供(RESOURCE name)资源名称，所以输入你想使用的名称。

删除额外的字段，如姓名(name)、头像(avatar)或创建时间(createdAt），因为我们将不需要这些。然后，点击创建(create)。

现在，我们已经创建了我们的 fake API(假API)，我把它命名为fakeData。

点击fakeData，你会看到API在一个新的标签中打开。现在的数据库是空的。

如何为(create Component)创建组件创建一个表格

让我们使用Semantic UI库中的一个表单。

前往Semantic React，在左边的搜索栏中搜索Form。

你会看到一个像这样的表格，点击左上方的 试试(Try it)，就可以得到代码。

复制这段代码并将其粘贴到你的Create.js文件中，像这样：

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    
        
            First Name
            
        
        
            Last Name
            
        
        
            
        
        
    
)

export default Create;

在你的app.js文件中导入创建组件(Create Component)。

import './App.css';
import Create from './components/create';

function App() {
  return (
    
      React Crud Operations
      
        
      
    
  );
}

export default App;

就像这样：

但这里有一个问题--项目没有正确对齐，文本输入标签颜色是黑色的。所以，让我们来改变它。

在create.js文件中，给Form一个create-form的className。

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const Create = () => (
    
        
            First Name
            
        
        
            Last Name
            
        
        
            
        
        
    
)

export default Create;

app.js

并在你的App.css文件中添加以下类。

.create-form label{
  color: whitesmoke !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px !important;
}

App.css

这个类将针对所有的表格字段标签并应用白烟的颜色。它还将改变字体并增加字体大小。

现在，在我们的主className中，添加一个flex-direction属性。这个属性将设置方向为列，所以主className中的每个元素都将水平对齐。

.main{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #212121;
  color: whitesmoke;
  flex-direction: column;
}

App.css

你可以看到，我们的表单现在看起来好多了。

接下来，让我们从表单字段中获取数据到我们的控制台(console)。为此，我们将使用React的useState钩子。

在我们的create.js文件中，从React中导入useState。

import React, { useState } from 'react';

然后，为名字(first name)、姓氏(last name)和复选框(checkbox)创建状态。我们将这些状态初始化为空或假。

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    return (
        
            
                
                    First Name
                    
                
                
                    Last Name
                    
                
                
                    
                
                
            
        
    )
}

你可以看到，这现在是作为一个函数组件。所以，我们需要把这个组件改成一个函数组件。这是因为我们只能在函数组件中使用钩子。

现在，让我们分别使用setFirstName、setLastName和setCheckbox属性来设置名字、姓氏和复选框。

 setFirstName(e.target.value)}/>

 setLastName(e.target.value)}/>

 setCheckbox(!checkbox)}/>

我们正在获得名字(first name)、姓氏(last name)和复选框(checkout)的状态。

创建一个名为postData的函数，我们将用它来向API发送数据。在该函数中，写下这段代码。

const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
}

我们在控制台中打印出名字(firstName)、姓氏(lastName)和复选框(checkbox)的值。

在(Submit button)提交按钮上，使用onClick事件调用这个函数，这样，每当我们按下提交按钮，这个函数就会被调用。

这里是 create 文件的全部代码。

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'

export default function Create() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);
    const postData = () => {
        console.log(firstName);
        console.log(lastName);
        console.log(checkbox);
    }
    return (
        
            
                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>
                
                
            
        
    )
}

在名字和姓氏中输入一些数值，并勾选复选框。然后，点击提交按钮。你会看到控制台中打印出的数据是这样的。

如何使用Axios向Mock APIs发送请求

让我们使用Axios来发送我们的表单数据到模拟服务器。

但首先，我们需要安装它。

只要输入npm i axios来安装这个包。

软件包安装完毕后，让我们开始(create)创建操作。

在文件的顶部导入Axios。

import axios from 'axios';

导入Axios

在postData函数中，我们将使用Axios来发送POST请求。

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        })
    }

发送 Post 请求

如你所见，我们正在使用axios.post。在axios.post中, 我们有 API endpoint(接入点请求地址), 这是我们之前创建的。然后，我们有被大括号包裹的表单字段。

当我们点击提交时，这个函数将被调用，它将向API服务器发布数据。

输入你的名字(first name)，姓氏(last name)，并勾选复选框。点击提交。

然后，你检查这个API的返回值，你会得到你的名字、姓氏，复选框为真的值，被包裹在一个对象中。

如何实现读取和更新操作

为了开始(read)读取操作，我们需要创建一个读取页面。我们还需要React Router包来导航到不同的页面。

前往https://reactrouter.com/web/guides/quick-start查看文档，同时运行 npm i react-router-dom进行安装。

安装完毕后，从React Router导入一些东西：

import { BrowserRouter as Router, Route } from 'react-router-dom'

从React Router中导入Router和Route。

在我们的App.js中，把整个返回包成一个Router。这基本上意味着，无论这个Router里面有什么，都能在React中使用。

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    
      
        React Crud Operations
        
          
        
      
    
  );
}

export default App;

我们的App.js现在看起来会像上面的样子。

替换掉返回里面的Create，并添加以下代码。

import './App.css';
import Create from './components/create';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    
      
        React Crud Operations
        
          
        
      
    
  );
}

export default App;

在这里，我们使用Route组件作为Create。我们已经将Create的路径设置为'/create'。因此，如果我们进入http://localhost:3000/create ，我们将看到创建页面。

同样地，我们需要(read)读取和(update)更新的路由。

import './App.css';
import Create from './components/create';
import Read from './components/read';
import Update from './components/update';
import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    
      
        React Crud Operations
        
          
        
        
          
        

        
      
    
  );
}

export default App;

因此，(read)读取和(update)更新路由，类似你上面看到的。

如果你前往 http://localhost:3000/read，会看到下面的：

Read Route

在http://localhost:3000/update 网址，我们可以看到更新组件（Update Component），像这样：

读取操作

对于读取操作，我们将需要一个表组件。因此，前往React Semantic UI，并使用库中的一个表。

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        
            
                    
                        Name
                        Registration Date
                        E-mail address
                        Premium Plan
                    
                
                    
                        John Lilki
                        September 14, 2013
                        jhlilk22@yahoo.com
                        No
                    
                    
                        Jamie Harington
                        January 11, 2014
                        jamieharingonton@yahoo.com
                        Yes
                    
                    
                        Jill Lewis
                        May 11, 2014
                        jilsewris22@yahoo.com
                        Yes
                    
                
                

                
            
        
    )
}

Read.js

在这里，你可以看到我们有一个带有一些假数据(dummy data)的表。但我们只需要一个表行。所以，让我们删除其他的。

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        
            
                    
                        Name
                        Registration Date
                        E-mail address
                        Premium Plan
                    
                
                    
                        John Lilki
                        September 14, 2013
                        jhlilk22@yahoo.com
                        No
                    
                
                

                
            
        
    )
}

Read.js

这是“阅读”页面的输出。我们有一个有四列的表，但我们只需要三列。

删除多余的字段列，并像这样重新命名字段。

这就是我们的阅读页面现在的样子：

import React from 'react';
import { Table } from 'semantic-ui-react'
export default function Read() {
    return (
        
            
                    
                        First Name
                        Last Name
                        Checked
                    
                
                    
                        Nishant
                        Kumar
                        Yes
                    
                
                

                
            
        
    )
}

Read.js

现在，让我们发送GET请求，从API获得数据。

当我们的应用程序加载时，我们需要这些数据。所以，我们要使用useEffect钩子(hook)。

import React, { useEffect } from 'react';

 useEffect(() => {
       
 }, [])

useEffect钩子(hook)

创建一个包含传入数据的状态。这将是一个数组。

import React, { useEffect, useState } from 'react';

const [APIData, setAPIData] = useState([]);
useEffect(() => {
       
}, [])

APIData state 来存储API传入的数据

在useEffect钩子(hook)中，让我们发送GET请求。

 useEffect(() => {
        axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
            .then((response) => {
                setAPIData(response.data);
            })
    }, [])

因此，我们使用axios.get来向API发送GET请求。然后，如果请求被满足，我们就在我们的_APIData_状态中设置响应数据。

现在，让我们根据API数据来映射我们的表行。

我们将使用Map函数来做这件事。它将对数组进行迭代，并在输出中显示数据。


  {APIData.map((data) => {
     return (
       
          {data.firstName}
           {data.lastName}
           {data.checkbox ? 'Checked' : 'Unchecked'}
        
   )})}

我们根据API中的数据来映射firstName、lastName和checkbox。但我们的复选框有一点不同。我在这里使用了一个三元操作符（'?'）。如果data.checkbox为真，输出将是Checked，否则将是Unchecked。

Read.js 输出

更新(Update)操作

再为更新创建一个标题，并在表行中为更新按钮创建一列。使用Semantic UI React的按钮。

Update

创建(Update)更新按钮

现在，当我们点击这个按钮，我们应该被重定向到更新页面。为此，我们需要React Router的链接。

从React Router导入Link。并将更新按钮的表格单元格包装成Link标签。

import { Link } from 'react-router-dom';

为更新按钮添加链接(Link)

因此，如果我们点击更新按钮，我们将被重定向到更新页面。

为了更新列的数据，我们需要它们各自的ID，这从APIs获得。

创建一个名为 "setData "的函数。将其绑定到更新按钮上。

现在，我们需要将数据作为参数传递给上面的函数。

并在上面的的函数中，在控制台中打印这些数据。

const setData = (data) => {
   console.log(data);
}

控制台的数据

点击表中的更新按钮，并查看控制台。你会得到相应表字段的数据。

让我们把这些数据设置到localStorage中。

const setData = (data) => {
        let { id, firstName, lastName, checkbox } = data;
        localStorage.setItem('ID', id);
        localStorage.setItem('First Name', firstName);
        localStorage.setItem('Last Name', lastName);
        localStorage.setItem('Checkbox Value', checkbox)
}

在本地存储中(Local Storage)设置数据

我们正在将我们的数据解构为id、firstName、lastName和checkbox，然后我们将这些数据设置到本地存储(Local Storage)。你可以使用本地存储(Local Storage)来在浏览器中的存储数据。

现在，在更新组件中，我们需要一个表单来进行更新操作。让我们复制(reate component)创建组件中的表单。只要把函数的名称从Create改为Update。

import React, { useState } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';

export default function Update() {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    return (
        
            
                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>
                
                
            
        
    )
}

我们的更新页面

在Update组件中创建一个`useEffect'钩子(hook)。我们将用它来获取我们之前存储在本地存储的数据。同时，为ID字段再创建一个状态(state)。

const [id, setID] = useState(null);

useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'))
}, []);

根据你的keys(字典，map 数据结构)从本地存储设置相应的数据。我们需要在表格字段中设置这些值。当更新页面加载时，它将自动填入这些字段。


                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>

设置表格字段的值

现在，如果我们点击阅读页面中的更新按钮，我们将被重定向到更新页面，在那里我们将看到所有根据数据自动填充的表单。

更新页面

现在，让我们创建更新请求来更新数据。

创建一个名为updateAPIData的函数。在这个函数中，我们将使用axios.put来发送一个PUT请求，以更新我们的数据。

const updateAPIData = () => {
    axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
        firstName,
         lastName,
         checkbox
	})
}

在这里，你可以看到我们在API端点上附加了一个id字段。

当我们点击表中的字段时，它的ID会被存储到本地存储器(Local Storage)中。而在更新页面，我们正在检索它。然后，我们将该ID存储在_id_状态中。

之后，我们将ID传递给端点。这使我们能够更新我们传递ID的字段。

将updateAPIData函数绑定到更新按钮上。

将updateAPIData绑定到更新按钮上

点击读取页面中表格的更新按钮，改变你的姓氏（last name），然后点击更新页面中的更新按钮。

更新字段

回到“阅读”页面，或查看API。你会看到你的姓氏(last name)已被改变。

The Mock API

我们的读取表格

删除操作

在读取表(read table)中再添加一个Button，我们将用它来进行删除操作。

读取表中的删除按钮

创建一个名为 "onDelete "的函数，并将此函数绑定到删除按钮上。这个函数将在点击删除按钮时接收一个ID参数。

const onDelete = (id) => {

}

The Delete Function

We are going to use axios.delete to delete the respective columns.

const onDelete = (id) => {
  axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
}

从API中删除字段

点击删除按钮并检查API。你会看到数据已经被删除。

我们需要在表被删除后获得该表的数据。

因此，创建一个函数来获得API数据。

const getData = () => {
    axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
        .then((getData) => {
             setAPIData(getData.data);
         })
}

获取API数据

现在，在onDelete函数中，我们需要在删除一个字段后获得更新的数据。

const onDelete = (id) => {
        axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`)
     .then(() => {
        getData();
    })
}

删除一个字段后获得更新数据

读取表格

因此，现在如果我们在任何字段上点击Delete，它将删除该字段并自动刷新表格。

删除一个字段后读表

让我们对我们的CRUD应用程序做一些改进吧

因此，当我们在Create页面发布我们的数据时，我们只是在模拟(mock)数据库中获得数据。当我们的数据在创建页面中被创建时，我们需要重定向到读取页面。

从React Router导入`useHistory'。

import { useHistory } from 'react-router';

从React Router导入useHistory

创建变量history使用 let。

let history = useHistory();

然后，使用history.push函数，在post API被调用后推送到阅读页面。

const postData = () => {
        axios.post(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }

在发布API成功后推送到阅读页面

它将使用useHistory钩子(hook)推送到阅读页面。

对更新页面做同样的处理。

import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useHistory } from 'react-router';

export default function Update() {
    let history = useHistory();
    const [id, setID] = useState(null);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckbox] = useState(false);

    useEffect(() => {
        setID(localStorage.getItem('ID'))
        setFirstName(localStorage.getItem('First Name'));
        setLastName(localStorage.getItem('Last Name'));
        setCheckbox(localStorage.getItem('Checkbox Value'));
    }, []);

    const updateAPIData = () => {
        axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${id}`, {
            firstName,
            lastName,
            checkbox
        }).then(() => {
            history.push('/read')
        })
    }
    return (
        
            
                
                    First Name
                     setFirstName(e.target.value)}/>
                
                
                    Last Name
                     setLastName(e.target.value)}/>
                
                
                     setCheckbox(!checkbox)}/>
                
                
            
        
    )
}

Update.js

现在你知道如何使用React和React Hooks进行CRUD操作了吧！

另外，如果你想补充学习，你可以观看我在Youtube上的[React CRUD操作视频]（https://youtu.be/-ZMP8ZladIQ）。

学习愉快

通过创建贷款计算器学习 React

Chengjun.L — Tue, 04 Apr 2023 03:00:00 +0000

原文： Learn React by Building a Mortgage Calculator

今天我们将通过创建一个贷款计算器来学习和实践 ReactJS。这就是我们要创建的项目 👇

目标

在创建这个项目时，我们将涉及的主题是：

React 功能组件
Material UI
用户输入
处理 Props
Props 解构赋值
useState Hook

还有更多！这个教程对于想通过创建一个真实世界的项目来学习 ReactJS 的初学者来说是非常好的。

如果你喜欢，你也可以在 YouTube 上观看这个教程：

项目设置

为了设置该项目，我们需要安装 eact、material-ui 和其他必要的软件包。

首先创建一个名为 mortgage-calculator 的文件夹，在 VS Code 上打开它，然后在终端运行以下命令：

npx create-react-app .
npm install @mui/material @emotion/react @emotion/styled
npm install --save chart.js react-chartjs-2

App.js

我们将删除 app.js 中所有的模板代码，保留这部分 👇

import React from "react";

function App() {
  return Hello everyone;
}

export default App;

然后在终端运行这个命令来启动服务器：

npm start

该项目现在在 web 浏览器上应该是完全空白的。

开始编程

一切都设置好了，可以开始了。现在，我们将开始构建该项目 :)

文件夹结构

我们的文件夹结构应该是这样的，这样我们就可以轻松地管理和维护文件和文件夹：

mortgage-calculator/
├── src/
│   ├── Components/
│   │   ├── Common/
│   │   │   └── SliderComponent.js
│   │   ├── Navbar.js
│   │   ├── Result.js
│   │   ├── SliderSelect.js
│   │   ├── TenureSelect.js
│   ├── theme.js
│   ├── App.js
│   ├── index.js
├── .gitignore
├── package.json
└── package-lock.json

如果你感到困惑，这里有一张我们的项目文件夹结构的图片：

Material UI 主题

我们将使用 Material UI 的深色主题。为此，我们需要在 src 文件夹中创建一个名为 theme.js 的文件，并添加以下代码：

theme.js

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  palette: {
    mode: 'dark',
  },
})

index.js

接下来，我们需要在 index.js 文件中导入 theme，并用 ThemeProvider 来包含应用程序。下面就跟着做吧：👇

import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import { theme } from "./theme";

注意：如果你不传递 CssBaseline 组件，我们将无法看到 MUI 的深色主题。

这是目前的结果： 👇

整个屏幕将是黑的。这意味着我们的项目已经应用了 Material UI 深色模式。

接下来，我们将创建一个非常简单的导航条来显示 logo。为此，我们需要在 src/Components 文件夹中创建一个名为 Navbar.js 的文件，并添加以下代码：

import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import { Container } from "@mui/system";

const Navbar = () => {
  return (
    
      
        
          
            Bank of React
          
        
      
    
  );
};

export default Navbar;

下面是对 Material UI 中使用的组件的简单解释：

AppBar：Material UI 的 AppBar 组件用于在用户界面上创建一个顶部导航栏。点击这里了解更多。
Container：Material UI 的 Container 组件用于创建一个容器元素，该元素可用于创建一个响应式布局，并在用户界面中集中和包含其他元素。点击这里了解更多。
ToolBar：Toolbar 组件可以包含诸如按钮、文本和图标等元素，也可以用来创建一个适应不同屏幕尺寸的响应式布局。点击这里了解更多。
Typography：Material UI 的 typography 组件用于将预定义的排版样式应用于文本元素。它可以帮助创建一个一致的、视觉上赏心悦目的布局，具有可定制的字体、大小、粗细和间距。点击这里了解更多。

App.js

最后，将其导入 App.js，并这样写代码：👇

import React from "react";
import Navbar from "./Components/Navbar";

function App() {
  return (
    
      
    
  );
}

export default App;

这是目前为止的结果： 👇

Material UI 网格系统

在最终完成的项目中，我们可以看到内容被分成了两部分。左边有滑块组件，右边有饼图。这是用 Material UI 的网格系统实现的。

不仅如此，我们还可以看到，内容在较小的屏幕尺寸上是响应式的。这也是通过使用 Material UI 网格系统实现的。

为了复制这一点，我们需要在 App.js 文件上写上这些东西。你可以在这里跟着做。👇

首先，我们需要从 Material UI 和组件文件夹中导入所有需要的组件：

import React, { useState } from "react";
import { Grid } from "@mui/material";
import { Container } from "@mui/system";
import Navbar from "./Components/Navbar";
import Result from "./Components/Result";
import SliderSelect from "./Components/SliderSelect";
import TenureSelect from "./Components/TenureSelect";

接下来，我们在 return 语句里面写这段代码：👇

对这段代码的解释：

Container：在 Container 上，我们写了 sx={{marginTop:4}}。这是在 Material UI 中为组件添加内联样式的方法。
Grid：Grid 组件被用来创建一个适应不同屏幕尺寸的响应式布局。Grid container 代表父元素，Grid item 代表子元素。
在 Grid 组件上，我们写了 spacing={5}。这是在网格项之间添加间距的方法。
在 Grid 组件上，我们还写了 xs={12}，这意味着在超小屏幕上，网格项将占据整个屏幕的宽度。同样地，md={6} 意味着在中等和较大的屏幕上，网格项将占到屏幕的一半。这就是我们如何使组件具有响应性。

这是目前为止的结果：👇

如何创建 Slider 组件

接下来，我们将创建一个滑块组件来获取用户的输入金额。它看起来将是这样的： 👇

为此，我们需要在 src/Components/Common 文件夹中创建一个名为 SliderComponent.js 的文件。首先，让我们列出所有需要传递给可重用的滑块组件的 props：

label
min
max
defaultValue
unit
value
steps
amount
onChange

SliderComponent.js

我们开始吧。首先，在 SliderComponent.js 文件中从 MUI 导入以下组件：

import React from "react";
import Slider from "@mui/material/Slider";
import { Typography } from "@mui/material";
import { Stack } from "@mui/system";

我们将使用 MUI 的 Stack 组件来垂直堆叠组件。my 是 marginY [margin-top & margin-bottom] 的缩写。我们将使用 MUI 的 Typography 组件来显示标签、单位和其他数据。我们将使用 MUI 的 Slider 组件来显示滑块。

先写这一小段代码，解构 props：

const SliderComponent = ({
  defaultValue,
  min,
  max,
  label,
  unit,
  onChange,
  amount,
  value,
  steps
}) => {
  return (
    

    
  )
}

export default SliderComponent

我们将编写这段代码来显示标签、单位和金额。


  {label}
  
    {unit} {amount}

编写这段代码来显示滑块，并像这样把 props 传递给滑块组件： 👇

我们将编写这段代码来显示滑块的最小和最大值。我们将使用 MUI 的 Stack 组件来水平堆叠组件。direction="row" 是 flex-direction: row 的缩写。justifyContent="space-between" 是 justify-content: space-between 的缩写。


  
    {unit} {min}
  
  
    {unit} {max}

到目前为止，干得不错！

休息一下

休息一会儿吧——你值得！🎉

如何使用 useState Hook

我们需要在我们的项目中使用 useState hook。但在此之前，我们需要了解它是什么以及为什么我们需要使用它。

useState hook 是一个内置的 React 函数，允许你向功能组件添加状态。它返回一个包含两个元素的数组：当前状态值和一个更新该值的函数。useState hook 的一般语法如下：

const [state, setState] = useState(initialState);

其中👇

state：将存储状态的常量或变量的名称
setState：一个更新状态的函数
initialState：状态的初始值

useState hook 的例子

我们将创建一个切换按钮，点击它时，它的文本在 “ON” 和 “OFF” 之间切换。

import React, { useState } from 'react';

const ToggleButton = () => {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => setIsOn(!isOn)

  return (
      
  );
};

export default ToggleButton;

在这里，我们初始化 isOn 状态的初始值为 false。当用户点击按钮时，toggle 函数将 isOn 状态更新为其相反的值。我们使用一个三元操作符，根据 isOn 的当前值来渲染按钮内的文本。

App.js

现在让我们回到我们的项目中来。首先，在 App.js 文件中，从 React 导入 useState hook。

import React, { useState } from 'react';

接下来，我们将使用 useState hook 声明一个状态来存储滑块的值。我们将在 useState hook 中以 {} 的形式传递状态的初始值，将数据存储为一个对象。

function App() {
  const [data, setData] = useState({})

  // other codes are here
}

我们使用 useState hook 来创建一个名为 data 的新状态变量和一个名为 setData 的函数，我们可以用它来更新这个状态。

接下来，我们将把这些值作为默认值传递给滑块组件。

function App() {
  const [data, setData] = useState({
    homeValue: 3000,
    downPayment: 3000 * 0.2,
    loanAmount: 3000 * 0.8,
    loanTerm: 5,
    interestRate: 5,
  })

  // other codes are here
}

然后，我们将把 data 和 setData 状态作为一个 prop 传递给 SliderSelect 组件，像这样：👇


  
  
    
      

        {/* this is where we write the code  👇 */}

如何创建 SliderSelect 组件

所以现在我们已经准备好了可重复使用的 SliderComponent，将在 SliderSelect.js 组件中使用它。首先，从 Common 文件夹中导入 SliderComponent 组件。

SliderSelect.js

import SliderComponent from "./Common/SliderComponent";

接下来，我们将对从 App.js 收到的 prop 进行解构。同时，创建一个名为 bank_limit 的变量，并给它一个 10000 的值。这代表了一个人可以从我们的银行借到的最大数额的钱。

import React from "react";
import SliderComponent from "./Common/SliderComponent";

const SliderSelect = ({ data, setData }) => {
  const bank_limit = 10000;
  return (
    
      
    
  );
};

export default SliderSelect;

接下来，我们将使用 SliderComponent 来显示名为 Home Value 的滑块。在这里，我们将像这样把 props 传递给 SliderComponent 组件。

const SliderSelect = ({ data, setData }) => {
  const bank_limit = 10000;
  return (
    
       {
          setData({
            ...data,
            homeValue: value.toFixed(0),
            downPayment: (0.2 * value).toFixed(0),
            loanAmount: (0.8 * value).toFixed(0),
          });
        }}
        defaultValue={data.homeValue}
        min={1000}
        max={bank_limit}
        steps={100}
        unit="$"
        amount={data.homeValue}
        label="Home Value"
        value={data.homeValue}
      />
    
  );
};

这是目前为止的结果：👇

我们将以同样的方式为 Down Payment 和 Loan Amount 创建滑块，像这样：👇

  return (
    
      {/* other codes are here */}

      
          setData({
            ...data,
            downPayment: value.toFixed(0),
            loanAmount: (data.homeValue - value).toFixed(0),
          })
        }
        defaultValue={data.downPayment}
        min={0}
        max={data.homeValue}
        steps={100}
        unit="$"
        amount={data.downPayment}
        label="Down Payment"
        value={data.downPayment}
      />

      
          setData({
            ...data,
            loanAmount: value.toFixed(0),
            downPayment: (data.homeValue - value).toFixed(0),
          })
        }
        defaultValue={data.loanAmount}
        min={0}
        max={data.homeValue}
        steps={100}
        unit="$"
        amount={data.loanAmount}
        label="Loan Amount"
        value={data.loanAmount}
      />
    
  );

这是目前为止的结果：👇

最后，我们将为 Interest Rate 创建滑块。你可以在这里跟着做：👇

return (
    
      {/* other codes are here */}

      
          setData({
            ...data,
            interestRate: value,
          })
        }
        defaultValue={data.interestRate}
        min={2}
        max={18}
        steps={0.5}
        unit="%"
        amount={data.interestRate}
        label="Interest Rate"
        value={data.interestRate}
      />
    
  );

结果如下：👇

如何创建 TenureSelect 组件

接下来，我们将创建 TenureSelect 组件。这个组件将被用来选择贷款的期限。它看起来像这样：👇

App.js

首先，像这样把 data 和 setData 状态作为一个 prop 传递给 TenureSelect 组件：👇

return (
  
    
    
      
        
          

          {/* this is where we write the code  👇 */}
          

        
        
          
        
      
    
  
);

TenureSelect.js

然后，从 MUI 库中导入这些所需的组件：

import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

然后解构我们从 App.js 接收的 props，同时创建一个名为 handleChange 的函数，它将被用来设置 tenure 状态，像这样：👇

const TenureSelect = ({ data, setData }) => {

  const handleChange = (event) => {
    setData({...data, loanTerm: event.target.value});
  };

  return ()
};

export default TenureSelect;

接下来，我们将创建 TenureSelect 组件。它看起来像这样：👇

return (
  
    Tenure
    
  
);

结果如下：👇

如何创建 Result 组件

最后，我们将创建 Result 组件。这个组件将用于显示每月的贷款分期付款和饼图。它看起来像这样：👇

App.js

首先，像这样把 data 状态作为一个 prop 传递给 Result 组件：👇

return (
  
    
    
      
        
          
          
        
        

          {/* this is where we write the code  👇 */}
          
          
        
      
    
  
);

Result.js

接下来，像这样导入所需的组件：👇

import React from "react";
import { Stack, Typography } from "@mui/material";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Pie } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip, Legend);

然后像这样解构我们从 App.js`接收的数据状态：👇

const Result = ({ data }) => {
  const { homeValue, loanAmount, loanTerm, interestRate } = data;
  return ();
};

export default Result;

接下来我们将写出所有帮助我们进行计算的东西：👇

  const totalLoanMonths = loanTerm * 12;
  const interestPerMonth = interestRate / 100 / 12;
  const monthlyPayment =
    (loanAmount *
      interestPerMonth *
      (1 + interestPerMonth) ** totalLoanMonths) /
    ((1 + interestPerMonth) ** totalLoanMonths - 1);

  const totalInterestGenerated = monthlyPayment * totalLoanMonths - loanAmount;

然后我们需要这个变量来存储饼图的所有数据，像这样：👇

const pieChartData = {
  labels: ["Principle", "Interest"],
  datasets: [
    {
      label: "Ratio of Principle and Interest",
      data: [homeValue, totalInterestGenerated],
      backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)"],
      borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)"],
      borderWidth: 1,
    },
  ],
};

最后，我们将创建 Result 组件，它是这样的：👇

return (
  
    
      Monthly Payment: $ {monthlyPayment.toFixed(2)}
    
    
      
        
      
    
  
);

结果如下：👇

总结

祝贺你读到最后！现在你可以自信地、有效地使用 React JS 和 Material UI 来创建很酷的项目。

你还学会了如何使用 React 的 useState hook，以及如何处理 props。我希望你喜欢这个教程。

导师计划

如果你有兴趣学习更多关于 React JS 和 web 开发的知识，我正在进行一个导师计划。你可以在这里查看细节👉Mentor Labs Academy。

我的社交媒体链接

如何为你的博客创建目录

Chengjun.L — Mon, 13 Mar 2023 01:19:00 +0000

原文： How to Build a Table of Contents Component for Your Blog

当你访问文档网站时，你会注意到许多网站都有一个组件：组件。

它背后的想法是给读者一个关于他们试图获取的信息的“提示”。

这个功能反过来又帮助读者直接访问某个部分，这个部分为他们所面临的任何错误或问题提供了解决方案，因此他们无需阅读整篇文章。这有助于形成良好的用户体验，因为你最终为你的受众省去了额外的滚动和搜索的麻烦。

我有一个个人博客，我花了很多时间在上面。而在很长一段时间里，我想过要增加这个功能。它将帮助任何访问我的网站的人阅读起来更开心，并找到他们需要的东西。

这篇文章是对我的过程的总结，所以你不需要经历我所经历的问题。如果你想在你的博客上添加目录功能，你可以和我一起看看这个过程。

我分享了一段视频，说明该组件完成后的样子。你可以在这里查看视频。

如何从前页获取标题文本

为了建立一个目录功能，我知道我需要做什么。由于我的博客上的文章是用 markdown 写的，我只是使用 markdown 的超集——MDX——它允许我在 markdown 文件中使用 React 组件。

我的清单上的第一件事是获得一种在组件中渲染标题文本的方法。这样，当人们点击标题时，浏览器就会滚动到文章的那个点。

在 HTML 中，你可以通过使用锚标签并将其值传递给一个 href 属性来实现这一目的。

要让链接的文本指向一个部分，理想的方法是像下面的代码片段那样：

Go to section one
Go to section two
Go to section three

some content
yet, a content that seems weird
some content, again

在上面的片段中，DOM 中的锚点标签通过 id 属性与各部分相关联。当你点击任何文本时，它会把你带到相应的部分。

有了这个心理模型，我想在我写过的所有文章中用标题来填充每篇文章的前页（frontmatter）。我知道这将有些压力，但我还是这么做了。

这就是 markdown 文件中的 frontmatter 的样子。前页包含了我博客上所有文章的元数据，诸如标题、发布日期、文章所属的标签或类别、描述、规范 URL，以及其他任何你想添加的东西，以提升文章的 SEO。

当你用 Next.js 和 MDX 构建博客时，这种模式很常见。它也有一个类似 YAML 的语法。

---
id: 20
title: Building a Table of Content component
publishedAt: '2023-02-28'
excerpt: description of the article
tags:
  - ux
  - nextjs
headings:
  - heading-one
  - heading-two
  - heading-three
cover_image: /img/covers/toc.jpg
---

上面的片段是本文前页的样子，但有 headings 条目。我将用它来解释我最初的方法。如果我继续前进并映射（map through）前页，我将能够从 headings 数组中检索内容。

这很好，因为我将能够在 TableOfContent 组件中使用 headings 数组中的项目。这感觉很不真实，我高兴了一会儿。该组件看起来像这样：

import React from 'react'
import { HeadingContainer } from './style/toc.styled'

export default function TableOfContents({ headings }) {
  return (
    
      In this article
      
        {headings.map((item, index) => (
          
            {item}
          
        ))}
      
    
  )
}

上面的组件接收一个 headings prop，而这个 prop 又通过 Next.js 的 getStaticProps() 方法从 frontmatter 接收一个值。

export default function Blog({
  post: {
    frontmatter: { title, headings },
  },
}) {
  return (
    <>
      
        {title}
      
      
    
  )
}

// 解构参数以获得唯一的 slug
export async function getStaticProps({ params }) {
  const { slug } = params
  const { frontmatter } = await getArticleFromSlug(slug)

  return {
    props: {
      post: {
        frontmatter,
      },
    },
  }
}

如果上面的片段看起来有点混乱，你可以看看这篇文章，我写了一个 Next.js 博客的设置过程。

该组件渲染了 frontmatter 中的项目列表，看起来很好。

但是，当我点击一个项目，希望滚动到那个部分的时候，它却没有像预期的那样工作。我遇到了一个错误，你会在下一节看到。

如何使用 extract-md-headings

我意识到，当我点击组件中的一个项目时，浏览器用空格的编码参数对当前 slug 的 URL 进行编码——%20%——这反过来导致了这个问题。

我意识到这也可能是我在 frontmatter 中引用标题元素的方式。但这并不重要，因为我找到了一个替代方案，而且效果很好。

在我确定它完美地工作之后，我继续把这个替代方案作为一个包发布到 npm registery。

这个包扩展了一个函数，extractHeadings()，它接受一个字符串，作为一个路径，指向 markdown 文件的位置，并提取任何符合 markdown 文件中标题文本写法的文字。如果你想看看它是如何工作的，你可以看看这里的源代码。

有了这个工具，我修改了 getStaticProps 方法来使用这个函数。你可能会问我，为什么？嗯，因为这个包完全依赖于 Node 的 fs 模块，这相当于一个服务器端的脚本方法。

使用 Next.js，我们可以在页面目录中用任何一种数据获取方法，getStaticProps、getStaticPaths 和 getServerSideProps，进行服务器端操作：

import React from 'react'
import { extractHeadings } from 'extract-md-headings'

export default function Blog({
  post: {
    fileContent,
    frontmatter: { title },
  },
}) {
  return (
    <>
      
        {title}
      
      
    
  )
}

export async function getStaticProps({ params }) {
  const { slug } = params
  const { frontmatter } = await getArticleFromSlug(slug)
  const mdxContent = extractHeadings(`/path/to/where/${slug}.mdx`)

  return {
    props: {
      post: {
        frontmatter,
        fileContent: mdxContent,
      },
    },
  }
}

现在 [slug].js 页面通过 TOC 组件的 heading prop 知道了 fileContent 的情况。所以我需要修改它，使它能适应函数返回的属性。

import React from 'react'
import { HeadingContainer } from './style/toc.styled'

export default function TableOfContents({ headings }) {
  return (
    
      In this article
      
        {headings.map(({ slug, title, id }) => (
          
            {title}
          
        ))}
      
    
  )
}

目前，该组件只是渲染了从函数返回的数组中的项目列表，没有交互性，没有办法跟踪哪个元素是活动的，还有很多东西我暂时还没能添加。

如何添加基于点击和滚动的状态

如果说我喜欢 React 的什么，那就是它追踪状态的能力。我已经看到这在其他文档平台上是如何工作的——当你点击一个项目时，它就变成活动的，当你滚动到有标题标签的部分时，它就变成活动的。

很多人都有不同的方法来监控这些状态。我选择了最简单的方法——改变颜色——因为，像往常一样，“我不喜欢压力”。在我的组件的用户界面中，默认的文本颜色有点灰，所以当它被激活时，它就变成白色。

我先介绍一下我用 useState hook、一些 DOM API 和 getBoundingClientRect web API 对组件进行修改的代码片段。内容挺多——我知道，但是，我试着把它简单地分解一下。

当我们使用 useState hook 时，有一个默认值——一个布尔值、字符串或数字，这是一个常见的方法。在下面的片段中，该组件使用 headings prop 来检查数组的长度是否为空，是否大于零，并将组件的默认状态设置为第一个元素的默认状态。

const [active, setActive] = React.useState(
  headings.length > 0 ? headings[0].slug : ''
)

如果数组是空的，没有元素会有活动状态的样式。现在，如果你在列表元素中放置一个 onClick 属性——就像我做的那样——并传递 slug 作为参数，它将切换你在 style 属性中写的样式。

 setActive(slug)}
  style={{
    color: active === slug ? '#fff' : '',
  }}
>
  {title}

处理滚动状态需要使用 React 的 useEffect hook，因为它包含了所有的生命周期方法——componentDidMount()、componentDidMount() 和 componentWillUnmount()。在这里，我决定通过用 DOM EventTarget 接口监听本地滚动事件来跟踪滚动状态。

下面的函数 handleScroll 通过对对象的 slug 属性进行解构，映射我们从 extractHeadings() 函数中得到的结果。它继续用 getElementById 返回所有包含适当 id 属性的元素，并将其值分配给 headingElements。

const handleScroll = () => {
  const headingElements = headings.map(({ slug }) =>
    document.getElementById(slug)
  )
  const visibleHeadings = headingElements.filter((el) =>
    isElementInViewport(el)
  )
  if (visibleHeadings.length > 0) {
    setActive(visibleHeadings[0].id)
  }
}

还是在这个函数中，从 headingElements 数组中过滤出 visibleElements，isElementInViewport 函数被用来检查哪个标题元素当前在视口中——这可以通过 getBoundingClientRect 实现，我很快会讲到。

该函数以一个条件结束，如果可见标题的长度大于 0，则设置一个活动元素。

现在，我可以继续把这个函数包在 Effect 中，启动滚动事件的清理，并在依赖数组中传递 headings prop。然后，只有当 headings prop 发生变化时，才会触发 Effect。

React.useEffect(() => {
  const handleScroll = () => {
    const headingElements = headings.map(({ slug }) =>
      document.getElementById(slug)
    )
    const visibleHeadings = headingElements.filter((el) =>
      isElementInViewport(el)
    )
    if (visibleHeadings.length > 0) {
      setActive(visibleHeadings[0].id)
    }
  }

  document.addEventListener('scroll', handleScroll)

  // 通过删除事件监听器来清理 effect
  return () => {
    document.removeEventListener('scroll', handleScroll)
  }
}, [headings])

isElementInViewport 是这个功能的重中之重。该函数接受一个元素 el 作为参数，并检查其边界矩形（这再次证明了网络上的盒子原则是正确的）是否在浏览器的视口内。

const isElementInViewport = (el) => {
  const rect = el.getBoundingClientRect()
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  )
}

借助 getBoundingClientRect web API，这是可能的。该方法返回一个对象，包含元素的上、左、下和右边缘相对于视口的坐标。

当 getBoundingClientRect 被调用时，它返回一个包含特定标题元素相对于视口的上、左、下和右边缘坐标的对象。

在这个功能中，相对于视口的元素是使用 getElementById 方法检索到的标题元素。

如果顶部和左侧坐标大于或等于零，底部和右侧坐标分别小于或等于视口的高度和宽度，该函数返回 true。

为了使该函数返回 true，我们必须得到视口的高度和宽度的值。这就是为什么用 window.innerHeight 和 window.innerWidth 或 documentElement.clientHeight 和 documentElement.clientWidth 来比较这些值是很方便的。

为什么会有压力？IntersectionObserver 解决了这个问题

我知道走 intersectionObserver 的路线会为我减少很多压力。但是，我还是选择了这种方法，因为我想了解其他人是如何构建这个功能的。

我想你也可以用一个 intersectionObserver 包来监控 React 应用程序中的滚动事件，所以你可能根本不需要走这条路。但我想分享一些我决定使用这个 API 而不是 IntersectionObserver 的原因。

就准确性而言，getBoundingClientRect 返回元素相对于视口的更精确的位置，而 IntersectionObserver 使用基于元素边界盒的近似值。

这意味着 getBoundingClientRect 在某些用例中可以更精确，比如当你需要在元素进入视口时立即触发一个动作——就像我们在组件中改变列表项的活动状态。

在浏览器兼容性方面，IntersectionObserver 是一个相对较新的 API，其他浏览器可能不支持它。但是，另一方面，getBoundingClientRect 被现代浏览器广泛支持。

与 getBoundingClientRect 相比，IntersectionObserver 的一个优势是在性能方面。这是因为该 API 使用了一种优化的算法，当你跟踪这么多元素时，它可以最大限度地减少检测相交状态变化所需的工作量。

getBoundingClientRect API 不能处理这么多元素。

总结

我知道，很多人还是喜欢使用 intersectionObserver。但是，我决定采用另一种方法，因为它让我看到了 intersectionObserver 本身是如何在后台工作的，而且最重要的是，它适合我的用例。

这就是 TOC 组件的逻辑，没有标记。如果你想的话，你可以复制并使用它。

import React from 'react'
import { HeadingContainer } from './style/toc.styled'

const TableOfContents = ({ headings }) => {
  const [active, setActive] = React.useState(
    headings.length > 0 ? headings[0].slug : ''
  )

  React.useEffect(() => {
    const handleScroll = () => {
      const headingElements = headings.map(({ slug }) =>
        document.getElementById(slug)
      )
      const visibleHeadings = headingElements.filter((el) =>
        isElementInViewport(el)
      )
      if (visibleHeadings.length > 0) {
        setActive(visibleHeadings[0].id)
      }
    }

    document.addEventListener('scroll', handleScroll)
    return () => {
      document.removeEventListener('scroll', handleScroll)
    }
  }, [headings])

  const isElementInViewport = (el) => {
    const rect = el.getBoundingClientRect()
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <=
        (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    )
  }

  return // component markup
}

export default TableOfContents

如果你读到这里，请分享这篇文章，谢谢！如果你想深入了解，你也可以阅读关于 getBoundingClientRect() web API 的资料。

小游戏开发：使用 React 和 Redux Tool Kit 实现俄罗斯方块

PapayaHUANG — Wed, 01 Mar 2023 03:10:00 +0000

俄罗斯方块是一款经典小游戏。通过从零开发一款小游戏，我们可以更好地了解开发使用的语言，同时也得到更强烈的“所见即所得”的反馈，所以开发小游戏会是不错的练手项目。

从一个主力语言是JavaScript的开发者角度来分析俄罗斯方块，不同形状的方块的下落、移动、消除其实是 复杂的状态管理和组件通信。这不刚好就是React和Redux的射程范围嘛！（并没有说它们适合游戏开发）

我将通过这篇博文拆解实现俄罗斯方块的一些核心逻辑，以及Redux Tool Kit的使用。

你可以在我的Github仓库上找到项目代码，也可以通过Github Page来试玩这个游戏。

本文涉及的技术

JavaScript数组高阶函数
使用Redux Tool Kit对React单页面项目进行状态管理
使用requestAnimationFrame实现动画效果

文件结构

项目总结构

|-- src
    |-- App.js
	|-- index.js
	|-- store.js
	|-- features/
		|-- game/
			|-- components/
			|-- game-slice.js
	|-- styles/
	|-- utils/

我是通过create-react-app创建的项目，游戏界面及功能所有代码都在src路径下：

我保留了index.js和App.js，同时添加了store.js来处理Redux store的配置代码；
样式全部放在了styles文件夹中，游戏运行的核心逻辑放到了utils文件夹中；
Redux官方推荐在使用RTK（Redux Tool Kit）时，创建一个features目录，并把不同的功能模块放在这个目录下，每一个功能模块包含自己的组件、reducer和其他相关文件（如与后端通信的代码），所以我在features目录下创建了game文件夹，并在其下创建了components目录和game-slice.js。

组件结构

我规划的组件包括：

|-- components/
	|-- Board.js
	|-- Control.js
	|-- MessagePopup.js
	|-- NextBlock.js
	|-- ScoreBoard.js
	|-- Square.js

Board.js是主游戏区
Control.js是按钮控制面板
MessagePopup.js是游戏结束时弹出的消息框
NextBlock.js是下一个形状提示框
ScoreBoard.js显示当前分数和历史最高分数
Square.js是组成主游戏区和提示框的小方块

核心UI组件搭建的逻辑

游戏区域的实现

主游戏区框架的实现

将主游戏区看作一个10*18的网格，可以通过单项数据为0的二维数组实现：

//src/utils/index.js

const boardDefault = () => {
    const rows = 18; //共18行
	const cols = 10; //共10列	
	const array = Array.from(Array(rows), () => Array(cols).fill(0));
	return array;
};

注：在示意图中，我标注了x和y象限，因为之后会使用x和y的值来判断形状在主游戏区的位置。

形状的实现

既然主游戏区可以通过数组来实现，那么不同形状的方块也可以通过数组来实现：

设定每一种形状都用一个4*4的网格作为容器：

[

	[0, 0, 0, 0],
	[0, 0, 0, 0],
	[0, 0, 0, 0],
	[0, 0, 0, 0],

],

在俄罗斯方块游戏中，不同的形状的颜色不同，所以可以用整数1,2,3,4...来区分它们。

使用整数的另一个好处是可以和样式绑定，先提前设置好每个颜色对应的编号：

:root {
	--color-0: #282c34;
	--color-1: #ff6600;
	--color-2: #eec900;
	...
	--color-7: #ff0000;
}

.color-0 {
	background-color: var(--color-0);
}

.color-1 {
	background-color: var(--color-1);
}

...
  
.color-7 {
	background-color: var(--color-7);
}

然后就可以通过数字1,2,3,4...在前文的4*4网格数组中的排列来表达不同的形状了，需要注意的是每个形状还有旋转后的样式也要考虑进去。

比方说一个长条形状及它旋转后可以表示为：

//I

[
	[
		[0, 0, 0, 0],
		[1, 1, 1, 1],
		[0, 0, 0, 0],
		[0, 0, 0, 0],
	],

	[
		[0, 1, 0, 0],
		[0, 1, 0, 0],
		[0, 1, 0, 0],
		[0, 1, 0, 0],
	],
],

把单个形状及其旋转后的样式放在同一个数组中，引用时就可以通过索引号来获得形状的旋转效果。
再把所有形状的数组汇总到一个数组中，这样通过索引号就把表示颜色的数字和形状挂钩了。

形状到主游戏区的映射

我们完成了主游戏区和形状分别的实现，那么当游戏进行时，如何把形状映射到主游戏区呢？

在React中，每一次渲染都相当于一次快照，那么就可以把游戏进行时，形状在主游戏区域的每一次移动都看作独立的一次形状数组到主游戏区数组的映射：

具像化我们映射过程就是从以上第一幅图到第二幅图。

代码实现如下：

//src/features/game/components/Board.js

//这里的board变量是10*18的由0组成的二位数组
const boardSquare = board.map((rowArray, row) => {
	return rowArray.map((square, col) => {
	//col（0-9）row（0-17)
	const blockX = col - x;
	const blockY = row - y;
	//square为0
	let color = square;
	//生成移动的block的颜色
	if (
		blockX >= 0 &&
		blockX < block.length &&
		blockY >= 0 &&
		blockY < block.length
	) {
    //这里的block变量引用了从函数外部取得的表示形状的数组
		color = block[blockY][blockX] === 0 ? color : blockColor;
	}
	//生成key
	const k = row * board[0].length + col;
	return ;
	});
});

让我们看看上面代码发生了什么：

x,y是形状起始的横轴（行）和纵轴（列）的坐标，我设定的初始值为x=4, y=-5，这样每一个形状的初始位置就位于主游戏区差不多正上方，随着形状的移动，这两个值也会发生变化；
boardSquare函数实际上做了两件事：将我们用数组表达的10*8主游戏区展示到UI；根据主游戏区纵坐标（0-17）、横坐标（0-9）与x、y的差值来定位，将形状数组映射到主游戏区；
首先通过一组嵌套结构的Array.map()的方法，遍历主游戏区所有网格，并将所有网格的color设置为0；
在遍历主游戏区的同时，通过blockX和blockY坐标来锁定位于形状数组内部的方块，如果它的值不为0的话，就返回对应数字的颜色；
因为React要求遍历的组件包含一个独一无二的key，所以通过row * board[0].length + col生成key。

判断边界的逻辑

移动范围边界

形状在主游戏区的移动遵守一定的规则：

左右下边都不可越界
如果在主游戏区碰到其他的形状，也不得移动。

我们只用检查形状内部每一个方块是否符合以上规则，就可以判断形状是否可以移动了。

此处还需要注意的是，每一形状都被放置在4*4的网格中，所以要排除方块值为0情况：

//src/utils/index.js

const canMoveTo = (shape, board, x, y, rotation) => {
	const currentShape = shapes[shape][rotation];
	for (let row = 0; row < currentShape.length; row++) {
		for (let col = 0; col < currentShape[row].length; col++) {
			if (currentShape[row][col] !== 0) {
				const proposedX = col + x;
				const proposedY = row + y;
			if (proposedY < 0) {
				continue;
				}
			const possibleRow = board[proposedY];
			if (possibleRow) {
				if (
					possibleRow[proposedX] === undefined ||
					possibleRow[proposedX] !== 0
					) {
						return false;
					}
				} else {
				//超越底线
						return false;
					}
				}
			}
		}
	//默认可以移动
	return true;
};

使用canMoveTo函数来判断是否可以移动，函数接受shape（形状数组）、board（主游戏区数组）、x,y（形状定位坐标）、rotation（旋转索引号）作为参数，返回布尔值。
首先默认可以移动；
利用两个嵌套Array.map()遍历形状数组内部的方块，如果方块的值为非0，就根据x和y的值来判断方块位于游戏主区的位置，即proposedX和proposedY；
因为形状的初始情况是位于游戏主区上方，不在主区内，所以存在proposedY小于0的情况，这个时候继续遍历就好；
根据propsedY可以推断出方块位于主游戏区的行数possibleRow，如果不存在possibleRow的话，则说明方块已经超越了主游戏区的底边，返回false；
用possibleRow[proposedX]来定位形状方块位于主游戏区该行的哪一个方块，如果值不为0或者为undefined的话，说明主游戏区上已经有其他形状的方块或者超越主游戏区左右边界，返回false。

消除条件

当主游戏区一整行填满形状方块就会消除，放在数组的框架下思考，就是检查一行是否全不为0。如果符合条件就删除一整行，然后在数组最开始重新添加一行：

//src/utils/index.js

const checkRows = (board) => {
	for (let row = 0; row < board.length; row++) {
	//检查是否一整行都不为'0'
		if (board[row].indexOf(0) === -1) {
		//如果是，删除这一行
				board.splice(row, 1); 
				//同时在数组最开始添加一行新的数组
				board.unshift(Array(10).fill(0));
			}
	}
}

状态管理

使用Redux Tool Kit

在这个应用中，我使用Redux Tool Kit（后文简称RTK）来实现状态管理。

RTK对比传统的Redux来说的优势在于：

更少的样板代码
RTK通过Immer库来实现不可变数据，提高应用程序的性能。

创建Slice

在RTK中，reducer和action集合到slice中，可以通过引用createSlice来实现：

//src/features/game/game-slice.js

import {createSlice} from '@reduxjs/toolkit'

const gameSlice = createSlice({
	name:'game',
	initialState: {...},
	reducer: {
		rotate:(state, action) =>{
			...
			},
		moveRight: (state, action) =>{
			...
			},
			...
		},
})

export const {rotate, moveRight} = gameSlice.actions
export default gameSlice.reducer;

注：在传统方式中若要修改不可变数据，需要手动复制原始数据，并在副本上进行修改，由于immer库的存在，在编写reducer的时候，可以直接修改state，详细代码可以查看github仓库。

创建store

//src/store.js

import { configureStore } from '@reduxjs/toolkit';
import gameReducer from './features/game/game-slice';

export const store = configureStore({ reducer: { game: gameReducer}})

将数据提供给应用

//src/index.js

import { Provider } from 'react-redux';
import { store } from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
	
		
			
		
	
);

使用数据

//src/features/game/components/Control.js

import { useSelector, useDispatch } from 'react-redux';
import { rotate } from '../game-slice';

export default function Controls() {
	const dispatch = useDispatch();
	const isRunning = useSelector((state) => state.game.isRunning);
    const gameOver = useSelector((state) => state.game.gameOver);

	const handleRotate = () => {
		if (!isRunning || gameOver) return;
		dispatch(rotate());
	};

	return (
		
		{/* rotation */}

下落动画的实现

Delta Time

Delta time（Δt）是一个计算两个时间点之间经过的时间差的量。在游戏开发中，delta time 指的是每一帧之间的时间间隔。

实现方块的下落动画，会运用到delta time。

这里我们需要计算两次调用requestAnimationFrame的时间差的值，如果累计差值比我们设定的游戏速度要大，就触发moveDownaction。

形状的下落实际上就是在一定时间间隔下更新画面（触发moveDown这个action），不就是定时器嘛！

使用`requestAnimationFrame`、`useRef`和`useEffect`实现定时器的原因

requestAnimationFrame

一般想到定时器会想到setInterval和setTimeout，但实际上使用requestAnimationFrame的性能更好。

这是因为requestAnimationFrame更符合屏幕的刷新率，通常屏幕的刷新率是60Hz，也就意味着浏览器每间隔16.7毫秒（1000毫秒/60）就会更新一次页面。requestAnimationFrame的回调函数会在浏览器准备好下一帧时调用，从而确保每一帧都能够在屏幕刷新之前完成绘制。

但setTimeout和setInterval的时间并不精准，可能会出现卡顿、延迟等性能问题。

useRef

React中的函数组件就像一个快照，每次渲染完成后值就会丢失。所以如果需要让函数“记住”值的话，就需要使用额外的钩子。

在俄罗斯方块游戏中，我们需要对形状下落的帧进行记录，这个值不受组件的生命周期影响，因此需要useRef。

useEffect

游戏中只需要在特定时间调用控制下落的函数，并且这个过程是Board.js组件的一个副作用，因此需要使用useEffect。

//src/utils/useTimer.js

import { useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';

export function useTimer(flagVal, benchmark, func) {
	const requestRef = useRef();
	const lastUpdateTimeRef = useRef(0);
	const progressTimeRef = useRef(0);
	
	const dispatch = useDispatch();

	const update = (time) => {
		requestRef.current = requestAnimationFrame(update);
		if (!flagVal) return;
		if (!lastUpdateTimeRef.current) {
			lastUpdateTimeRef.current = time;
		}
	
		const deltaTime = time - lastUpdateTimeRef.current;
		progressTimeRef.current += deltaTime;
	
		if (progressTimeRef.current > benchmark) {
		dispatch(func());
		progressTimeRef.current = 0;
		}
		lastUpdateTimeRef.current = time;
	};

	useEffect(() => {
		requestRef.current = requestAnimationFrame(update);
		return () => cancelAnimationFrame(requestRef.current);
	}, [flagVal]);
}

使用useRef创建了三个引用变量requestRef、lastUpdateTimeRef和progressTimeRef，用于存储定时器的状态和进度。
requestRef用于存储当前动画帧的引用， lastUpdateTimeRef用于存储上一次更新的时间戳，progressTimeRef用于存储已经过去的时间。
在update函数中实现定时器逻辑。
首先使用requestAnimationFrame来获取下一帧的引用，并存储到requestRef.current中，以实现流畅的动画效果；
然后通过flagVal的值，来决定是否退出函数；
接着如果没有lastUpdateTimeRef.current的值，就将当前的时间戳(time)存储到里面。
创建deltaTime，它的值为当前时间戳和lastUpdateTimeRef.current的时间差，将每次更新得到的deltaTime都添加到progressTimeRef.current中，记录累计过去的时间；
如果这个累计值大于我们设定的时间间隔benchmark，就执行传入的函数，执行完毕后，将累计时间清零；
最后将当前时间戳存储在lastUpdateTimeRef.current中，以便下一次调用时使用。
在使用这个定时器时，我们传入应用的状态属性isRunning作为flagVal来判断是否需要退出函数，speed作为benchmark来和累积值做对比，控制形状的下移动画的速度，moveDown作为func来实现方块下移的动作。

总结

本项目通过数组实现了基本的游戏静态画面，动画部分使用了requestAnimationFrame，游戏复杂的状态管理借助了更简洁的RTK。

如果你仔细观察项目代码，会发现我还使用了第三方库Redux Persist来存储最高分数。

如果你想要动手实验一下我在文章中提到的逻辑和状态管理，我准备了starter仓库，它包含了基础的框架和样式，你可以在此基础上搭建属于你的俄罗斯方块，当然你也可以在我的项目基础上添加新的内容，如不同的关卡（下落速度不同），将按键和键盘绑定等。

希望阅读这篇文章让你有所收获，祝你实验愉快！

代码仓库

浅析 React Hooks：论如何优雅地利用闭包

PapayaHUANG — Wed, 15 Feb 2023 01:19:00 +0000

前言

在通关 JS 的道路上你一定也遇到过两个难缠的大 BOSS：this的指向和闭包，而且不能逃课。

在使用 React 时，如果你习惯编写 class 组件，就绕不开this；如果你使用函数组件，就一定会用到 React Hooks，而 React Hooks 又大量使用闭包。（闭包真的无处不在呢！）

本文将用代码示例，仿写一个简化版的 useState Hook，浅析闭包在 React 中的应用。当然本文的代码示例不代表 React 源码的真实情况。

前置条件

想要彻底理解本文内容需要你：

对 JS 闭包有大概了解。不太了解也没关系，我会在本文回顾。
浏览过 React Hooks 文档，最好是使用过 React Hooks。

Let's get our hands dirty!

“闭包”是什么？

请允许我引用来自《你不知道的 JavaScript》对闭包的定义：

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

第一次读到这句话的时候，我深刻地体会到了什么叫“每一个字我都认识，但是我完全不知道它说了什么”的绝望。现在回看，其实《你不知道的 JavaScript》的章节设计得很好，想要真的理解闭包这个概念，推荐熟读前面词法作用域部分，了解了作用域，如何查找变量，闭包问题也就引刃而解了。

对于我个人来说，开悟的那一刻是当我把闭包的英文closure转换成动词词组close over来理解的那一刻。close就是打包了当前作用域，而over是超越了自己的作用域，在作用域之外也可以执行。

顺便提一句，很多概念直接通过英文来理解会容易很多，另一个例子是作用域的英文：scope。技术书能读英文原版就读原版，比方说《JavaScript 忍者秘籍》，很好的一本书，但是中文翻译了个啥？？？

废话就说这么多，请看一个经典的代码示例：

function addOne() {
  let num = 1;
  return function inner() {
    num = num + 1;
    return num;
  };
}

const outer = addOne();

console.log(outer()); // 2
console.log(outer()); // 3
console.log(outer()); // 4
console.log(outer()); // 5
num = 999; // 报错

让我们一起看看在上面的代码片段发生了什么？

当我们在调用outer函数的时候，实际调用的是addOne的内部的inner函数。
inner函数引用了其作用域之外的num的值。
inner函数在自己的作用域（即addOne函数）之外（即outer函数）中执行。
我们通过在addOne函数中返回inner函数（close），并在外部调用（over）实现了一个经典的闭包（closure）。

而通过打印到控制台的结果，发现实现了两个效果：

num为私有变量，尝试在全局修改变量的值会报错。私有变量也是闭包的常用场景之一。
反复调用outer函数可以实现数字的等差累加（+1），也就是说outer是一个有状态的函数（stateful function）。

闭包与有状态函数（stateful function）

有状态函数就是利用闭包，使得函数拥有内部状态，这样每一次调用函数会基于上一次的结果产生不一样的结果。（可以对比纯函数的概念理解）

看到这里你是不是想到了什么？React 不就是利用 React Hooks 对组件进行状态管理嘛？！

仿写 useState

编写 useState 函数

那让我们进入正题，从仿写useState开始。

根据useState的结构，可以得出如果编写一个useState函数的话，需要返回一个数组，包含一个值和一个相关的 setter 函数：

function myUseState(initValue) {
  let _value = initValue;
  const state = _value;
  const setState = (newValue) => {
    _value = newValue;
  };
  return [state, setState];
}

让我们看看上面的代码片段发生了什么：

useState函数返回了一个数组，这个数组包含两个变量：state和一个 setter 函数setState。
useState函数通过内部变量_value记住了我们传入的初始值，setState引用了这个值，并做修改。

在真实的 React 中，我们是通过React.useState来调用这个 hook，那我们需要调整一下上面这个函数的写法，将函数封装在 React 中。

我们先写个简单的练手，把前文的outer函数改写一下：

const outer = (function addOne() {
  let num = 1;
  return function inner() {
    num = num + 1;
    return num;
  };
})();

console.log(outer()); // 2
console.log(outer()); // 3
console.log(outer()); // 4
console.log(outer()); // 5

利用 IIFE 将代码封装后和之前的输出结果一致，同理就可以把myUseState函数改写为：

const MyReact = (function () {
  function myUseState(initValue) {
    let _value = initValue;
    const state = _value;
    const setState = (newValue) => {
      _value = newValue;
    };
    return [state, setState];
  }
  return { myUseState };
})();

让我们测试一下使用：

const [count, setCount] = MyReact.myUseState(1);

console.log(count); //1
setCount(count + 1);
console.log(count); //1

为什么setCount失效了？让我们来分析一下调用setCount(count + 1)的时候发生了什么：

setCount是在外部调用了setState函数（over）
setState可以访问和修改myUseState函数内部_value的值（close）
setState是一个闭包，并且当我们在调用setCount(count + 1)时，确实改变了_value的值
但count拿到的值是返回数组的第一项，并不持续追踪_value值的变化

让我们再回到闭包的概念：

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

很容易以为误闭包记住的是值，但实际上闭包 close（记住）的是作用域。那我们只需要把state也修改为_value的闭包，让 state 也记住它的作用域就可以了：

const MyReact = (function () {
  function myUseState(initValue) {
    let _value = initValue;
    const state = () => _value; //state 为 _value 的闭包
    const setState = (newValue) => {
      _value = newValue;
    };
    return [state, setState]; //外部可以调用 state
  }
  return { myUseState };
})();

对应打印到控制台的代码也要修改：

const [count, setCount] = MyReact.myUseState(1);

console.log(count()); //1
setCount(count() + 1);
console.log(count()); //2

编写函数组件

让我们继续：

在真实的 React Hook 的使用场景中，我们是在一个函数组件中调用 Hook，让我们边调整边完善：

function MyComponent() {
  const [count, setCount] = MyReact.myUseState(1);

  return {
    //此处应该为 JSX
  };
}

假设返回的 JSX 是一个可以展示count的值的标签，以及一个按钮，每次点击之后count的值加 1。

为了简化案例，我们把 JSX 改写为打印到控制台，这样 return 返回的对象就包含两个方法：

一个render方法，在控制台输出count的值；
一个click方法，模拟按钮，每次调用改变count的值。

function MyComponent() {
  const [count, setCount] = MyReact.myUseState(1);

  return {
    render: () => console.log(count),
    click: () => setCount(count + 1),
  };
}

这样我们就构建好了一个函数组件。

编写渲染方法

通常我们使用ReactDOM.render（要渲染的内容，在哪里渲染）将函数组件渲染到页面，那么我们的仿写还差一个渲染方法：

const MyReact = (function () {
  function myUseState(initValue) {
    ...
    return [state, setState];
  }

  function myRender(Component){
    const _c = Component();
    _c.render();//在控制台打印状态
    return _c;
  }

  return { myUseState, myRender };
})();

由于在编写函数组件的时候，我们返回的render方法是() => console.log(count)，直接在控制台打印状态，所以我们对myUseState要稍作修改：

const MyReact = (function () {
  let _val; //放在最外层
  function myUseState(initVal) {
    const state = _val || initVal;//不需要使用函数
    const setState = (newVal) => {
      _val = newVal;
    };
    return [state, setState];
  }
  ...
  return { myUseState, myRender };
})();

现在完整的代码为：

const MyReact = (function () {
  let _value; //在 MyReact 最外层声明变量
  function myUseState(initValue) {
    const state = _val || initVal; //不需要使用函数
    const setState = (newValue) => {
      _value = newValue;
    };
    return [state, setState];
  }
  function myRender(Component) {
    const _c = Component();
    _c.render(); //在控制台打印状态
    return _c;
  }
  return { myUseState, myRender };
})();

function MyComponent() {
  const [count, setCount] = MyReact.myUseState(1);

  return {
    render: () => console.log(count),
    click: () => setCount(count + 1),
  };
}

我们来查看一下调用效果：

var App = MyReact.myRender(MyComponent); //1
App.click();
var App = MyReact.myRender(MyComponent); //2

简要分析一下在这个代码片段里发生了什么：

MyReact.myRender方法对我们编写的组件MyReactComponent进行调用，直接将count的值打印到控制台，同时也暴露了click方法；
使用App.click调用暴露的方法，在非setCount的词法作用域调用setCount方法（over），修改了之前的_val值（close）；
当我们再次利用myRender方法获取count值时，count拿到的是修改后_val的值，就从1变成了2。

做得不错！

但往往我们在一个函数组件中使用不止一个useState：

function MyComponent() {
  const [count, setCount] = MyReact.myUseState(1);
  const [text, setText] = MyReact.myUseState('freeCodeCamp');

  return {
    render: () => console.log({ count, text }), //同时展现两个变量
    click: () => setCount(count + 1),
    type: (newText) => setText(newText), //假设有一个输入框
  };
}

打印控制台就会出现诡异的效果：

var App = MyReact.myRender(MyComponent); //{"count": 1, "text": 1}
App.click();
var App = MyReact.myRender(MyComponent); //{"count": 2, "text": 2}

这是因为我们只有_val这一个值来存储变量，这个时候我们就需要引入数组：

const MyReact = (function () {
  let hooks = [];
  let idx = 0;
  function myUseState(initVal) {
    const state = hooks[idx] || initVal;
    const _idx = idx; //记住这个值
    const setState = (newVal) => {
      hooks[_idx] = newVal; //调用 setState 修改的是创建 state 同索引所指向的值
    };
    idx++; //这样才能在 hook 数组中记录下一个值
    return [state, setState];
  }

  function myRender(Component) {
    idx = 0; //每一次渲染的时候，索引要回到 0
    const C = Component();
    C.render();
    return C;
  }
  return { myUseState, myRender };
})();

重新调用：

var App = MyReact.myRender(Component); //{"count": 1, "text": 'freeCodeCamp'}
App.click();
var App = MyReact.myRender(Component); //{"count": 2, "text": 'freeCodeCamp'}
App.setText('awesome!');
var App = MyReact.myRender(Component); //{"count": 2, "text": 'awesome!'}

这里要稍微解释一下为什么在myRender函数中，一定要将idx的值重新设置为0。

因为每一次调用MyReact.myRender都是独立的，如果不将索引设置为0的话，多次调用useState会将在上次索引上继续索引，这样上次索引的记录就不会被重写，每次渲染Component时就会返回同样的状态值和 setter 函数。

总结

探索闭包和 React Hooks 之间的关系是一段有趣的旅程。

你也可以尝试仿写其他 hook 方法。

希望这篇文章可以启发你，在以后的打怪之路上优雅地理解和利用闭包。

参考资料

Swyx - Deep dive: How do React hooks really work?
Rudi Yardley - React hooks: not magic, just arrays

如何在 React 中创建一个过滤组件

Miya Liu — Mon, 06 Feb 2023 00:19:00 +0000

原文： How to Make a Filter Component in React

过滤器组件在网站上很有用，因为它们可以帮助用户快速、轻松地找到他们需要的结果。

如果你的数据来自于 API，这一点尤其正确，因为用户无法查看你的应用程序所提供的所有内容。

在这篇文章中，我们将使用我们已经硬编码的假数据，并把它们像数组一样保存在一个名为 Data.js 的单独组件中。

我们将在这里讨论的内容：

介绍
创建我们的 React App
使用 Hooks 从 Data.js 获取数据
构建我们的 app 的 UI
创建过滤器组件
总结

介绍

对于这个特定的项目，我们将使用假的食物数据，其中包含几个键-值对，如该代码所示：

const Data = [
  {
    id: "1",
    title: "Poha",
    category: "Breakfast",
    price: "$1",
    img: "https://c.ndtvimg.com/2021-08/loudr2go_aloo-poha_625x300_05_August_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
    desc: " Poha. Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples",
  },
  {
    id: "2",
    title: "Upma",
    category: "Breakfast",
    price: "$1",
    img: "https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
    desc: " A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
  },
  {
    id: "3",
    title: "Cheela",
    category: "Breakfast",
    price: "$1",
    img: "https://c.ndtvimg.com/2019-05/1afu8vt8_weight-loss-friendly-breakfast-paneer-besan-chilla_625x300_25_May_19.jpg?im=FaceCrop,algorithm=dnn,width=620,height=350",
    desc: "A staple across Indian households, moong dal is widely used in a number of Indian delicacies. One such delicacy is moong dal cheela. You can also add paneer to this recipe to amp up the nutritional value and make it, even more, protein-dense",
  },
  {
    id: "4",
    title: "Channa Kulcha",
    category: "Lunch",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2015-04/chana-kulcha_625x350_41429707001.jpg",
    desc: "A classic dish that never goes out of style. The quintessential chana kulcha  needs only a few ingredients - cumin powder, ginger, coriander powder, carom powder, and some mango powder, which is what gives the chana its sour and tangy taste.",
  },
  {
    id: "5",
    title: "Egg Curry",
    category: "Lunch",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2017-11/goan-egg-curry_620x350_41511515276.jpg",
    desc: "Eggs are a versatile food that can be cooked for any meal of the day. From breakfast to dinner, it can be a go-to food. Here is a mildly-spiced egg curry made with garlic, onions, a whole lot of kasuri methi, fresh cream, yogurt, and fresh coriander.",
  },
  {
    id: "6",
    title: "Paneer Aachari",
    category: "Lunch",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2015-04/paneer_625x350_61429707960.jpg",
    desc: "Don't get intimidated by the list of ingredients because not only are already in your kitchen cabinet, but also because all they'll need is 20 minutes of your time. Chunks of cottage cheese cooked in some exciting spices, yogurt and a pinch of sugar.",
  },
  {
    id: "7",
    title: "Fish Fry",
    category: "Dinner",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2015-06/indian-dinner_625x350_41434360207.jpg",
    desc: "Get your daily dose of perfect protein. Pieces of surmai fish marinated in garlic, cumin, fennel, curry leaves, and tomatoes are pan-fried in refined oil and served hot. This fish fry recipe has a host of delectable spices used for marination giving it a unique touch.",
  },
  {
    id: "8",
    title: "Dum Alloo",
    category: "Dinner",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2015-06/indian-dinner_625x350_51434362664.jpg",
    desc: "Your family will thank you for this fantastic bowl of dum aloo cooked Lakhnawi style. Take some potatoes, crumbled paneer, kasuri methi, butter, onions, and some ghee.",
  },
  {
    id: "9",
    title: "Malai Kofta",
    category: "Dinner",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2017-10/makhmali-kofte_620x350_51508918483.jpg",
    desc: "A rich gravy made of khus khus, coconut and milk that tastes best with koftas made from khoya. This velvety and creamy recipe will leave you licking your fingers. Makhmali kofte can be your go-to dish for dinner parties as this is quite different from other kofta recipes and extremely delicious.",
  },
  {
    id: "10",
    title: "Malai Kofta",
    category: "Snaks",
    price: "$1",
    img: "https://i.ndtvimg.com/i/2017-10/makhmali-kofte_620x350_51508918483.jpg",
    desc: "A rich gravy made of khus khus, coconut and milk that tastes best with koftas made from khoya. This velvety and creamy recipe will leave you licking your fingers. Makhmali kofte can be your go-to dish for dinner parties as this is quite different from other kofta recipes and extremely delicious.",
  },
];
 
export default Data;

在这些键-值对中，我们也有一个类别，它将用于过滤结果。

我们将使用 bootstrap 作为这个项目的 CDN，用于设计我们的应用程序的样式。

在学习本教程之后，你应该知道更多关于如何在 React 中制作和导入组件，如何动态地使用数据，以及最重要的是如何在父子组件之间传递和使用 props。

如何创建我们的 React 组件

创建一个 React 应用程序非常简单——只需在任何一个你喜欢的 IDE 中进入你的工作目录，在终端输入以下命令：

npx create-react-app react-filter-app

如果你不确定如何正确设置 create-react-app 项目，你可以参考 create-react-app-dev 的官方指南。

设置完成后，在同一终端运行 npm start，启动将要托管我们的 React 应用的 localhost:3000。我们也可以在那里看到我们所有的变化。

如何使用 hooks 从 Data.js 获取数据

现在我们已经成功地设置了 React 项目，现在是时候从 Data.js 中获取我们的数据并在用户界面中使用它了。

为此，我们首先需要在 App.js 组件中导入数据，然后使用 useState hook 来管理数据的状态。

import React, { useState } from "react";
import Data from "./Data";
import Card from "./Card";
 
const App = () => {
  const [item, setItem] = useState(Data);
  return (
    <>
      
        
          Our Menu
           // UI Component
        
      
    
  );
};
 
export default App;

如何构建应用程序的用户界面

现在数据已经存储在一个变量中，我们可以在应用程序中自由使用变量。我们可以开始制作用户界面了。

UI 将包含 bootstrap 卡片，我们将使用 map 函数动态地制作这些卡片。

我们将为卡片制作一个不同的组件。正如你在上面的代码中所看到的，我们将其命名为 Card.js，并将其导入。我们还将 item 作为 props 传递，这样我们就可以在卡片组件中使用存储在 item 中的数据。

这个组件将包含我们所有的卡片和数据。我们将使用 map 函数在应用程序中动态地显示这些卡片和数据。

import React from "react";
 
const Card = ({ item }) => {            
           // destructuring props
  return (
    <>
      
        
          {item.map((Val) => {
            return (
              
                
                  
                
                
                  
                    {Val.title}     --  
                    {Val.price}
                  
                  {Val.desc}
                
              
            );
          })}
        
      
    
  );
};
 
export default Card;

我们的应用程序有 10 张卡片，看起来是这样的：

如何制作过滤器组件

我们有很多方法可以使用过滤组件来过滤掉用户从搜索结果中得到的数据。但在这里，我们将为此目的制作按钮，它将根据食物的类别过滤出数据——如早餐、午餐、晚餐和零食。

我们必须声明一个新的数组，它将只包含关键类别的值，并使用 map 方法显示它们。

// 扩展操作符将显示我们数据中的类别部分的所有值，而 Set 将只允许显示每种类型的单一值

  const menuItems = [...new Set(Data.map((Val) => Val.category))];

我们在这里使用 spread 运算符，这样我们通过显示上述数组得到的每个值都有相同的 UI，同时也是为了将所有 10 个类别显示为按钮。

我们使用 Set() 值，这样只有 3 或 4 个值会被显示出来，同时也确保没有重复的值。

我们将为这些按钮创建一个新的组件，它将通过 map 方法动态显示。但这次我们将使用我们新形成的数组，因为它将所有的类别存储在一个数组中，并且由于 Set()，将只显示一次。

import React from "react";
import Data from "./Data";
 
const Buttons = ({ setItem, menuItems }) => {
  return (
    <>
      
        {menuItems.map((Val, id) => {
          return (
            
          );
        })}
        
       
    
  );
};
 
export default Buttons;

把这个按钮组件放在你想显示按钮的地方。在我们的例子中，我们在 app.js 中的卡片组件上方显示了按钮。

是时候在这些按钮中添加一个过滤器了，这样用户就可以根据类别过滤出菜肴。

const filterItem = (curcat) => {
    const newItem = Data.filter((newVal) => {
      return newVal.category === curcat; 
        	// 比较类别显示数据
    });
    setItem(newItem);
  };

过滤器方法根据该对象的类别过滤出数据。

使用 onClick() 事件处理程序，我们可以将这个过滤器附加到按钮上：

import React from "react";
import Data from "./Data";
 
const Buttons = ({ filterItem, setItem, menuItems }) => {
  return (
    <>
      
        {menuItems.map((Val, id) => {
          return (
            
          );
        })}
         
       
    
  );
};
 
export default Buttons;

总结

我们有很多方法可以使用过滤器组件来减少用户在我们的应用程序中搜索理想结果所浪费的时间。

在这个应用程序中，我们使用的数组中只有 10 个对象，但很多时候我们从 API 获得数据，那里可能有大量数据。在这种情况下，只进行一次搜索往往不能给出准确的结果，所以我们使用过滤器。

你可以在 GitHub Repo 中看到全部代码。你可以通过应用程序的链接来检查这些过滤器按钮是如何运行的。

你也可以去看看我的其他项目：

更好的 React 性能——何时使用 useCallback 和 useMemo Hook

PapayaHUANG — Fri, 23 Dec 2022 06:38:00 +0000

原文： Better React Performance – When to Use the useCallback vs useMemo Hook

我们都希望构建强大的应用，避免不必要的渲染。有一些钩子可以帮助你实现这个愿望，但你可能不确定钩子的选择和使用时机。

我们将通过本文学习 useCallback 和 useMemo的区别，以及如何衡量在代码中使用它们的收益。

在我们开始之前，请注意以下用于优化 React 的方法实际上是不得已的选择。代码本身可能有许多改进空间，在改进代码前，本文性能提升技巧可能还派不上用场。

但了解这些工具，以及知道如何使用它们很有必要。

帮助你理解文章的资料

useCallback 和 useMemo 的 Beta 版本官方文档
示例项目源码
示例项目 Demo

与往常一样，我提供了一个示例项目，以便你在简化的环境中测试本文说明的所有内容。示例项目是对你将要学习要点的总结。

在开始比较这两个钩子之前，让我们回顾一些必要的背景概念。

什么是引用相等（Referential Equality）

当 React 对比 useEffect、 useCallback的依赖数组的值，或者传入子组件的 props 值时，使用的是 Object.is()。

详细介绍可以查看 Object.is，简言之：

原始值是相等的（上文链接有少数例外）。
非原始值指向内存中相同的对象。

译者注：原始值指的是数据类型为基本数据类型（如：number、string、boolean 等）时，两个值相等的数据在严格模式下（===）也是相等的。非原始值值的数据类型是引用类型（如：object），由于引用类型存储的是对象的引用，所以只有当两个对象引用相同的底层对象，它们在严格模式下才是相等的。这种比较方式被称为“引用相等”。

简化示例如下：

"string" === "string" // true
0 === 0 // true
true === true // true
{} === {} // false
[] === [] // false

const f = () => 'Hi'
const f1 = f
const f2 = f

f1 === f1 // true
f1 === f2 // true

React.memo 的运行机制

我将简单说明一下React.memo的运行机制（后文也会讲解）。你可以在合适的时候使用它来提升性能。

当想要避免子组件不必要的重新渲染（即便父组件发生了更改），你可以使用 React.memo 打包子组件 – 只要 props 不发生改变，就不会重复渲染。请注意此处是引用相等（译者注：沿用了旧版本 React 的“浅比较”）——子组件不会被重新渲染。

import { memo } from 'react';

const ChildComponent = (props) => {
  // ...
};

export default memo(ChildComponent);

现在你知道 React.memo 的运行机制，让我们开始应用吧。

useCallback 的运行机制

useCallback 是 React 用来优化代码的内置钩子之一。但正如你将看到的那样，它并不是直接为性能提升设计的钩子。

简单来说，useCallback 允许你在组件渲染之间保存 函数定义。

import { useCallback } from 'react';

const params = useCallback(() => {
  // ...
  return breed;
}, [breed]);

使用方法很简单：

从 React 引入useCallback，因为它是内置钩子。
打包你想要保存定义的函数。
像使用 useEffect一样，传入依赖数组，告诉 React 这些存储的值（在这里是函数定义）何时更新。

需要注意的是 函数定义 部分。它存储定义，而不是执行本身，也不是结果——所以每次调用时都会执行该函数。因此，不要使用这个钩子避免冗长的计算。

那么保存函数定义的好处在哪儿呢？

回到引用相等

如果使用的是函数本身，而不是返回值，那么在：

useEffect 等钩子的依赖数组
子组件的 prop、上下文等

要实现渲染之间真正的相等，useCallback就得保存内存中对同一个对象的的引用。

如果不使用这个钩子，每一次渲染函数都会重新指向内存中的另一个引用。即便使用React.memo打包子组件，React 也会认为是不同的函数。

你可以通过示例项目测试这个行为。在没有优化的版本中，每一次在输入框填写内容都会引发子组件的副作用。

在示例中，没有优化的版本只会导致一个虚拟的渲染放缓和重新抓取图片。但假设在一个大型的项目中，会导致客户端执行大量计算，或者服务器的巨大开销。

`useMemo` 是如何运作的

这是今天的第二个内置钩子。你可以把这个钩子当作直接优化的手段，因为它存储函数的结果，除非依赖数组发生变化，函数不会再次执行。

由于它可以存储函数的结果，防止在组件渲染之间重复执行，因此你可以在两种情况下使用此钩子。

引用相等

和 useCallback 一样，我们也可以通过 useMemo 来实现引用相等——但这次是结果的相等。

如果函数的返回值类型在渲染间会被当作不同的值对待，如对象或者数组，你可以使用 useMemo 来实现引用相等。

import { useMemo } from 'react';

const params = useMemo(() => {
  // ...
  return { breed };
}, [breed]);

从上面例子我们可以得出这样使用 useMemo：

由 React 引入 useMemo，因为它是内置钩子。
打包你想要保存结果的函数。
像使用 useEffect 一样，传入依赖数组，告诉 React 这些存储的值（在这里是函数的返回值）何时更新。

在示例中，函数返回一个对象。通过 Object.is 我们得知对象是不相等的，因为它们存储了不同的内存地址。但是useMemo可以保存相同的引用。

你可以像之前一样在示例项目中测试这个行为。在未优化版本中，每一次按下键盘，都会重新检索图片。使用 useMemo后，相等的返回值被保持，子组件不在重新检索图片。

昂贵的计算

由于使用 useMemo保存了值，避免函数重复执行，所以我们可以使用它避免不必要的昂贵计算，提高网站的性能。

让我们查看示例项目：

有一个组件，给定一个数字 n，就会打印出第 n 个斐波那契数。但是算法采用的递归版本性能很差。

你会发现有一个常量不断被重复渲染。示例中的性能标尺（Performance Gauge）会改变 state（每秒添加或者删除方块 60 次）。由于 state 一直发生改变，所以计算斐波那契数的函数也在重复执行，即便给定的数字是一样的。

在这种情况下，当你在非优化版本中使用更大的数字，就会发现性能肉眼可见的下降。优化版本只会在你更改滑块中的数字（更改给定数字）时出现性能峰值，但其余渲染将跳过计算并直接提供结果。

这里的问题是，在我们的日常工作中，不会遇到可以称为“昂贵计算”的计算，使用 useMemo 的决定不一定是“总是”或“从不”。

何时优化

到目前为止，你已经了解了通过一些指标确定何时使用不同的钩子来避免不必要的渲染和/或副作用。现在让我们定义一些通用规则来决定在那些不太清楚的情况下到底是否使用这些钩子：

回顾你的代码，重新思考代码构建。你会发现最能提升性能的其实是你代码本身。更多信息可以查看 Dan Abramov 的这篇博文。
如果不能证明优化可以带来好处，就不要优化——优化也有成本。
如果你不希望做额外的工作来证明优化可以带来好处，那请诚实对待自己的内心：其实你也不想优化。

如何衡量性能影响/收益

最重要的优化规则（总是在检查代码之后再使用）是能够衡量更改是否生效以及增益百分比是多少。你这样做不仅是为了可以在下一次绩效评估提高相应的百分比。

当你怀疑存在性能问题或只是想检查代码可以改进部分时，有以下两种选择：

笨拙的方法

我把这个方法也纳入到文章中来，是因为让我们面对现实吧：你一直在到处使用 console.log 调试代码，不是吗？别担心，我和你一样。

尝试衡量性能问题的一种快速方法是找出执行某个动作需要多长时间以及该动作执行了多少次。因此，可以这么做：

const t0 = performance.now();
expensiveCalculation(targetNumber);
const t1 = performance.now();
console.log(`Call to expensiveCalculation took ${t1 - t0} milliseconds.`);
console.count('Expensive Calculation');

但这种方法只能检测出一些你已经怀疑的非常明显的情况。

同时请小心 StrictMode，出于稳定性考虑，它可能会导致 console.count 重复渲染。

现在让我们查看正确的方法。

专业的方法

在这个方法中，你将使用官方的 React 开发者工具来检查代码片段的性能。一旦你在浏览器添加了这个扩展程序，你就可以打开浏览器，搜索 Profiler。

我将通过示例项目演示，你也可以在你自己的项目中测试。

当你点击 record 按钮，然后开始进行你认为需要关注性能的一些行为，profiler 就会保存并且打印出这个过程具体发生的细节和解释。

如在昂贵计算项目中，我们对比的没有优化和 useMemo 版本的结果：

在两个版本中，我分别点击 record 按钮，等待几秒钟，再次点击 record 按钮获取结果。如你所见，在我们准备的极端案例中，可以见到巨大的性能提升。

让我们仔细观察 profiler 中发生了什么：

灰色条目是在渲染间没有发生变化的组件，所以不用担心性能方面的问题。
绿色和黄色条目是发生变化的组件，你可以看到渲染需要多长时间。
如果你点击每一个条目，可以看到更多的解释信息和数据。

我之后会出一篇文章详细介绍 profiler，但是现在让我们看几个使用小技巧：

在 settings 图标 General 菜单下，勾选 Highlight updates when components render.。这将显示渲染的内容，并可以检测在某些操作下不被渲染的子组件。
在 settings 图标 Profiler 菜单下，勾选 Record why each component rendered while profiling. 这将对正在渲染的组件内容的添加简要说明，或许能帮助你找到哪里需要提升。

总结

如你所见，这两个常被误解的钩子是完全不同的函数，使用的场景也不太相同。现在你可以检查你现在或者过去的项目，来看看是否误用了这些钩子。

在未来 React 或许能够自动完成优化。但在撰写本文时，优化仍是一个应该谨慎对待并经过全面分析的过程。

我希望你觉得这篇教程有用，能帮助你使用 React 构建性能更好的应用程序。谢谢你阅读本文！

React 中的关注点分离——如何使用容器组件和展示组件

PapayaHUANG — Tue, 13 Dec 2022 04:19:00 +0000

原文： Separation of Concerns in React –How to Use Container and Presentational Components

许多 React 新手会将逻辑和展示代码放在同一个 React 组件中，不知道将两者分离的重要性，对于他们来说，最重要的是代码能运行。

但之后当他们需要对文件进行改动，就面临一项艰巨的任务。这个时候他们就得重新考虑将两者分离的问题。

产生问题的原因是他们不了解关注点分离的概念、展示组件和容器组件模型。所以我将在这篇文章讲解这方面内容，帮助你在项目开发早期缓解这个问题。

本文将深入探讨容器和展示组件，稍微讲解一下关注点分离。

话不多说，让我们开始吧！

什么是关注点分离

关注点分离是一个在编程中广泛使用的概念。它指的是执行不同操作的逻辑不应被分组或结合在一起。

例如接下来的代码示例就违反了关注点分离。我们把获取数据和展示数据放在了同一个组件中。

若要解决这个问题，并且遵循关注点分离，我们应该将两块（即：获取数据和在 UI 上展示）逻辑分开放置在不同的组件。

此时就需要容器组件和展示组件模式。在下文将做详细讲解。

什么是容器组件和展示组件

为了实现关注点分离我们需要两种类型的组件：

容器组件
展示组件

容器组件

是提供、创建和持有数据并服务于子组件的组件。

容器组件的唯一工作是处理数据。它不包含自己的任何 UI。相反，展示组件作为使用这些数据的子组件。

一个简单的示例就是 FetchUserContainer 组件，包含获取所有用户的逻辑。

展示组件

主要职责是在 UI 上呈现数据。从容器组件中获取数据。

这些组件是无状态的，除非它们需要状态来呈现 UI。它们不会更改收到的数据。

一个简单的示例就是 UserList组件，展示所有用户。

为什么需要这两种组件

我们可以通过一个示例来理解，假设我们需要展示一份从 JSON placeholder API 获取的帖子列表。代码如下：

import { useEffect, useState } from 'react';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

/**
 * 我们不应该把逻辑和数据展示结合的例子
 */
export default function DisplayPosts() {
  const [posts, setPosts] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();

  // 逻辑
  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await resp.json();
        setPosts(data);
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

  //展示
  return isLoading ? (
    Loading... 
  ) : posts ? (
    
      {posts.map((post: Post) => (
        
          {post.title}
        
      ))}
    
  ) : (
    {JSON.stringify(error)}
  );
}

这个组件做了这些事：

它包含三个变量： posts, isLoading 和 error。
使用 useEffect 来处理业务逻辑。从 API 获取数据： [https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)，获取方法采用的是 fetch API。
确保数据获取完毕后，使用 setPosts存储到 posts状态。
确保在不同的场景变换 isLoading 和 error 的值。
将这个逻辑放置在一个异步的 IIFE（立即调用函数）。
最后，我们以无序列表的形式返回帖子并映射我们获取的所有帖子。

上面的问题是获取数据和显示数据的逻辑被编码到一个组件中。可以说组件现在与逻辑高耦合。这正是我们不想要的。

以下是我们需要容器和展示组件的原因：

创建低耦合的组件
保持关注点分离
代码更易重构
代码更有组织性和可维护性
更易测试

展示组件和容器组件示例

好了，讲解部分就到这里——让我们从一个简单的例子开始吧。我们将使用与上面相同的示例——从 JSON placeholder API 获取数据。

先理解文件结构：

容器组件为 PostContainer
有两个展示组件：
- Posts：展示无序列表
- SinglePost：呈现单个列表标签的组件。即呈现列表的每个元素。

注意：我们将把上述所有组件存储在一个名为 components 的单独文件夹中。

了解文件结构后，让我们从容器组件开始：PostContainer。将下面代码复制到 components/PostContainer.tsx 文件。

import { useEffect, useState } from 'react';
import { ISinglePost } from '../Definitions';
import Posts from './Posts';

export default function PostContainer() {
  const [posts, setPosts] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();

  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await resp.json();
        setPosts(data.filter((post: ISinglePost) => post.userId === 1));
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

  return isLoading ? (
    Loading... 
  ) : posts ? (
    
  ) : (
    {JSON.stringify(error)}
  );
}

从本文上一节我们看到的例子来看，上面的代码只是包含了获取数据的逻辑。此逻辑存在于 useEffect 中。容器组件将数据传递给 Posts 展示组件。

让我们看一看 Posts 展示组件。将下面代码复制粘贴到 components/Posts.tsx 文件：

/**
 * 展示组件
 */

import { ISinglePost } from '../Definitions';
import SinglePost from './SinglePost';

export default function Posts(props: { posts: ISinglePost[] }) {
  return (
    
      {props.posts.map((post: ISinglePost) => (
        
      ))}
    
  );
}

如你所见，这是一个简单的文件，包含一个 ul 标签——一个无序列表。该组件映射作为 props 传递的posts。然后传递给 SinglePost 组件。

还有另一个呈现列表标签的展示组件，即 li 标签。它显示帖子的标题和正文。将以下代码复制粘贴到 components/SinglePost.tsx 文件中：

import { ISinglePost } from '../Definitions';

export default function SinglePost(props: ISinglePost) {
  const { userId, id, title, body } = props;
  return (
    
      
        {title}
      
      {body}
    
  );
}

正如你所见，这些展示组件只是在屏幕上显示数据。就这样。其他什么都不做。由于它们用于显示数据，因此会有自己的样式。

我们已经设置好组件，让我们回顾一下做了些什么：

在例子中没有违反关注点分离的概念。
为每个组件编写单元测试变得更加容易。
代码的可维护性和可读性要好得多。因此，我们的代码库变得更有条理。

我们实现了我们想要的，但是我们利用钩子进一步增强这个模式。

如何通过 React 钩子取代容器组件

自 React 16.8.0 以来，借助函数组件和钩子构建和开发组件变得更加容易。

我们将利用这一能力，用钩子替换容器组件。

将以下代码复制粘贴到 hooks/usePosts.ts 文件中：

import { useEffect, useState } from 'react';
import { ISinglePost } from '../Definitions';

export default function usePosts() {
  const [posts, setPosts] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();

  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await resp.json();
        setPosts(data.filter((post: ISinglePost) => post.userId === 1));
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

  return {
    isLoading,
    posts,
    error
  };
}

在这里：

将 PostContainer 组件的逻辑提取到钩子中。
此钩子将返回一个包含 isLoading、posts 和error的对象。

现在我们可以简单地移除容器组件 PostContainer。然后，我们可以直接在 Posts 展示组件中使用这个钩子，而不是将容器的数据作为 prop 传递给展示组件。

对Post组件进行以下编辑：

/**
 * 展示组件
 */

import { ISinglePost } from '../Definitions';
import usePosts from '../hooks/usePosts';
import SinglePost from './SinglePost';

export default function Posts(props: { posts: ISinglePost[] }) {
  const { isLoading, posts, error } = usePosts();

  return (
    
      {isLoading ? (
        Loading...
      ) : posts ? (
        posts.map((post: ISinglePost) => )
      ) : (
        {JSON.stringify(error)}
      )}
    
  );
}

通过使用钩子，我们消除了存在于这些展示组件之上的额外组件层。

使用钩子，我们获得了与容器/展示组件模式相同的结果。

总结

通过这篇文章，我们学习了：

关注点分离
容器和展示组件
为什么需要这两种组件
钩子如何取代容器组件

如果想要了解更多，我强烈推荐你阅读 react-table:。这个库使用了大量的钩子都是很好的示例。

你可以在 codesandbox 找到本文的完整代码。

感谢阅读！

可以在 Twitter、GitHub和 LinkedIn 上关注我。

如何使用 React 和 Dall-E 2 API 生成图像——React 和 OpenAI API 教程

Keren Ma — Thu, 08 Dec 2022 04:10:00 +0000

原文： How to Generate Images using React and the Dall-E 2 API – React and OpenAI API Tutorial

嘿，大家好！OpenAI 刚刚发布了它的 DALL-E API，用户可以通过键入查询生成自定义图像。

在本教程中，你将学习如何集成 OpenAI DALL-E 2 API 与 React app。

但首先，Dell-E 是如何工作的呢

正如你已经知道的，你必须输入一个查询——就像 熊拿着画笔在星空里，文森特·梵高画。这里面有很多关键词，比如“画笔”、“星空”和“文森特·梵高”。

Dall-E 要做的是搜索这些与我上面提到的关键字相关的图像。然后它将使用人工智能将所有的图像合并为一个，然后提供给我们。

现在让我们学习如何将其集成到 React 应用程序中，以创建具有这些很棒的特性的应用程序。

如何创建 React 应用程序

现在，创建一个 React 应用程序。你可以使用 CRA（create-react-app）命令创建它，也可以使用 Vite。

我们需要一个文本字段和一个按钮作为 UI 组件。文本字段将用于从用户获取查询，而按钮将用于触发 API 请求。让我们同时创建一个状态来存储查询和一个函数，该函数将在单击按钮时运行。

import { useState } from "react";
import "./App.css";

function App() {
  const [prompt, setPrompt] = useState("");

  const generateImage = async () => {};

  return (
    
      <>
        Generate an Image using Open AI API

         setPrompt(e.target.value)}
          rows="10"
          cols="40"
        />
        <button onClick={generateImage}>Generate an Image</button>
      </>
    </div>
  );
}

export default App;
</code></pre>
<p>我们的输出将会像这样：</p>
<p></p>
<h3 id="dalle2apireact">如何将 DALL-E 2 API 集成到 React 应用程序</h3>
<p>让我们看看如何将 DALL-E 2 API 集成到我们的应用程序中。</p>
<p>首先，我们需要访问 <a href="https://beta.openai.com">OpenAI</a>网站。你需要注册以生成一个 API 密钥。你的账户里还会有 18 美元可以使用。</p>
<p>在注册时选择创建应用程序。</p>
<p>因此，在你创建了你的账户之后，转到 View API Keys 部分，在那里你可以创建你唯一的 API 密钥。查看下面的图片作为参考。</p>
<p></p>
<p>现在在 React App 中，创建一个 <strong>.env</strong> 文件。这是为了存储 API 密钥。</p>
<p></p>
<p>在这里添加 API 密钥。请注意，在 CRA 和 Vite React App 中，从 .env 文件中获取密钥的方法是不同的。所以请记住这一点。我使用的是 Vite，所以我们是这样做的：</p>
<pre><code>VITE_Open_AI_Key = "Your API Key"
</code></pre>
<p>现在已经添加了 API 密钥，我们需要在 App.js 或 App.jsx 文件中导入一些东西，包括来自 openai SDK 的 Configuration 和 OpenAIApi。但是，我们首先需要在 React App 安装 <strong>openai SDK</strong>。</p>
<p>只需输入下面的指令安装：</p>
<pre><code>npm install openai
</code></pre>
<p>安装可能需要一些时间。然后，像这样导入我们之前提到的两个东西：</p>
<pre><code>import { Configuration, OpenAIApi } from "openai";
</code></pre>
<p>我们需要创建一个配置变量，它将从 .env 文件中获取 API 密钥。</p>
<pre><code>const configuration = new Configuration({
	apiKey: import.meta.env.VITE_Open_AI_Key,
});
</code></pre>
<p>现在，我们需要将这个配置实例传递给 OpenAIApi，并为 OpenAIApi 创建一个新实例。</p>
<pre><code>const openai = new OpenAIApi(configuration);
</code></pre>
<p>以下是到目前为止的全部代码：</p>
<pre><code>import { Configuration, OpenAIApi } from "openai";

import { useState } from "react";
import "./App.css";

function App() {
  const [prompt, setPrompt] = useState("");
  const configuration = new Configuration({
    apiKey: import.meta.env.VITE_Open_AI_Key,
  });

  const openai = new OpenAIApi(configuration);
  

  return (
    <div className="app-main">
      <>
        <h2>Generate an Image using Open AI API</h2>

        <textarea
          className="app-input"
          placeholder="Search Bears with Paint Brushes the Starry Night, painted by Vincent Van Gogh.."
          onChange={(e) => setPrompt(e.target.value)}
          rows="10"
          cols="40"
        />
        <button onClick={generateImage}>Generate an Image</button>
      </>
    </div>
  );
}

export default App;
</code></pre>
<p>现在，在 <strong>generateImage</strong> 函数中，我们需要调用之前创建的 OpenAIApi 实例。记住，功能需求是异步的。</p>
<pre><code>const generateImage = async () => {
    await openai.createImage({
      prompt: prompt,
      n: 1,
      size: "512x512",
    });
  };
</code></pre>
<p>如你所见，我们使用的是 <strong>openai.createImage</strong>。这个 API 用于使用用户查询创建图像。它还需要<strong>数量 n</strong>，这是我们希望 API 返回的图像的数量，以及<strong>图像的尺寸 size</strong>。</p>
<p>有三种不同的图像尺寸，不同的价格，如下表所示。如果你使用的是 1024x1024 大小，每张图像将花费 0.020 美元。</p>
<p></p>
<p>现在这个 <strong>openai.createImage</strong> 返回一些可以存储在变量中的 response 接口。然后，我们可以从 response 变量获得生成的图像链接。</p>
<pre><code>const generateImage = async () => {
    const res = await openai.createImage({
      prompt: prompt,
      n: 1,
      size: "512x512",
    });

    console.log(res.data.data[0].url);
  };
</code></pre>
<p>但我们还是别这么做了。让我们再创建一个状态来存储这个图像链接，这样我们就可以在 UI 本身中查看图像。</p>
<pre><code>const [result, setResult] = useState("");

const generateImage = async () => {
    const res = await openai.createImage({
      prompt: prompt,
      n: 1,
      size: "512x512",
    });

    setResult(res.data.data[0].url);
  };
</code></pre>
<p>现在，图像链接将存储在 <strong>result</strong> 状态中。让我们在 UI 中渲染图像。但是由于结果最初是空的，我们可以创建一个查验。我们将只看到在状态中有链接的图像标记。</p>
<pre><code>{result.length > 0 ? (
          
        ) : (
          <></>
        )}
</code></pre>
<p>And here's the styling too:</p>
<pre><code>.result-image {
  margin-top: 20px;
  width: 350px;
}
</code></pre>
<p>UI 现在看起来像这样：</p>
<p></p>
<p>让我们输入一些东西并查看输出：</p>
<p></p>
<p>在上面的例子中，我输入了<strong>一匹在红色沙滩里的马</strong>，这是结果。</p>
<p>让我们尝试一些更复杂的东西，比如<strong>熊拿着画笔在星空里，文森特·梵高画</strong></p>
<p>结果如下：</p>
<p></p>
<p>以上就是你如何创建这个应用。你可以键入任何输入查询，它将通过人工智能生成该图像。</p>
<h2 id="">总结</h2>
<p>这就是所有的内容。现在你知道了如何使用 DALL-E 2 API 创建自己的 React 应用程序，以使用 AI 生成图像。你可以添加更多的功能，所以不妨尝试一下。</p>
<p>如果你想看视频版本，请点击我的视频<a href="https://youtu.be/oacBV4tnuYQ">使用 React 和 Dall-E API 生成图像——React 和 OpenAI API 教程</a> 在我的 YouTube 频道 <a href="https://www.youtube.com/c/CybernaticoByNishant">Cybernatico</a>。</p>
<p>查看代码 <a href="https://github.com/nishant-666/Dall-E-API-with-React">GitHub</a> 以供参考。</p>
<blockquote>
<p>学习快乐~</p>
</blockquote>
<!--kg-card-end: markdown--> 
</article>
<article>
<h1> 通过代码示例详解 React State </h1>
<p>Keren Ma — Mon, 05 Dec 2022 04:29:00 +0000</p>
 <p data-test-label="translation-intro">
        <strong>原文：</strong> <a href="https://www.freecodecamp.org/news/what-is-state-in-react-explained-with-examples/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How State Works in React – Explained with Code Examples</a>
      </p><!--kg-card-begin: markdown--><p>state是React中最复杂的东西，初学者和有经验的开发人员都很难理解。因此，在本文中，我们将探索React中state的所有基础知识。</p>
<p>在理解state之前，让我们先了解一些基础知识，以便稍后更容易理解它。</p>
<h2 id="react">如何用React在用户界面渲染数据</h2>
<p>在屏幕上渲染任何东西，我们要使用<code>ReactDOM.render</code> 方法。</p>
<p>它的语法如下：</p>
<pre><code class="language-plain">ReactDOM.render(element, container[, callback])
</code></pre>
<ul>
<li><code>element</code> 元素可以是任何HTML元素,JSX或返回JSX的组件</li>
<li><code>container</code> 容器是UI上我们想要在其中呈现数据的元素</li>
<li><code>callback</code> 回调是可选的函数，我们可以传递它，它在屏幕上渲染或重新渲染时被调用<br>
看看下面的代码：</li>
</ul>
<pre><code class="language-plain">import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

ReactDOM.render(<h1>Welcome to React!</h1>, rootElement);
</code></pre>
<p>这是一个<a href="https://codesandbox.io/s/focused-shockley-oh4tn?file=/src/index.js">代码示例</a>。</p>
<p>在这里，我们只是向屏幕渲染一个h1元素。</p>
<p>要渲染多个元素，可以这么写：</p>
<pre><code class="language-plain">import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

ReactDOM.render(
  <div>
    <h1>Welcome to React!</h1>
    <p>React is awesome.</p>
  </div>,
  rootElement
);
</code></pre>
<p>这是一个<a href="https://codesandbox.io/s/white-hooks-dgru0?file=/src/index.js">代码示例</a>。</p>
<p>如果内容变多，我们可以将JSX取出，放在一个变量中，这是渲染内容的首选方式，就像这样：</p>
<pre><code class="language-plain">import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

const content = (
  <div>
    <h1>Welcome to React!</h1>
    <p>React is awesome.</p>
  </div>
);

ReactDOM.render(content, rootElement);
</code></pre>
<p>这是一个<a href="https://codesandbox.io/s/trusting-night-5g825?file=/src/index.js">代码示例</a>。</p>
<p>在这里，我们还添加了一对额外的圆括号，以正确对齐JSX并使其成为单个JSX表达式。</p>
<p>如果你想详细了解JSX及其各种重要特性，请<a href="https://www.freecodecamp.org/news/jsx-in-react-introduction/">在这里查看我的文章</a>。</p>
<p>现在，让我们在屏幕上显示一个按钮和一些文本：</p>
<pre><code class="language-plain">import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

let counter = 0;

const handleClick = () => {
  counter++;
  console.log("counter", counter);
};

const content = (
  <div>
    <button onClick={handleClick}>Increment counter</button>
    <div>Counter value is {counter}</div>
  </div>
);

ReactDOM.render(content, rootElement);
</code></pre>
<p>这是一个<a href="https://codesandbox.io/s/quizzical-cohen-x55p8?file=/src/index.js">代码示例</a>。</p>
<p></p>
<p>正如你所看到的，当我们单击按钮时，计数器<code>counter</code> 的值会增加，就像您在控制台中看到的那样。但在UI上它没有更新。</p>
<p>这是因为我们在加载页面时，只使用 <code>ReactDOM.render</code>  方法一次，来渲染<code>counter</code> JSX的内容。我们不会再次调用它，所以即使<code>counter</code>的值在更新，它也不会显示在UI上。让我们来解决这个问题。</p>
<pre><code class="language-jsx">import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

let counter = 0;

const handleClick = () => {
  counter++;
  console.log("counter", counter);
  renderContent();
};

const renderContent = () => {
  const content = (
    <div>
      <button onClick={handleClick}>Increment counter</button>
      <div>Counter value is {counter}</div>
    </div>
  );

  ReactDOM.render(content, rootElement);
};

renderContent();
</code></pre>
<p>这是一个<a href="https://codesandbox.io/s/adoring-noether-8gsgu?file=/src/index.js">代码示例</a>。<br>
现在，我们在<code>renderContent</code> 函数内封装<code>content</code> JSX 和 <code>ReactDOM.render</code>方法。一旦它被定义好了，我们就调用函数在加载渲染用户界面上的内容。</p>
<p>注意，我们也在<code>renderContent</code> 函数内调用封装了<code>handleClick</code> 函数，所以每次我们点击按钮，<code>renderContent</code> 函数将被调用，界面内容也会更新。</p>
<p></p>
<p>正如你所看到的，它正按照预期工作，计数器<code>counter</code> 的值正正确地显示在UI上。</p>
<p>你可能认为在每次单击按钮时重新呈现整个DOM的成本很高——但事实并非如此。这是因为React使用了Virtual DOM算法来检查UI上发生了什么变化，并且只重新呈现发生了变化的元素。因此，整个DOM不会再次被重新渲染。</p>
<p></p>
<p>这是一个你可以自己尝试代码的<a href="https://8gsgu.csb.app/">效果预览</a>。</p>
<p>正如您在HTML结构中看到的，只有计数器 <code>counter</code>  的值被重新渲染，因为它是HTML结构中唯一显示的东西。这就是React如此之快的原因，虚拟DOM使React更加有用。</p>
<p>但是，每次我们想要更新UI时调用<code>renderContent</code> 函数仍然是不可行的。所以React添加了“state”的概念。</p>
<h2 id="reactstate">介绍React中的State</h2>
<p>状态允许我们管理应用程序中不断变化的数据。它被定义为一个对象，我们在其中定义键-值对，指定我们希望在应用程序中追踪的各种数据。</p>
<p>在React里，所有的代码在一个component组件里被定义。</p>
<p>在React中创建组件的方法主要有两种：</p>
<ul>
<li>类组件</li>
<li>函数组件</li>
</ul>
<blockquote>
<p>现在我们将从类组件开始。在本文后面，我们将看到一种创建函数组件的方法。<br>
你应该知道如何使用类组件以及函数组件，包括钩子。</p>
</blockquote>
<p>你不应该通过React钩子直接学习函数组件，而是应该首先理解类组件，这样才容易理解基础知识。</p>
<p>你可以通过使用ES6类关键字和扩展React提供的<code>Component</code>类来创建一个组件，如下所示：</p>
<pre><code class="language-jsx">import React from "react";
import ReactDOM from "react-dom";

class Counter extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.state.counter = this.state.counter + 1;

    console.log("counter", this.state.counter);
  }

  render() {
    const { counter } = this.state;

    return (
      <div>
        <button onClick={this.handleClick}>Increment counter</button>
        <div>Counter value is {counter}</div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter />, rootElement);
</code></pre>
<blockquote>
<p>注意组件的名称首字母要大写（<code>Counter</code>）。<br>
这是一个 <a href="https://codesandbox.io/s/nostalgic-burnell-57fhd?file=/src/index.js">代码示例</a>。</p>
</blockquote>
<p>看看这里我们在做什么。</p>
<ul>
<li>在构造函数内，首先通过传递props来调用 <code>super</code> 。</li>
<li>然后我们将状态定义为对象，将<code>counter</code> 定义为对象的属性。</li>
<li>我们还将<code>this</code>的环境绑定到<code>handleClick</code>函数因此在<code>handleClick</code>函数中我们得到了<code>this</code>的正确环境。</li>
<li>然后在<code>handleClick</code>函数中，我们更新<code>countor</code>并将其记录到控制台。</li>
<li>在<code>render</code>方法中，我们返回我们想要在UI上渲染的JSX。</li>
</ul>
<p></p>
<p>正如您在控制台中所看到的，<code>counter</code>正在正确地更新——但它没有在UI上更新。</p>
<p>这是因为我们直接将 <code>handleClick</code>  函数中的状态更新为：</p>
<pre><code class="language-js">this.state.counter = this.state.counter + 1
</code></pre>
<p>因此React不会重新渲染组件（<strong>直接更新状态也是一个不好的做法</strong>）。</p>
<blockquote>
<p>永远不要在React中直接更新/改变状态，因为这是一个糟糕的做法，它会导致应用程序出现问题。另外，如果你直接更改状态，那么在状态更改时不会重新渲染组件。</p>
</blockquote>
<h2 id="setstate">setState的语法</h2>
<p>为了改变状态，React为我们提供了一个setState函数，允许我们更新状态的值。</p>
<p><code>setState</code>函数的语法如下：</p>
<pre><code>setState(updater, [callback])
</code></pre>
<ul>
<li><code>updater</code> 被更新的可以是函数或对象。</li>
<li><code>callback</code>回调函数是一个可选函数，在状态成功更新后执行。</li>
</ul>
<blockquote>
<p>调用 <code>setState</code> 会自动重新渲染整个组件及其所有子组件。我们不需要像前面使用<code>renderContent</code> 函数那样手动重新渲染。</p>
</blockquote>
<h2 id="react">如何使用函数更新React中的状态</h2>
<p>让我们修改 <a href="https://codesandbox.io/s/nostalgic-burnell-57fhd?file=/src/index.js">上面的代码示例</a> 来使用 <code>setState</code> 函数更新状态。</p>
<p>这是更新的 <a href="https://codesandbox.io/s/withered-dust-p3emg?file=/src/index.js">代码示例</a>。</p>
<p>如果你检查更新后的 <code>handleClick</code> 函数，它看起来像这样：</p>
<pre><code class="language-js">handleClick() {
  this.setState((prevState) => {
    return {
      counter: prevState.counter + 1
    };
  });

  console.log("counter", this.state.counter);
}
</code></pre>
<p>在这里，我们将一个函数作为 <code>setState</code> 方法的第一个参数传递，并返回一个新的状态对象，其中<code>counter</code> 在 <code>counter</code>的上一个值的基础上增加1。</p>
<p>我们在上面的代码中使用箭头函数，但是使用普通函数也可以。</p>
<p></p>
<p>如果您注意到，我们正在正确地获得UI上 <code>counter</code> 的更新值。 但在控制台中,我们获取的是以前的 <code>counter</code> 值，尽管我们在调用 <code>this.setState</code> 之后添加了console.log。</p>
<blockquote>
<p>这是因为 <code>setState</code> 方法本质上是异步的。</p>
</blockquote>
<p>这意味着，尽管我们调用了<code>setState</code> 来一个个地增加 <code>counter</code> ，但它没有立刻生效。这是因为我们调用 <code>setState</code> 方法时，整个组件被重新渲染 – 因此React需要使用虚拟DOM算法检查需要更改的内容，然后执行各种检查以高效更新UI。</p>
<p>这是你可能没办法在调用 <code>setState</code>后，马上获得 <code>counter</code> 更新的原因。</p>
<blockquote>
<p>这在React中是非常重要的，因为你会在写代码时遇到调试困难的问题。请记住<code>setState</code> 在React里是异步的。</p>
</blockquote>
<p>如果您想在使用<code>setState</code> 后立即获得更新后的状态值， 你可以传递一个函数作为第二个参数，状态一更新就调用 <code>setState</code> 。</p>
<p>这是一个调整后的<a href="https://codesandbox.io/s/jolly-dawn-65wis?file=/src/index.js">代码示例</a>。</p>
<p></p>
<p>正如你所看到的，我们在控制台中和UI上同时获得了正确的 <code>counter</code> 值。</p>
<p>在上面的演示中，<code>handleClick</code>方法是这样的：</p>
<pre><code class="language-js">handleClick() {
  this.setState(
    (prevState) => {
      return {
        counter: prevState.counter + 1
      };
    },
    () => console.log("counter", this.state.counter)
  );
}
</code></pre>
<p>这里对于 <code>setState</code> 函数调用，我们传递了两个参数。第一个是返回新状态的函数，第二个是在状态更新后调用的回调函数。我们只是将更新的计数器值记录到回调函数中的控制台。</p>
<blockquote>
<p>尽管React提供了一个回调函数来立即获取更新后的状态值，但建议您只在快速测试或记录日志时使用它。</p>
</blockquote>
<p>相反，React建议你使用<code>componentDidUpdate</code>方法，这是一个React生命周期方法，看起来像这样：</p>
<pre><code class="language-js">componentDidUpdate(prevProps, prevState) {
  if (prevState.counter !== this.state.counter) {
    // do something
    console.log("counter", this.state.counter);
  }
}
</code></pre>
<p>这是一个 <a href="https://codesandbox.io/s/youthful-pine-txb1o?file=/src/index.js">代码示例</a>。</p>
<p>你可以在<a href="https://stackoverflow.com/questions/56501409/what-is-the-advantage-of-using-componentdidupdate-over-the-setstate-callback#answer-56502614">这里</a>找到更多关于为什么使用 <code>componentDidUpdate</code> 而不是回调 <code>setState</code>。</p>
<h2 id="">如何简化状态和方法声明</h2>
<p>如果你在上面的代码示例中看到构造函数代码，你会看到它看起来像这样：</p>
<pre><code class="language-js">constructor(props) {
  super(props);

  this.state = {
    counter: 0
  };

  this.handleClick = this.handleClick.bind(this);
}
</code></pre>
<p>要在 <code>handleClick</code> 事件处理程序中使用 <code>this</code> 关键字，我们必须像这样在构造函数中绑定它： <code>this:handleClick</code></p>
<pre><code class="language-js">this.handleClick = this.handleClick.bind(this);
</code></pre>
<p>此外，要声明状态，我们必须创建一个构造函数，在其中添加一个 <code>super</code> 调用，然后才能声明状态。<br>
这不仅繁琐，而且使代码变得不必要地复杂。</p>
<p>随着事件处理程序数量的增加，<code>.bind</code> 调用的数量也会增加。我们可以使用类属性语法来避免这样做。</p>
<p>这是一个更新的 <a href="https://codesandbox.io/s/sad-bassi-7fxnl?file=/src/index.js">代码示例</a> ，包含类属性语法。</p>
<p>在这里，我们像这样将状态直接移动到类内部：</p>
<pre><code class="language-js">state = {
   counter: 0
};
</code></pre>
<p>并且，<code>handlerClick</code> 事件处理器更改为箭头函数语法如下：</p>
<pre><code class="language-js">handleClick = () => {
  this.setState((prevState) => {
    return {
      counter: prevState.counter + 1
    };
  });
};
</code></pre>
<p>由于箭头函数没有自己的 <code>this</code> 上下文，所以它将使用上下文作为类，因此不需要使用 <code>.bind</code>  方法。</p>
<p>这使得代码更简单，更容易理解，因为我们不需要不停地绑定每个事件处理器。</p>
<blockquote>
<p><a href="https://github.com/facebook/create-react-app">create-react-app</a> 已经内置了对它的支持，现在就可以开始使用这个语法了。</p>
</blockquote>
<p>从现在开始，我们将使用这种语法，因为它是编写React组件的更流行和首选的方法。</p>
<p>如果您想了解更多关于类属性语法的知识，请查看 <a href="https://javascript.plainenglish.io/how-to-write-clean-and-easy-to-understand-react-code-using-class-properties-syntax-5b375b0618d3?source=friends_link&sk=c170992cab9025fddb7b34b8894ea993">我的文章</a>。</p>
<h2 id="es">如何使用ES简化语法</h2>
<p>如果你在上面的代码示例中查看 <code>setState</code> 方法的调用，它会像这样：</p>
<pre><code class="language-js">this.setState((prevState) => {
  return {
    counter: prevState.counter + 1
  };
});
</code></pre>
<p>这么多代码，只是为了从一个函数中返回一个对象，我们用了5行代码。</p>
<p>我们能如下简化成一行：</p>
<pre><code class="language-js">this.setState((prevState) => ({ counter: prevState.counter + 1 }));
</code></pre>
<p>这里，我们将对象包装在圆括号中，使其隐式返回。这是可行的，因为如果我们在箭头函数中只有一条语句，我们可以跳过return关键字和花括号，像这样：</p>
<pre><code class="language-js">const add = (a, b) => { 
 return a + b;
}

// the above code is the same as below code:

const add = (a, b) => a + b;
</code></pre>
<p>但是由于左花括号被认为是函数体的开始，我们需要将对象包装在圆括号内，以使其正常工作。</p>
<p>这是一个更新的<a href="https://codesandbox.io/s/zen-galois-pew17?file=/src/index.js">代码示例</a>。</p>
<h2 id="react">如何在React中使用对象作为状态更新器</h2>
<p>在上面的代码中，我们使用一个函数作为<code>setState</code> 的第一个参数，但我们也可以传递一个对象作为参数。</p>
<p>这是一个<a href="https://codesandbox.io/s/zealous-nobel-yvvmw?file=/src/index.js">代码示例</a>。</p>
<p></p>
<p>组件代码如下所示：</p>
<pre><code class="language-js">class User extends React.Component {
  state = {
    name: "Mike"
  };

  handleChange = (event) => {
    const value = event.target.value;
    this.setState({ name: value });
  };

  render() {
    const { name } = this.state;

    return (
      <div>
        <input
          type="text"
          onChange={this.handleChange}
          placeholder="Enter your name"
          value={name}
        />
        <div>Hello, {name}</div>
      </div>
    );
  }
}
</code></pre>
<p>在这里，我们添加了一个输入文本框，用户在其中输入自己的名字，当用户在文本框中输入时，它会显示在文本框的下方。</p>
<p>在状态中，我们初始化了name属性为 <code>Mike</code>  ，并在输入文本框中添加了一个 <code>onChange</code>  处理程序，如下所示：</p>
<pre><code class="language-js">state = {
  name: "Mike"
};

...

<input
  type="text"
  onChange={this.handleChange}
  placeholder="Enter your name"
  value={name}
/>
</code></pre>
<p>因此，当我们在文本框中键入任何内容时，我们通过向 <code>setState</code>  函数传递一个对象来更新输入值的状态。</p>
<pre><code class="language-js">handleChange = (event) => {
  const value = event.target.value;
  this.setState({ name: value });
}
</code></pre>
<blockquote>
<p>但是我们应该使用哪种形式的<code>setState</code>呢?我们必须决定是将一个对象还是一个函数作为第一个参数传递给<code>setState</code>函数。</p>
</blockquote>
<p>**答案是：**如果不需要 <code>prevState</code>  参数来查找下一个状态值，则传递一个对象。否则，将该函数作为第一个参数传递给 <code>setState</code>  。</p>
<p>但在传递对象作为参数时需要注意一个问题。</p>
<p>看看这个 <a href="https://codesandbox.io/s/eloquent-panini-u2ooe?file=/src/index.js">代码示例</a>.</p>
<p>在下面的代码中， <code>handleClick</code> 方法看起来像这样：</p>
<pre><code class="language-js">handleClick = () => {
  const { counter } = this.state;
  this.setState({
    counter: counter + 1
  });
}
</code></pre>
<p>我们取 <code>counter</code>  的当前值然后加1。它运行良好，如下图所示：</p>
<p></p>
<p>现在看看这个修改版本的 <a href="https://codesandbox.io/s/busy-johnson-oqvfn?file=/src/index.js">代码示例</a> 。</p>
<p>我们的 <code>handleClick</code> 方法现在看起来像这样：</p>
<pre><code class="language-js">handleClick = () => {
  this.setState({
    counter: 5
  });

  const { counter } = this.state;

  this.setState({
    counter: counter + 1
  });
}
</code></pre>
<p>在这里，我们首先将 <code>counter</code>  值设置为5，然后将其增加1。所以 <code>counter</code>  的预期值是6。我们来看看是不是这样。</p>
<p></p>
<p>正如您所看到的，当我们第一次单击按钮时，我们期望 <code>counter</code>  值变成5，但它变成了1，并且在随后的每一次单击它都增加1。</p>
<p>这是因为，正如我们前面所看到的， <code>setState</code>  方法本质上是异步的。当我们调用 <code>setState</code>  时， <code>counter</code>   的值不会立即变为5，因此在下一行我们得到的 <code>counter</code>   值为0，这是我们在开始时初始化的状态。</p>
<p>所以当我们再次调用 <code>setState</code>  将 <code>counter</code>   加1时，它变成1，并且它只继续加1。</p>
<p>要解决这个问题，我们需要使用 <code>setState</code>  的更新程序语法，其中传递一个函数作为第一个参数。</p>
<p>这是一个<a href="https://codesandbox.io/s/strange-silence-qhykz?file=/src/index.js">代码示例</a>。</p>
<p>在上面的示例中， <code>handleClick</code>  方法看起来是这样的：</p>
<pre><code class="language-js">handleClick = () => {
  this.setState({
    counter: 5
  });

  this.setState((prevState) => {
    return {
      counter: prevState.counter + 1
    };
  });

  this.setState((prevState) => {
    return {
      counter: prevState.counter + 1
    };
  });
}
</code></pre>
<p></p>
<p>如您所见，当我们第一次单击按钮时， <code>counter</code>  的值变为7。这和预期的一样，因为首先我们把它设为5，然后把它加2次1，所以它就变成了7。即使我们多次点击按钮，它仍然保持在7，因为每次点击我们都将它重置为5并增加两次。</p>
<p>这是因为在 <code>handleClick</code>  内部，我们调用 <code>setState</code>  将计数器值设置为5，方法是将一个对象作为 <code>setState</code>  函数的第一个参数传递给该函数。在那之后，我们调用了两个 <code>setState</code>  调用，其中我们使用函数作为第一个参数。</p>
<p>那么这是如何正确工作的呢?</p>
<p>当React遇到 <code>setState</code>  调用时，它将调度更新以更改状态，因为它是异步的。但是在完成状态更改之前，React会看到有另一个 <code>setState</code> 调用。</p>
<p>因此，React不会立即使用新的 <code>counter</code>  值重新呈现。相反，它合并所有的 <code>setState</code>  调用，并基于前面 <code>counter</code> 的值更新 <code>counter</code> ，因为我们已经使用了 <code>prevState``.counter</code> 去计算 <code>counter</code>。</p>
<p>一旦所有 <code>setState</code>  调用都成功完成，React才重新渲染组件。因此，即使有三个 <code>setState</code>  调用，React也只会重新渲染组件一次，这可以通过在 <code>render</code>  方法中添加console.log语句来确认。</p>
<blockquote>
<p>因此，需要记住的一点是，在使用对象作为 <code>setState</code>  调用的第一个参数时应该小心，因为它可能会导致不可预知的结果。使用函数作为第一个参数，可以根据前面的结果获得正确的结果。</p>
</blockquote>
<p>你可能不会像我们在上面的演示中所做的那样一遍又一遍地调用 <code>setState</code>，但你可以在另一个函数中调用它，如下所示：</p>
<pre><code class="language-js">state = {
 isLoggedIn: false
};

...

doSomethingElse = () => {
 const { isLoggedIn } = this.state;
 if(isLoggedIn) {
   // do something different 
 }
};

handleClick = () => {
  // some code
  this.setState({ isLoggedIn: true);
  doSomethingElse();
}
</code></pre>
<p>在上面的代码中，我们已经定义了一个 <code>isLoggedIn</code>  状态，并且我们有两个函数 <code>handleClick</code>  和 <code>doSomethingElse</code> 。在 <code>handleClick</code>  函数中，我们将 <code>isLoggedIn</code>  状态值更新为<code>true</code>，并立即在下一行调用 <code>doSomethingElse</code>  函数。</p>
<p>在 <code>doSomethingElse</code>  中你可能认为你会得到 <code>isLoggedIn</code>  状态为<code>true if</code>条件中的代码会被执行。但是它不会被执行，因为 <code>setState</code>  是异步的，状态可能不会立即更新。</p>
<p>这就是为什么React添加了 <code>componendDidUpdate</code>  这样的生命周期方法，以便在状态或props更新时做一些事情。</p>
<blockquote>
<p>请注意检查您是否在下一行或下一个函数中再次使用相同的 <code>state</code>  变量，做些事来避免这些结果。</p>
</blockquote>
<h2 id="reactsetstate">如何合并React中的setState调用</h2>
<p>看看 <a href="https://codesandbox.io/s/bold-cache-zcj4u?file=/src/index.js">这个代码示例</a>。</p>
<p>这里，我们在状态中声明了 <code>username</code> 和 <code>counter</code> 属性，如下所示：</p>
<pre><code class="language-js">state = {
  counter: 0,
  username: ""
};
</code></pre>
<p>还如下声明了 <code>handleOnClick</code> 和 <code>handleOnChange</code> 事件处理器：</p>
<pre><code class="language-js">handleOnClick = () => {
  this.setState((prevState) => ({
    counter: prevState.counter + 1
  }));
};

handleOnChange = (event) => {
  this.setState({
    username: event.target.value
  });
};
</code></pre>
<p>检查下面函数中 <code>setState</code> 的调用。 你能看到在 <code>handleOnClick</code> 方法里，我们只设置了<code>counter</code>  的状态，在 <code>handleOnChange</code> 方法里只设置了<code>username</code> 的状态。</p>
<p>所以我们不需要像这样同时设置两个状态变量的状态：</p>
<pre><code class="language-js">this.setState((prevState) => ({
    counter: prevState.counter + 1,
    username: "somevalue"
}));
</code></pre>
<p>我们只能更新我们想要更新的那个。React会自动合并其他状态属性，所以我们不需要自己手动合并它们。</p>
<p></p>
<p>正如您所看到的，我们成功地分别独立地更改了 <code>counter</code> 和 <code>username</code>。</p>
<h2 id="react">如何在React的函数组件中使用状态</h2>
<p>到目前为止，我们已经了解了如何在类组件中使用状态。现在让我们看看如何在函数组件中使用它。</p>
<p>函数组件与类组件类似，只是它们没有状态和生命周期方法。这就是为什么您可能听说过它们被称为无状态函数组件。</p>
<p>这些组件只接受props并返回一些JSX。</p>
<p>函数组件使代码更短，更容易理解和测试。</p>
<p>它们的执行速度也快一些，因为它们没有生命周期方法。在类组件中扩展的 <code>React.Component</code>  类 也没有为React带来的额外数据。</p>
<p>看看这个<a href="https://codesandbox.io/s/sleepy-pascal-8ugh3?file=/src/index.js">代码示例</a>。</p>
<p>在这里，我们从<a href="https://randomuser.me/">random user generator API</a>中加载一个包含20个随机用户的列表，当组件在 <code>componentDidMount</code>  方法中加载时，如下所示：</p>
<pre><code class="language-js">componentDidMount() {
  axios
    .get("https://randomuser.me/api/?page=0&results=20")
    .then((response) => this.setState({ users: response.data.results }))
    .catch((error) => console.log(error));
}
</code></pre>
<p>一旦我们获取了那些用户，我们会设置它为 <code>users</code>  状态，并在UI上显示它。</p>
<pre><code class="language-jsx">{users.map((user) => (
  <User key={user.login.uuid} name={user.name} email={user.email} />
))}
</code></pre>
<p>在这里，我们将需要显示的所有数据传递给 <code>User</code>  组件。</p>
<p><code>User</code>  组件像这样：</p>
<pre><code class="language-jsx">const User = (props) => {
  const { name, email } = props;
  const { first, last } = name;

  return (
    <div>
      <p>
        Name: {first} {last}
      </p>
      <p>Email: {email} </p>
      <hr />
    </div>
  );
};
</code></pre>
<p><strong>这个<code>User</code>  组件是一个函数组件。</strong></p>
<p>函数组件是以大写字母开头并返回JSX的函数。</p>
<p>无论组件是类组件还是函数组件，都要记住以像 <code>User</code>  这样的大写字母开头。这就是React在使用 <code><User /></code>等普通HTML元素时将其与普通HTML元素区别开来的原因。</p>
<p>如果我们使用 <code><user /></code> ，React将检查名称为user的HTML元素。因为没有这样的HTML元素，所以您不会得到想要的输出。</p>
<p>在上面的 <code>User</code> 函数组件中，我们将props传递给函数的props参数中的组件。</p>
<p>所以和在类组件中不用 <code>this.props</code> 一样，我们只使用 <code>props</code> 。</p>
<p>我们从不在函数组件中使用 <code>this</code> 关键字，因此避免了与此绑定相关的各种问题。</p>
<p>因此，函数组件优先于类组件。</p>
<p>一旦我们有了 <code>props</code> ，我们就会使用对象解构语法来获取其中的值并显示在UI上。</p>
<h2 id="reacthooks">如何在React Hooks中使用状态</h2>
<p>从版本16.8.0开始，React引入了钩子。它们完全改变了我们在React中编写代码的方式。使用React hook，我们可以在函数组件中使用状态和生命周期方法。</p>
<blockquote>
<p>React钩子是添加了状态和生命周期方法的函数组件。<br>
所以现在,类组件和函数组件之间没有什么区别。</p>
</blockquote>
<p>它们都可以有状态和生命周期方法。</p>
<p>但是，现在人们在写 React 组件时，React hook 更常用，因为它们使代码更短，更容易理解。</p>
<p>现在，你很少会发现使用类组件编写的 React 组件。</p>
<p>要使用React hook声明状态，我们需要使用 <code>useState</code>  钩子。</p>
<p><code>useState</code>  钩子接受一个参数，该参数是状态的初始值。</p>
<p>在类组件中，状态总是一个对象。但是在使用 <code>useState</code>   时，可以提供任何值作为初始值，如number, string, boolean, object, array, null等。</p>
<p><code>useState</code>  钩子返回一个数组，它的第一个值是当前状态的值。第二个值是我们将用于更新状态的函数，类似于 <code>setState</code>  方法。</p>
<p>让我们举一个使用状态的类组件的例子。我们将使用钩子将其转换为函数组件。</p>
<pre><code class="language-jsx">import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    counter: 0
  };

  handleOnClick = () => {
    this.setState(prevState => ({
      counter: prevState.counter + 1
    }));
  };

  render() {
    return (
      <div>
        <p>Counter value is: {this.state.counter} </p>
        <button onClick={this.handleOnClick}>Increment</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
</code></pre>
<p>这是使用类组件写的 <a href="https://codesandbox.io/s/delicate-thunder-xdpri?file=/src/index.js">代码示例</a> 。</p>
<p>让我们将上面的代码转换为使用钩子。</p>
<pre><code class="language-jsx">import React, { useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <div>
        <p>Counter value is: {counter} </p>
        <button onClick={() => setCounter(counter + 1)}>Increment</button>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
</code></pre>
<p>这是使用React钩子写的<a href="https://codesandbox.io/s/elegant-heyrovsky-3qco5?file=/src/index.js">代码示例</a>。</p>
<p>如您所见，使用React钩子使代码更简短，更容易理解。</p>
<p>让我们理解一下上面的代码：</p>
<ul>
<li>为了使用 <code>useState</code> 钩子，我们需要像第一行那样导入它。</li>
<li>在App组件内部，我们通过传递0作为初始值并使用解构语法来调用 <code>useState</code>  。我们将 <code>useState</code>  返回的数组值存储到 <code>counter</code>和 <code>setCounter</code>  变量中。</li>
<li>常用的约定是在用于更新状态的函数名前加上 <code>setCounter</code> 中的 <code>set</code>  关键字。</li>
<li>当单击递增按钮时，我们定义了一个内联函数，并通过传递更新的计数器值来调用 <code>setCounter</code>  函数。</li>
<li>注意，因为我们已经有了计数器的值，所以我们使用 <code>setCounter(counter + 1)</code> 来增加计数器的值。</li>
<li>由于内联on click处理程序中只有一条语句，所以不需要将代码移动到单独的函数中。不过，如果处理程序内部的代码变得复杂，您可以这样做。<br>
如果您想了解关于useState和其他React hook的更多细节(以及示例)，请查看我的React hook介绍文章。</li>
</ul>
<h3 id="thanksforreading">Thanks for reading!</h3>
<p>想要详细了解所有ES6+特性，包括let和const，promises、各种promise方法，数组和对象解构，箭头函数、async/await、导入和导出，以及更多？</p>
<p>请查阅我的《掌握现代JavaScript（<a href="https://modernjavascript.yogeshchavan.dev/">Mastering Modern JavaScript</a>）》一书。这本书涵盖了学习React的所有先决条件，并帮助您在JavaScript和React方面变得更好。</p>
<blockquote>
<p>在 <a href="https://www.freecodecamp.org/news/learn-modern-javascript/">这里</a> 查看这本书的免费预览内容。</p>
</blockquote>
<p>此外，您可以查看我的<strong>免费</strong><a href="https://yogeshchavan.podia.com/react-router-introduction">介绍React Router</a>课程，从零学习React Router。</p>
<p>想订阅 JavaScript, React, Node.js相关内容的日常更新？<a href="https://www.linkedin.com/in/yogesh-chavan97/">在领英关注我</a>。</p>
<p><a href="https://bit.ly/3w0DGum"></a></p>
<!--kg-card-end: markdown--> 
</article>
</main></body></html>

React - freeCodeCamp.org

React 19 的新功能

课程概览

Transition（复习 React 18）

React 编译器

表单 Actions

useActionState()

Actions 中的错误处理

useOptimistic()

useFormStatus

ref 作为 prop

use()

其他改进

课程目录

React 开发人员的 TypeScript 手册 —— 如何构建类型安全的 Todo 应用程序

我们将涵盖以下内容

先决条件

我们将要构建什么

如何开始

如何设置待办事项应用的组件

如何在React中创建一个简单的表单元素

TypeScript中的类型错误是什么以及如何修复它

TypeScript中的泛型是什么

如何在React中使用TypeScript处理表单提交

如何在React中自动聚焦输入字段

什么是`useRef`以及如何在TypeScript中使用它

如何用TypeScript创建类型安全的React组件

React中的`forwardRef`是什么

如何在表单提交时创建一个待办事项

什么是React上下文

如何在TypeScript中使用React上下文

TypeScript中的接口是什么

如何在React Context中使用TypeScript接口

如何创建一个自定义钩子来使用React Context

You have nothing to do!

如何为待办事项定义一个接口

You have nothing to do!

如何构建一个自定义的React组件来显示待办事项

You have nothing to do!

如何实现功能：编辑、删除和更新待办事项

结论

如何使用 Three.js 在 React.js 应用程序中实现一个 Blender 模型

🔐 以下是我们将涵盖的内容：

📝 先决条件：

目录

💭 Three.js 和 Blender 是什么？

🔧 如何使用 Three.js 设置 React.js

glTF Tools 扩展

在 React.js 中完成 Three.js 的设置

🔨 如何创建 Blender 模型

如何给模型添加动画

如何添加颜色

如何导出模型

如何将导出的模型可视化

✏️ 程序材质的纹理烘焙

如何创建文件纹理节点

如何应用智能 UV 投射流程

烘焙过程

如何看到最终结果

✒️ 如何在 React.js 应用程序中实现 Blender 模型

如何添加 Canvas 包装器和其他组件

如何实现动画

📄 其他信息

📋 总结

如何使用 TDD 和 React 测试库构建健壮的 React 应用程序

开始

通过 TDD 构建评论反馈

关于 react-testing-library 的一些说明

首次实现代码

添加评论表单

准备、执行、断言

点赞评论

不喜欢评论

总结

有用的链接

React.useEffect Hook 常见问题及解决方法

用例

useUser React hook

ESLint exhaustive-deps 规则

无限重新渲染问题

`useActionState()`

`useOptimistic()`

`useFormStatus`

`use()`