详解在React中跨组件分发状态的三种方法
当我问自己第一百次时,我正在研究一个典型的crud屏幕:“我应该将状态保留在这个组件中还是将其移动到父组件?”。
如果需要对子组件的状态进行轻微控制。您可能也遇到了同样的问题。
让我们通过一个简单的例子和三种修复方法来回顾它。前两种方法是常见的做法,第三种方法不太常规。
问题;
为了向您展示我的意思,我将使用一个简单的书籍crud(译者注:增加(create)、读取查询(retrieve)、更新(update)和删除(delete))屏幕(如此简单,它没有创建和删除操作)。
我们有三个组成部分。 <booklist />
是一个组件,显示了用于编辑它们的书籍和按钮列表。 <bookform />
有两个输入和一个按钮,用于保存对书籍的更改。以及包含其他两个组件的 <bookapp />
。
那么,我们的状态是什么?好吧,<bookapp />应该跟踪书籍清单以及识别当前正在编辑的书籍的内容。 <booklist />没有任何状态。并且<bookform />应该保持输入的当前状态,直到单击“保存”按钮。
import react, { component } from "react"; import { render } from "react-dom"; const books = [ { title: "the end of eternity", author: "isaac asimov" }, //... ]; const booklist = ({ books, onedit }) => ( <table> <tr> <th>book title</th> <th>actions</th> </tr> {books.map((book, index) => ( <tr> <td>{book.title}</td> <td> <button onclick={() => onedit(index)}>edit</button> </td> </tr> ))} </table> ); class bookform extends component { state = { ...this.props.book }; render() { if (!this.props.book) return null; return ( <form> <h3>book</h3> <label> title: <input value={this.state.title} onchange={e => this.setstate({ title: e.target.value })} /> </label> <label> author: <input value={this.state.author} onchange={e => this.setstate({ author: e.target.value })} /> </label> <button onclick={() => this.props.onsave({ ...this.state })}> save </button> </form> ); } } class bookapp extends component { state = { books: books, activeindex: -1 }; render() { const { books, activeindex } = this.state; const activebook = books[activeindex]; return ( <div> <booklist books={books} onedit={index => this.setstate({ activeindex: index })} /> <bookform book={activebook} onsave={book => this.setstate({ books: object.assign([...books], { [activeindex]: book }), activeindex: -1 })} /> </div> ); } } render(<bookapp />, document.getelementbyid("root"));
看起来不错,但是他不起作用。
我们正在创建组件实例时初始化<bookform />状态,因此,当从列表中选择另一本书时,父级无法让它知道它需要更改它。
我们改如何修复它?
方法1:受控组件
一种常见的方法是将状态提升,将<bookform />转换为受控组件。我们删除<bookform />状态,将activebook添加到<bookapp />状态,并向<bookform />添加一个onchange道具,我们在每次输入时都会调用它。
//... class bookform extends component { render() { if (!this.props.book) return null; return ( <form> <h3>book</h3> <label> title: <input value={this.props.book.title} onchange={e => this.props.onchange({ ...this.props.book, title: e.target.value })} /> </label> <label> author: <input value={this.props.book.author} onchange={e => this.props.onchange({ ...this.props.book, author: e.target.value })} /> </label> <button onclick={() => this.props.onsave()}>save</button> </form> ); } } class bookapp extends component { state = { books: books, activebook: null, activeindex: -1 }; render() { const { books, activebook, activeindex } = this.state; return ( <div> <booklist books={books} onedit={index => this.setstate({ activebook: { ...books[index] }, activeindex: index })} /> <bookform book={activebook} onchange={book => this.setstate({ activebook: book })} onsave={() => this.setstate({ books: object.assign([...books], { [activeindex]: activebook }), activebook: null, activeindex: -1 })} /> </div> ); } } //...
现在它可以工作,但对我来说,提升 <bookform />
的状态感觉不对。在用户单击“保存”之前, <bookapp />
不关心对书的任何更改,那么为什么需要将其保持在自己的状态?
方法2:同步state
现在它可以工作,但对我来说,提升<bookform />的状态感觉不对。在用户单击“保存”之前,<bookapp />不关心对书的任何更改,那么为什么需要将其保持在自己的状态?
//... class bookform extends component { state = { ...this.props.book }; componentwillreceiveprops(nextprops) { const nextbook = nextprops.book; if (this.props.book !== nextbook) { this.setstate({ ...nextbook }); } } render() { if (!this.props.book) return null; return ( <form> <h3>book</h3> <label> title: <input value={this.state.title} onchange={e => this.setstate({ title: e.target.value })} /> </label> <label> author: <input value={this.state.author} onchange={e => this.setstate({ author: e.target.value })} /> </label> <button onclick={() => this.props.onsave({ ...this.state })}> save </button> </form> ); } } //...
这种方法通常被认为是一种不好的做法,因为它违背了react关于拥有单一事实来源的想法。我不确定是这种情况,然而,同步状态并不总是那么容易。此外,我尽量避免使用生命周期方法。
方法3:由key控制的组件
但为什么我们要回收旧的状态呢?每次用户选择一本书时,拥有一个全新状态的新实例是不是有意义?
为此,我们需要告诉react停止使用旧实例并创建一个新实例。这就是key prop的用途。
//... class bookapp extends component { state = { books: books, activeindex: -1 }; render() { const { books, activeindex } = this.state; const activebook = books[activeindex]; return ( <div> <booklist books={books} onedit={index => this.setstate({ activeindex: index })} /> <bookform key={activeindex} book={activebook} onsave={book => this.setstate({ books: object.assign([...books], { [activeindex]: book }), activeindex: -1 })} /> </div> ); } } //...
如果元素具有与上一个渲染不同的键,则react会为其创建一个新实例。因此,当用户选择新书时,<bookform />的键更改,将创建组件的新实例,并从props初始化状态。
有什么收获?重用组件实例意味着更少的dom突变,这意味着更好的性能。因此,当我们强制react创建组件的新实例时,我们会为额外的dom突变获得一些开销。但是对于这样的情况,这种开销是最小的,其中密钥没有变化太快而且组件不大。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。