摘要:在中跨組件分發(fā)狀態(tài)的三種方法當(dāng)我問自己第一百次時(shí),我正在研究一個(gè)典型的屏幕我應(yīng)該將狀態(tài)保留在這個(gè)組件中還是將其移動到父組件。如果需要對子組件的狀態(tài)進(jìn)行輕微控制。前兩種方法是常見的做法,第三種方法不太常規(guī)。
在React中跨組件分發(fā)狀態(tài)的三種方法
當(dāng)我問自己第一百次時(shí),我正在研究一個(gè)典型的CRUD屏幕:“我應(yīng)該將狀態(tài)保留在這個(gè)組件中還是將其移動到父組件?”。
如果需要對子組件的狀態(tài)進(jìn)行輕微控制。您可能也遇到了同樣的問題。
讓我們通過一個(gè)簡單的例子和??三種修復(fù)方法來回顧它。前兩種方法是常見的做法,第三種方法不太常規(guī)。
問題;為了向您展示我的意思,我將使用一個(gè)簡單的書籍CRUD(譯者注:增加(Create)、讀取查詢(Retrieve)、更新(Update)和刪除(Delete))屏幕(如此簡單,它沒有創(chuàng)建和刪除操作)。
我們有三個(gè)組成部分。
那么,我們的狀態(tài)是什么?好吧,
import React, { Component } from "react"; import { render } from "react-dom"; const books = [ { title: "The End of Eternity", author: "Isaac Asimov" }, //... ]; const BookList = ({ books, onEdit }) => (
Book Title | Actions |
---|---|
{book.title} |
在codesandbox嘗試一下
看起來不錯(cuò),但是他不起作用。
我們正在創(chuàng)建組件實(shí)例時(shí)初始化
我們改如何修復(fù)它?
方法1:受控組件一種常見的方法是將狀態(tài)提升,將
//... class BookForm extends Component { render() { if (!this.props.book) return null; return (); } } class BookApp extends Component { state = { books: books, activeBook: null, activeIndex: -1 }; render() { const { books, activeBook, activeIndex } = this.state; return (
現(xiàn)在它可以工作,但對我來說,提升
在codesandbox嘗試一下
現(xiàn)在它可以工作,但對我來說,提升
//... 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 (); } } //...
在codesandbox嘗試一下
這種方法通常被認(rèn)為是一種不好的做法,因?yàn)樗`背了React關(guān)于擁有單一事實(shí)來源的想法。我不確定是這種情況,然而,同步狀態(tài)并不總是那么容易。此外,我盡量避免使用生命周期方法。
方法3:由Key控制的組件但為什么我們要回收舊的狀態(tài)呢?每次用戶選擇一本書時(shí),擁有一個(gè)全新狀態(tài)的新實(shí)例是不是有意義?
為此,我們需要告訴React停止使用舊實(shí)例并創(chuàng)建一個(gè)新實(shí)例。這就是key prop的用途。
//...
class BookApp extends Component {
state = {
books: books, activeIndex: -1
};
render() {
const { books, activeIndex } = this.state; const activeBook = books[activeIndex]; return ();this.setState({ activeIndex: index })} /> this.setState({ books: Object.assign([...books], { [activeIndex]: book }), activeIndex: -1 })} />
}
}
//...
在codesandbox嘗試一下。
如果元素具有與上一個(gè)渲染不同的鍵,則React會為其創(chuàng)建一個(gè)新實(shí)例。因此,當(dāng)用戶選擇新書時(shí),
有什么收獲?重用組件實(shí)例意味著更少的DOM突變,這意味著更好的性能。因此,當(dāng)我們強(qiáng)制React創(chuàng)建組件的新實(shí)例時(shí),我們會為額外的DOM突變獲得一些開銷。但是對于這樣的情況,這種開銷是最小的,其中密鑰沒有變化太快而且組件不大。
感謝你的閱讀。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/96740.html
摘要:在中跨組件分發(fā)狀態(tài)的三種方法當(dāng)我問自己第一百次時(shí),我正在研究一個(gè)典型的屏幕我應(yīng)該將狀態(tài)保留在這個(gè)組件中還是將其移動到父組件。如果需要對子組件的狀態(tài)進(jìn)行輕微控制。前兩種方法是常見的做法,第三種方法不太常規(guī)。 在React中跨組件分發(fā)狀態(tài)的三種方法 當(dāng)我問自己第一百次時(shí),我正在研究一個(gè)典型的CRUD屏幕:我應(yīng)該將狀態(tài)保留在這個(gè)組件中還是將其移動到父組件?。 如果需要對子組件的狀態(tài)進(jìn)行輕微控...
摘要:在中跨組件分發(fā)狀態(tài)的三種方法當(dāng)我問自己第一百次時(shí),我正在研究一個(gè)典型的屏幕我應(yīng)該將狀態(tài)保留在這個(gè)組件中還是將其移動到父組件。如果需要對子組件的狀態(tài)進(jìn)行輕微控制。前兩種方法是常見的做法,第三種方法不太常規(guī)。 在React中跨組件分發(fā)狀態(tài)的三種方法 當(dāng)我問自己第一百次時(shí),我正在研究一個(gè)典型的CRUD屏幕:我應(yīng)該將狀態(tài)保留在這個(gè)組件中還是將其移動到父組件?。 如果需要對子組件的狀態(tài)進(jìn)行輕微控...
摘要:是以的形式來創(chuàng)建的組件的,是目前極為推薦的創(chuàng)建有狀態(tài)組件的方式,最終會取代形式相對于可以更好實(shí)現(xiàn)代碼復(fù)用。當(dāng)然,有三種手動綁定方法可以在構(gòu)造函數(shù)中完成綁定,也可以在調(diào)用時(shí)使用來完成綁定,還可以使用來綁定。 React推出后,出于不同的原因先后出現(xiàn)三種定義react組件的方式,殊途同歸;具體的三種方式: 函數(shù)式定義的無狀態(tài)組件 es5原生方式React.createClass定義的組件...
摘要:維護(hù)著一個(gè)全局的,并且根據(jù)來進(jìn)行事件分發(fā)處理。如果想和其它框架集成,使用或者來設(shè)置定時(shí)器,或者發(fā)送請求,可以在該方法中執(zhí)行這些操作。在該函數(shù)中調(diào)用將不會引起第二次渲染。在該方法中執(zhí)行任何必要的清理,比如無效的定時(shí)器,或者清除在中創(chuàng)建的元素。 @(StuRep)2016.06.10 React的PropTypes使用方法 React.PropTypes.array // 數(shù)組 Reac...
摘要:右側(cè)展現(xiàn)對應(yīng)產(chǎn)品。我們使用命名為的對象表示過濾條件信息,如下此數(shù)據(jù)需要在組件中進(jìn)行維護(hù)。因?yàn)榻M件的子組件和都將依賴這項(xiàng)數(shù)據(jù)狀態(tài)。化應(yīng)用再回到之前的場景,我們設(shè)計(jì)化函數(shù),進(jìn)一步可以簡化為對于的偏應(yīng)用即上面提到的相信大家已經(jīng)理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...
閱讀 2715·2021-11-22 13:52
閱讀 1184·2021-10-14 09:43
閱讀 3640·2019-08-30 15:56
閱讀 2952·2019-08-30 13:22
閱讀 3269·2019-08-30 13:10
閱讀 1563·2019-08-26 13:45
閱讀 1102·2019-08-26 11:47
閱讀 2789·2019-08-23 18:13