React中跨組件分發(fā)狀態(tài)的三種方法介紹

1、react中跨組件分發(fā)狀態(tài)的三種方法介紹當我問自己第一百次時，我正在討論一個典型的crud屏幕：我應當將狀態(tài)保留在這個組件中還是將其移動到父組件？。假如需要對子組件的狀態(tài)舉行輕微控制。您可能也碰到了同樣的問題。讓我們通過一個容易的例子和三種修復辦法往返顧它。前兩種辦法是頻繁的做法，第三種辦法不太常規(guī)。問題；為了向您展示我的意思，我將用法一個容易的書籍crud（譯者注：增強(create)、讀取查詢(retrieve)、更新(update)和刪除(delete)）屏幕（如此容易，它沒有創(chuàng)建和刪除操作）。381280250-5b6ae9839a548_articlex.png我們有三個組成部分。是

2、一個組件，顯示了用于編輯它們的書籍和按鈕列表。有兩個輸入和一個按鈕，用于保存對書籍的更改。以及包含其他兩個組件的。那么，我們的狀態(tài)是什么？好吧，應當跟蹤書籍清單以及識別當前正在編輯的書籍的內容。沒有任何狀態(tài)。并且應當保持輸入的當前狀態(tài)，直到單擊保存按鈕。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嘗試一下看起來不錯，但是他不起作用。我們正在創(chuàng)建組件實例時初始化狀態(tài)，因此，當從列表中挑選另一本書時，父級無法讓它知道它需要更改它。我們改如何修復它？辦法1：受控組件一種頻繁的辦法是將狀態(tài)提升，將轉換為受控組件。我們刪除狀態(tài)，將activebook添加到狀態(tài)，并向添加一個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現(xiàn)在它可以工作，但對我來說，提升的狀態(tài)感覺不對。在用戶單擊保存之前，不

12、關懷對書的任何更改，那么為什么需要將其保持在自己的狀態(tài)？在codesandbox嘗試一下現(xiàn)在它可以工作，但對我來說，提升的狀態(tài)感覺不對。在用戶單擊保存之前，不關懷對書的任何更改，那么為什么需要將其保持在自己的狀態(tài)？/.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關于擁有單一事實來源的主意。我不確定是這種狀況，然而，同步狀態(tài)并不總是那么簡單。此外，我盡量避開用法生命周期辦法。辦法3：由key控制的組件但為什么我們要回收舊的狀態(tài)呢？每次用戶挑選一本書時，擁有一個全新狀態(tài)的新實例是不是故意義？為此，我們需要告知react停止用法舊實例并創(chuàng)建一個新實例。這就是keyprop的用途。/.classbookappextendscomponentstate=books:books,activeindex:-1;render()constbooks,activeindex=this.state;constactivebook=booksactiveindex;return(<booklistbooks=booksonedit=index=>this.setstate(activeindex:index)/><bookformkey=activeinde