此外，不应该嵌套定义组件。因为子组件会在每次渲染时重新创建。

在下面的代码示例中，每次点击按钮时，子组件MyTextField的文本输入字段状态（text）会被重置。而父组件的状态（counter）将保持不变（示例007）。嵌套的函数将在每次父组件的渲染时重新创建。这将导致在相同的位置渲染不同的组件。React将重置子组件以下的所有状态。这可能会导致错误和性能问题。为了避免这种情况，请在组件函数中不要嵌套，并始终在顶层进行声明。

export default function MyComponent() {
	const [counter, setCounter] = useState(0);
	const MyTextField: FC = () => {
		const [text, setText] = useState('');
		return (
			<input
				value={text}
				onChange={({ target: { value } }) => setText(value)}
			/>
		);
	};
	return (
		<>
			<MyTextField />
			<button
				onClick={() => {
					setCounter(counter + 1);
				}}
			>
				Clicked {counter} times
			</button>
		</>
	);
}

样本007■React + TypeScript：保留和重置状态07

重新设置为相同位置的状态

React的默认行为是在组件保持在相同位置时保持其状态不变。这是默认的，因为在许多情况下这样更方便。但是当切换组件时，有时候我们希望明确地重置状态。例如，在两个玩家的计分器中分别显示他们的分数（状态）的情况下。

在下面的代码示例中，对于每个玩家（isPlayerA），切换子组件的计数器（Counter）不会影响子组件的状态。由于Counter组件的位置相同，React将其视为具有不同person属性的相同组件。

export default function App() {
	const [isPlayerA, setIsPlayerA] = useState(true);
	return (
		<div>
			{isPlayerA ? <Counter person="Taylor" /> : <Counter person="Sarah" />}
			<button
				onClick={() => {
					setIsPlayerA(!isPlayerA);
				}}
			>
				Next player!
			</button>
		</div>
	);
}

然而，在这个应用程序中，必须将这两个计数器视为独立的。即使组件在UI上放置的位置相同，计数器也是针对每个玩家单独的。

在切换时，有两种可能的方法可以重置状态。

1. 请在不同位置渲染组件。

为每个组件分配一个明确的标识键。

选项1：在不同的位置渲染组件

如果您想分别处理两个计数器，请将它们渲染到不同的位置上。在下面的代码中，根据状态变量isPlayerA的值，切换两个位置的组件（示例008）。

isPlayerAがtrue: ひとつめの位置にCounterの状態が含まれ、ふたつめは空です。

isPlayerAがfalse: ひとつめの位置はクリアされ、ふたつめにCounterが加わります。

当然，如果逻辑与（&&）的左边作为值返回false时，该JSX表达式将不会被渲染（请参见”条件渲染（Conditional Rendering）”）。

export default function App() {

	return (
		<div>
			{/* {isPlayerA ? <Counter person="Taylor" /> : <Counter person="Sarah" />} */}
			{isPlayerA && <Counter person="Taylor" />}
			{!isPlayerA && <Counter person="Sarah" />}

		</div>
	);
}

样本008■React + TypeScript: 保留和重置状态08

每个计数器的状态在组件从DOM中移除时被销毁。因此，每次点击按钮，状态都会被重置。

这种方法在只有少量想要独立渲染的组件时非常方便。在这个示例中，只有两个Counter。这是一个适合使用JSX改变渲染位置的示例。

为每个组件提供一个明确的识别标识符

还有一种更常见的方法是重置组件的状态。

在渲染列表时，添加的是key属性（参考“列表的渲染”）。然而，它不仅适用于列表。通过给予key，React可以区分组件。

默认情况下，React通过父级中的顺序来识别组件。但是，通过给组件设置key，React可以无视顺序，每个组件都可以被识别。这样，无论组件渲染在树的哪个位置，都可以被React识别到。

如果在下面的代码中向两个Counter组件添加键（key），即使它们被放置在JSX的相同位置，它们的状态也不会被共享。通过不同的键，这两个组件被区分开来，在切换时状态将不会被保留（示例009）。

export default function App() {

	return (
		<div>
			{isPlayerA ? (
				<Counter key="Taylor" person="Taylor" />
			) : (
				<Counter key="Sarah" person="Sarah" />
			)}

		</div>
	);
}

样品009■React + TypeScript：保留和重置状态09

设置key属性后，React将根据key来识别位置，而不是在父组件中的顺序。因此，即使在JSX中渲染在相同位置，React也将识别它们为不同的Counter。因此，状态是不共享的。每次组件被渲染时，状态都会被重新创建。而当组件被移除时，状态会被丢弃。这样，每次切换组件时，状态都会被重置。

此外，关键值不需要全局唯一。只需要在父级中能够确定其位置即可。

用键盘重置表单

当处理表单时，通过键（key）来重置状态（reset）特别有用。让我们在聊天应用程序中假设Chat组件具有文本输入的状态。

首先，这是一个关于创建聊天应用程序的组件。Chat组件拥有一个文本区域，输入的消息可以通过[发送到<目标邮箱>]按钮进行发送（按钮点击时不会发生任何特别的事情）。接收目标信息的属性是从父组件传递过来的，名为contact。

export const Chat: FC<Props> = ({ contact }) => {
	const [text, setText] = useState('');
	return (
		<section className="chat">
			<textarea
				value={text}
				onChange={({ target: { value } }) => setText(value)}
			/>
			<br />
			<button>Send to {contact.email}</button>
		</section>
	);
};

在父组件Messenger中，有3个联系人的目标信息（contacts）可用，并通过属性将信息传递给子组件Chat和ContactList。

const contacts: Contact[] = [
	{ id: 0, name: 'Taylor', email: 'taylor@mail.com' },
	{ id: 1, name: 'Alice', email: 'alice@mail.com' },
	{ id: 2, name: 'Bob', email: 'bob@mail.com' }
];
export default function Messenger() {
	const [to, setTo] = useState(contacts[0]);
	return (
		<div>
			<ContactList contacts={contacts} onSelect={(contact) => setTo(contact)} />
			<Chat contact={to} />
		</div>
	);
}

ContactList是一个选择联系人的列表组件，通过按钮可在三个选项中选择目标。当切换目标时，将通过onSelect方法将该联系人信息发送给父组件。

export const ContactList: FC<Props> = ({ contacts, onSelect }) => {
	return (
		<section className="contact-list">
			<ul>
				{contacts.map((contact) => (
					<li key={contact.id}>
						<button
							onClick={() => {
								onSelect(contact);
							}}
						>
							{contact.name}
						</button>
					</li>
				))}
			</ul>
		</section>
	);
};

请在示例010中的文本区域中输入一些内容，然后尝试通过按钮切换对话对象。输入的文本不会消失。由于Chat组件的渲染树位置不会改变，状态会被保留下来。

样品010■React + TypeScript：保留和重置状态10

在这种情况下，聊天应用程序中的状态保持是不可取的，因为可能会不小心将之前发送给对方的消息发送给下一个收件人。

在这种情况下，可以考虑一种方法：父母捕捉到从联系人列表发送的收件人更改，并传达给另一个子组件Chat，告诉它要删除输入的文本。

如果Chat组件的状态需要重置，那么使用key就很简单了。只需要按照下面的方法添加key，当目标切换时文本将被清空（示例011）。

export default function Messenger() {

	return (
		<div>

			{/* <Chat contact={to} /> */}
			<Chat key={to.id} contact={to} />
		</div>
	);
}

React + TypeScript实例011：保留和重置状态11。

当切换对方时，Chat组件会重新创建包括子树在内的新状态。React会重新构建DOM元素而不是重复利用。

保留已删除的组件的状态。

在实际的聊天应用程序中，当我们返回到之前的收件人时，可能会希望恢复之前输入的状态。我们可以考虑一些方法来保持已删除组件的状态并”复活”它们。

• 現在だけでなく、すべてのチャットをレンダーすることです。要らないチャットはCSSで隠します。ツリーのすべてのチャットは削除されません。ローカルの状態に保持されます。シンプルなUIには適しているでしょう。けれど、隠れたツリーが大きくなり、DOMノードもたくさん含まれるようになると、速度の大幅な低下を招くかもしれません。

• 状態を引き上げて、宛先ごとに残しておくメッセージは親コンポーネントに保持することです(「React + TypeScript: コンポーネント間で状態を共有する」参照)。これなら、子コンポーネントが除かれても、情報は親がもっているので失われません。これがもっとも一般的な解決方法でしょう。

Reactの状態に加えて、異なるソースを使うことも考えられます。たとえば、ユーザーがうっかりページを閉じても、書きかけたメッセージは残しておきたいという場合です。その実装としては、Chatコンポーネントが状態を初期化するとき、localStorageから読み込みます。そうすれば、下書きも保存できるでしょう。

无论采取哪种方法，聊天应被视为一个根据不同目标进行区分的单独组件。因此，为Chat组件树中的每个目标提供一个键是合适的。

总结

在这篇文章中，我们对以下主题进行了说明。

• Reactは、同じコンポーネントが同じ位置にレンダリングされるかぎり、状態を保持します。

• 状態はJSXの中に保持されるのではありません。JSXが配置されたツリーの位置に紐づけられるのです。

• 一意のkeyを変えれば、サブツリーの状態は強制的にリセットできます。

コンポーネントの定義を入れ子にしないでください。状態が意図せずリセットされることになります。