教程：FullStackOpen/Part 1 - React 入门

App：Codepen/anecdote/fullstackopen2021: 1.12-1.14

1. Using the State Hook

通过 React 的 state hook 向应用的 App 组件中添加状态。

import React, { useState } from "react";

const App = () => {
	...
	const [selected, setSelected] = useState(0);
	...
};

函数调用将 state 添加到组件，并将其值用0进行初始化。 该函数返回一个包含两个元素的数组。 selected 变量被赋予的初始值 state 为零。 变量 setSelected 被分配给一个函数，该函数将用于修改 state。

2. Function That Returns A Function

事件处理程序（Event Handler）应该是一个函数或一个函数引用，不能是对函数的调用。

const App = () => {
	...
	const getAnecdote = () => setSelected(Math.floor(Math.random() * anecdotes.length));
	...
	return (
		...
		<Button onClick={getAnecdote} text="next anecdote" />
		...
	);
};

onClick 属性的值是一个包含函数引用的变量。

2. Do Not Mutate State Directly

React 中 state 不可直接修改。

直接修改会导致意想不到的副作用。 必须始终通过将状态设置为新对象来更改状态。 如果之前的状态没有变化，属性仅仅需要简单地复制，就是通过将这些属性复制到新的对象中，并将其设置为新状态。

3. Handling Arrays

基于 React 中 state 不可直接修改的原则，向状态数组中添加新元素应通过 concat 方法完成而非 push。concat 不改变现有数组，而是返回数组的新副本，并将元素添加到该数组中；push 将新元素添加到原数组中。

在 anecdote 中使用状态数组：

const App = () => {
	...
	const [votes, setVotes] = useState(Array(anecdotes.length).fill(0));
	const voteAnecdote = (selected) => () => {
		const copy = [...votes];
		copy[selected] += 1;
		setVotes([...copy]);
	};
			...
	return (
		...
		<Button onClick={voteAnecdote(selected)} text="vote" />
		...
	);
};