当我问自己第一百次时，我正在研究一个典型的CRUD屏幕：“我应该将状态保留在这个组件中还是将其移动到父组件？”。
如果需要对子组件的状态进行轻微控制。您可能也遇到了同样的问题。
让我们通过一个简单的例子和三种修复方法来回顾它。前两种方法是常见的做法，第三种方法不太常规。
问题；
为了向您展示我的意思，我将使用一个简单的书籍CRUD（译者注：增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)）屏幕（如此简单，它没有创建和删除操作）。
我们有三个组成部分。
那么，我们的状态是什么？好吧，
{
title: "The End of Eternity",author: "Isaac Asimov"
},//...
];
const BookList = ({ books,onEdit }) => (
<table>
<tr>
state = { ...this.props.book };
render() {
if (!this.props.book) return null;
return ( ); } }
class BookApp extends Component {
state = {
books: books,activeIndex: -1
};
render() {
const { books,activeIndex } = this.state;
const activeBook = books[activeIndex];
return (
render(
看起来不错，但是他不起作用。
我们正在创建组件实例时初始化
我们改如何修复它？
方法1：受控组件
一种常见的方法是将状态提升，将
render() {
if (!this.props.book) return null;
return ( ); } }
class BookApp extends Component {
state = {
books: books,activeBook: null,activeBook,activeIndex } = this.state;
return (
//...
现在它可以工作，但对我来说，提升
方法2：同步state
现在它可以工作，但对我来说，提升
Book
); } } //...这种方法通常被认为是一种不好的做法，因为它违背了React关于拥有单一事实来源的想法。我不确定是这种情况，然而，同步状态并不总是那么容易。此外，我尽量避免使用生命周期方法。
方法3：由Key控制的组件
但为什么我们要回收旧的状态呢？每次用户选择一本书时，拥有一个全新状态的新实例是不是有意义？
为此，我们需要告诉React停止使用旧实例并创建一个新实例。这就是key prop的用途。
