使用状态添加交互性
让我们探索 React 如何通过状态 (state) 和事件处理器 (event handlers) 帮助我们添加交互性。
以创建一个 "点赞" 按钮为例，首先在你的 HomePage 组件中添加一个按钮元素：
function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
return (
<div>
<Header title="Develop. Preview. Ship." />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button>Like</button>
</div>
);
}监听事件
要让按钮在点击时执行操作，可以使用 onClick 事件：
function HomePage() {
// ...
return (
<div>
{/* ... */}
<button onClick={}>Like</button>
</div>
);
}在 React 中，事件名采用驼峰式命名。onClick 是众多可用于响应用户交互的事件之一。例如，你可以对输入框使用 onChange，或对表单使用 onSubmit。
处理事件
你可以定义一个函数来 "处理" 触发的事件。在 return 语句前创建一个名为 handleClick() 的函数：
function HomePage() {
// ...
function handleClick() {
console.log("increment like count")
}
return (
<div>
{/* ... */}
<button onClick={}>Like</button>
</div>
)
}然后，在 onClick 事件触发时调用 handleClick 函数：
function HomePage() {
// ...
function handleClick() {
console.log('increment like count');
}
return (
<div>
{/* ... */}
<button onClick={handleClick}>Like</button>
</div>
);
}在浏览器中运行此代码，观察开发者工具中日志输出的增加情况。
状态与钩子
React 提供了一系列称为钩子 (hooks) 的函数。钩子允许你向组件添加额外逻辑，例如状态 (state)。你可以将状态视为 UI 中随时间变化的信息，通常由用户交互触发。
你可以使用状态来存储和增加用户点击 "点赞" 按钮的次数。实际上，用于管理状态的 React 钩子名为：useState()
将 useState() 添加到项目中。它返回一个数组，你可以使用数组解构在组件中访问和使用这些数组值：
function HomePage() {
// ...
const [] = React.useState();
// ...
}数组的第一项是状态 值，你可以任意命名。建议为其取一个描述性名称：
function HomePage() {
// ...
const [likes] = React.useState();
// ...
}数组的第二项是用于 更新 值的函数。你可以任意命名更新函数，但通常以 set 为前缀，后跟要更新的状态变量名：
function HomePage() {
// ...
const [likes, setLikes] = React.useState();
// ...
}你还可以为 likes 状态设置初始值 0：
function HomePage() {
// ...
const [likes, setLikes] = React.useState(0);
}然后，通过在组件中使用状态变量来检查初始状态是否正常工作：
function HomePage() {
// ...
const [likes, setLikes] = React.useState(0);
// ...
return (
// ...
<button onClick={handleClick}>Like({likes})</button>
);
}最后，你可以在 HomePage 组件中调用状态更新函数 setLikes，将其添加到之前定义的 handleClick() 函数中：
function HomePage() {
// ...
const [likes, setLikes] = React.useState(0);
function handleClick() {
setLikes(likes + 1);
}
return (
<div>
{/* ... */}
<button onClick={handleClick}>Likes ({likes})</button>
</div>
);
}现在点击按钮将调用 handleClick 函数，该函数会以当前点赞数加 1 作为参数调用 setLikes 状态更新函数。
注意：与作为第一个函数参数传递给组件的 props 不同，状态在组件内部初始化和存储。你可以将状态信息作为 props 传递给子组件，但更新状态的逻辑应保留在最初创建状态的组件中。
管理状态
这只是状态的入门介绍，关于在 React 应用中管理状态和数据流还有更多内容。要了解更多，我们建议你阅读 React 文档中的添加交互性和管理状态部分。
额外资源：