添加交互性
屏幕上的一些东西会根据用户输入进行更新。例如，点击图片库会切换活动图片。在 React 中，随着时间推移而发生变化的数据称为状态。你可以为任何组件添加状态，并在需要时更新它。在本章中，你将学习如何编写处理交互、更新其状态并在一段时间内显示不同输出的组件。
本章内容
响应事件
React 允许你在 JSX 中添加事件处理程序。事件处理程序是你自己的函数，它们将在响应用户交互（如点击、悬停、聚焦表单输入等）时触发。
内置组件（如 <button>）仅支持内置浏览器事件，如 onClick。但是，你也可以创建自己的组件，并为其事件处理程序 props 提供任何你喜欢的应用程序特定名称。
export default function App() { return ( <Toolbar onPlayMovie={() => alert('Playing!')} onUploadImage={() => alert('Uploading!')} /> ); } function Toolbar({ onPlayMovie, onUploadImage }) { return ( <div> <Button onClick={onPlayMovie}> Play Movie </Button> <Button onClick={onUploadImage}> Upload Image </Button> </div> ); } function Button({ onClick, children }) { return ( <button onClick={onClick}> {children} </button> ); }
状态：组件的内存
组件通常需要根据交互更改屏幕上的内容。在表单中键入内容应该更新输入字段，点击图片轮播中的“下一步”应该更改显示的图片，点击“购买”会将产品放入购物车。组件需要“记住”某些东西：当前输入值、当前图片、购物车。在 React 中，这种组件特定的内存被称为状态。
你可以使用 useState Hook 为组件添加状态。Hooks 是特殊函数，可以让你的组件使用 React 功能（状态是这些功能之一）。useState Hook 允许你声明一个状态变量。它接受初始状态并返回一对值：当前状态和一个状态设置函数，该函数允许你更新它。
const [index, setIndex] = useState(0);
const [showMore, setShowMore] = useState(false);以下是如何让图片库在点击时使用和更新状态
import { useState } from 'react'; import { sculptureList } from './data.js'; export default function Gallery() { const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); const hasNext = index < sculptureList.length - 1; function handleNextClick() { if (hasNext) { setIndex(index + 1); } else { setIndex(0); } } function handleMoreClick() { setShowMore(!showMore); } let sculpture = sculptureList[index]; return ( <> <button onClick={handleNextClick}> Next </button> <h2> <i>{sculpture.name} </i> by {sculpture.artist} </h2> <h3> ({index + 1} of {sculptureList.length}) </h3> <button onClick={handleMoreClick}> {showMore ? 'Hide' : 'Show'} details </button> {showMore && <p>{sculpture.description}</p>} <img src={sculpture.url} alt={sculpture.alt} /> </> ); }
渲染和提交
在你的组件显示在屏幕上之前，它们必须由 React 渲染。了解此过程中的步骤将有助于你了解代码的执行方式并解释其行为。
想象一下，你的组件是厨房里的厨师，用食材制作美味佳肴。在这种情况下，React 是将顾客的请求送入厨房并送来他们订单的服务员。这种请求和服务 UI 的过程分为三个步骤
- 触发渲染（将用餐者的订单送到厨房）
- 渲染组件（在厨房准备订单）
- 提交到 DOM（将订单放在桌子上）
触发 
渲染 
提交
状态作为快照
与普通的 JavaScript 变量不同，React 状态更像快照。设置它不会更改你已经拥有的状态变量，而是触发重新渲染。这起初可能会让人感到意外！
console.log(count); // 0
setCount(count + 1); // Request a re-render with 1
console.log(count); // Still 0!这种行为有助于你避免细微的错误。这是一个简短的聊天应用程序。试着猜猜如果你先按下“发送”，然后再将收件人改为 Bob 会发生什么。五秒钟后，alert 中会显示谁的名字？
import { useState } from 'react'; export default function Form() { const [to, setTo] = useState('Alice'); const [message, setMessage] = useState('Hello'); function handleSubmit(e) { e.preventDefault(); setTimeout(() => { alert(`You said ${message} to ${to}`); }, 5000); } return ( <form onSubmit={handleSubmit}> <label> To:{' '} <select value={to} onChange={e => setTo(e.target.value)}> <option value="Alice">Alice</option> <option value="Bob">Bob</option> </select> </label> <textarea placeholder="Message" value={message} onChange={e => setMessage(e.target.value)} /> <button type="submit">Send</button> </form> ); }
import { useState } from 'react'; export default function Counter() { const [score, setScore] = useState(0); function increment() { setScore(score + 1); } return ( <> <button onClick={() => increment()}>+1</button> <button onClick={() => { increment(); increment(); increment(); }}>+3</button> <h1>Score: {score}</h1> </> ) }
State as a Snapshot 解释了为什么会这样。设置状态请求重新渲染，但不会在正在运行的代码中改变状态。所以 score 在你调用 setScore(score + 1) 之后仍然是 0。
console.log(score); // 0
setScore(score + 1); // setScore(0 + 1);
console.log(score); // 0
setScore(score + 1); // setScore(0 + 1);
console.log(score); // 0
setScore(score + 1); // setScore(0 + 1);
console.log(score); // 0你可以通过在设置状态时传入一个更新函数来解决这个问题。注意，将 setScore(score + 1) 替换为 setScore(s => s + 1) 可以修复“+3”按钮。这样你就可以排队多个状态更新。
import { useState } from 'react'; export default function Counter() { const [score, setScore] = useState(0); function increment() { setScore(s => s + 1); } return ( <> <button onClick={() => increment()}>+1</button> <button onClick={() => { increment(); increment(); increment(); }}>+3</button> <h1>Score: {score}</h1> </> ) }
更新状态中的对象
状态可以保存任何类型的 JavaScript 值，包括对象。但你不应该直接修改 React 状态中保存的对象和数组。相反，当你想要更新对象和数组时，你需要创建一个新的对象（或复制现有对象），然后更新状态以使用该副本。
通常，你将使用 ... 展开语法来复制你想要更改的对象和数组。例如，更新嵌套对象可能看起来像这样
import { useState } from 'react'; export default function Form() { const [person, setPerson] = useState({ name: 'Niki de Saint Phalle', artwork: { title: 'Blue Nana', city: 'Hamburg', image: 'https://i.imgur.com/Sd1AgUOm.jpg', } }); function handleNameChange(e) { setPerson({ ...person, name: e.target.value }); } function handleTitleChange(e) { setPerson({ ...person, artwork: { ...person.artwork, title: e.target.value } }); } function handleCityChange(e) { setPerson({ ...person, artwork: { ...person.artwork, city: e.target.value } }); } function handleImageChange(e) { setPerson({ ...person, artwork: { ...person.artwork, image: e.target.value } }); } return ( <> <label> Name: <input value={person.name} onChange={handleNameChange} /> </label> <label> Title: <input value={person.artwork.title} onChange={handleTitleChange} /> </label> <label> City: <input value={person.artwork.city} onChange={handleCityChange} /> </label> <label> Image: <input value={person.artwork.image} onChange={handleImageChange} /> </label> <p> <i>{person.artwork.title}</i> {' by '} {person.name} <br /> (located in {person.artwork.city}) </p> <img src={person.artwork.image} alt={person.artwork.title} /> </> ); }
如果在代码中复制对象变得很麻烦，你可以使用像 Immer 这样的库来减少重复代码
{ "dependencies": { "immer": "1.7.3", "react": "latest", "react-dom": "latest", "react-scripts": "latest", "use-immer": "0.5.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "devDependencies": {} }
更新状态中的数组
数组是另一种可变的 JavaScript 对象，你可以在状态中存储它们，并应该将它们视为只读。就像对象一样，当你想要更新状态中存储的数组时，你需要创建一个新的数组（或复制现有数组），然后设置状态以使用新数组
import { useState } from 'react'; const initialList = [ { id: 0, title: 'Big Bellies', seen: false }, { id: 1, title: 'Lunar Landscape', seen: false }, { id: 2, title: 'Terracotta Army', seen: true }, ]; export default function BucketList() { const [list, setList] = useState( initialList ); function handleToggle(artworkId, nextSeen) { setList(list.map(artwork => { if (artwork.id === artworkId) { return { ...artwork, seen: nextSeen }; } else { return artwork; } })); } return ( <> <h1>Art Bucket List</h1> <h2>My list of art to see:</h2> <ItemList artworks={list} onToggle={handleToggle} /> </> ); } function ItemList({ artworks, onToggle }) { return ( <ul> {artworks.map(artwork => ( <li key={artwork.id}> <label> <input type="checkbox" checked={artwork.seen} onChange={e => { onToggle( artwork.id, e.target.checked ); }} /> {artwork.title} </label> </li> ))} </ul> ); }
如果在代码中复制数组变得很麻烦，你可以使用像 Immer 这样的库来减少重复代码
{ "dependencies": { "immer": "1.7.3", "react": "latest", "react-dom": "latest", "react-scripts": "latest", "use-immer": "0.5.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "devDependencies": {} }