React中跨组件分发状态的三种方法介绍

1、react中跨组件分发状态的三种方法介绍当我问自己第一百次时，我正在讨论一个典型的crud屏幕：我应当将状态保留在这个组件中还是将其移动到父组件？。假如需要对子组件的状态举行轻微控制。您可能也碰到了同样的问题。让我们通过一个容易的例子和三种修复办法往返顾它。前两种办法是频繁的做法，第三种办法不太常规。问题；为了向您展示我的意思，我将用法一个容易的书籍crud（译者注：增强(create)、读取查询(retrieve)、更新(update)和删除(delete)）屏幕（如此容易，它没有创建和删除操作）。381280250-5b6ae9839a548_articlex.png我们有三个组成部分。是

2、一个组件，显示了用于编辑它们的书籍和按钮列表。有两个输入和一个按钮，用于保存对书籍的更改。以及包含其他两个组件的。那么，我们的状态是什么？好吧，应当跟踪书籍清单以及识别当前正在编辑的书籍的内容。没有任何状态。并且应当保持输入的当前状态，直到单击保存按钮。importreact,componentfrom"react"importrenderfrom"react-dom"constbooks=title:"theendofeternity",author:"isaacas

3、imov",/.;constbooklist=(books,onedit)=>(booktitleactionsbooks.map(book,index)=>(book.title<buttononclick=()=>onedit(index)>edit</button>);classbookformextendscomponentstate=.ps.book;render()if(!ps.b

4、ook)returnnull;return(<form>book<label>title:<inputvalue=this.state.titleonchange=e=>this.setstate(title:e.target.value)/></label><label>author:<inputvalue=this.state.a

5、uthoronchange=e=>this.setstate(author:e.target.value)/></label><buttononclick=()=>ps.onsave(.this.state)>save</button></form>);classbookappextendscomponentstate=books:book

6、s,activeindex:-1;render()constbooks,activeindex=this.state;constactivebook=booksactiveindex;return(<booklistbooks=booksonedit=index=>this.setstate(activeindex:index)/><bookformbook=activebookonsave=book=>this.setstate(books:object.assign(.books,

7、activeindex:book),activeindex:-1)/>);render(<bookapp/>,document.getelementbyid("root");在codesandbox尝试一下看起来不错，但是他不起作用。我们正在创建组件实例时初始化状态，因此，当从列表中挑选另一本书时，父级无法让它知道它需要更改它。我们改如何修复它？办法1：受控组件一种频繁的办法是将状态提升，将转换为受控组件。我们删除状态，将activebook添加到状态，并向添加一个onchange道具，我们在

8、每次输入时都会调用它。/.classbookformextendscomponentrender()if(!ps.book)returnnull;return(<form>book<label>title:<inputvalue=ps.book.titleonchange=e=>ps.onchange(.ps.book,title:e.target.value)/>&am

9、p;lt;/label><label>author:<inputvalue=ps.book.authoronchange=e=>ps.onchange(.ps.book,author:e.target.value)/></label><buttononclick=()=>ps.onsave()&gt

10、;save</button></form>);classbookappextendscomponentstate=books:books,activebook:null,activeindex:-1;render()constbooks,activebook,activeindex=this.state;return(<booklistbooks=booksonedit=index=>this.setstate(activebook:.booksindex,act

11、iveindex:index)/><bookformbook=activebookonchange=book=>this.setstate(activebook:book)onsave=()=>this.setstate(books:object.assign(.books,activeindex:activebook),activebook:null,activeindex:-1)/>);/.办法2：同步state现在它可以工作，但对我来说，提升的状态感觉不对。在用户单击保存之前，不

12、关怀对书的任何更改，那么为什么需要将其保持在自己的状态？在codesandbox尝试一下现在它可以工作，但对我来说，提升的状态感觉不对。在用户单击保存之前，不关怀对书的任何更改，那么为什么需要将其保持在自己的状态？/.classbookformextendscomponentstate=.ps.book;componentwillreceiveprops(nextprops)constnextbook=nextprops.book;if(ps.book!=nextbook)this.setstate(.nextbook);render()if(!

13、ps.book)returnnull;return(<form>book<label>title:<inputvalue=this.state.titleonchange=e=>this.setstate(title:e.target.value)/></label><label>author:<inputvalue=this.sta

14、te.authoronchange=e=>this.setstate(author:e.target.value)/></label><buttononclick=()=>ps.onsave(.this.state)>save</button></form>);/.在codesandbox尝试一下这种办法通常被认为是一种不好的做法，由于它违

15、反了react关于拥有单一事实来源的主意。我不确定是这种状况，然而，同步状态并不总是那么简单。此外，我尽量避开用法生命周期办法。办法3：由key控制的组件但为什么我们要回收旧的状态呢？每次用户挑选一本书时，拥有一个全新状态的新实例是不是故意义？为此，我们需要告知react停止用法旧实例并创建一个新实例。这就是keyprop的用途。/.classbookappextendscomponentstate=books:books,activeindex:-1;render()constbooks,activeindex=this.state;constactivebook=booksactiveindex;return(<booklistbooks=booksonedit=index=>this.setstate(activeindex:index)/><bookformkey=activeinde