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"));
在codesandbox尝试一下
看起来不错,但是他不起作用。
我们正在创立组件实例时初始化<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> ); } } //...
办法2:同步state
此刻它可以工作,但对我来说,晋升<BookForm />的状态感受不合错误。在会员单击“留存”此前,<BookApp />不关怀对书的任何更换,那么为什么需要将其保持在本人的状态?
在codesandbox尝试一下
此刻它可以工作,但对我来说,晋升<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> ); } } //...
在codesandbox尝试一下
这种办法平常被认为是一种不好的做法,由于它违反了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> ); } } //...
在codesandbox尝试一下。
假如元素具有与上一个渲染不一样的键,则React会为其创立一个新实例。因此,当会员选中新书时,<BookForm />的键更换,将创立组件的新实例,并从props初始化状态。
相关文章引荐:
React Native跨域资源加载出错怎样解决
React-JSX中怎样实现Class与Style的动态绑定(附实例)
以上就是React中跨组件分发状态的三种办法介绍的具体内容,更多请关注百分百源码网其它相关文章!