1 回答

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊
1. 父組件 -> 前幾層子組件: props
2. 父組件 -> 非常深入的子組件(比如從最頂層到第5層以后): context
這種情況幾乎很少見,除非寫框架或者工具,最好是只用props,清晰明了
3. 子組件 -> 父組件:callback
4. 子組件時(shí)間: 嚴(yán)格意義上不存在這種情況,如果出現(xiàn)這樣的需求,說(shuō)明你的寫法是錯(cuò)誤的,
數(shù)據(jù)的流向始終都應(yīng)該是從頂至下。例如root -> (A,B,C) 所以A組件改變,需要讓B改變時(shí),A調(diào)用root以props傳來(lái)的callback從而導(dǎo)致root的state發(fā)生變化,這樣B就能得到更新
5.
當(dāng)APP復(fù)雜的可能特殊情況:在使用pureRenderMixin來(lái)提升渲染速度的時(shí)候,非常里層的子組件需要一些參數(shù)來(lái)計(jì)算顯示的值,但是你又不需要
當(dāng)這個(gè)值改變的時(shí)候重新渲染這個(gè)組件而且也不想用context的時(shí)候, 在Root中定義this.getAllState= () =>
this.state, 然后將這個(gè)getAllState作為props傳遞給子組件; 這種情況很少出現(xiàn),慎用
6.使用某種Flux,讓局部組件鏈接一個(gè)自己的store,同時(shí)接受來(lái)自父組件的各種callback props, 通過這些callback實(shí)現(xiàn) 小組件的store改變時(shí),通知父組件
在一個(gè)實(shí)際的APP中的實(shí)際情況是如何設(shè)計(jì)store和props的呢?
其實(shí)重點(diǎn),我認(rèn)為是store和store之間是如何交流數(shù)據(jù)的。
這里我斗膽地拿我在家寫的一個(gè)編輯器來(lái)做一些分析:編輯器端Flommox, 播放器向redux遷移中
整個(gè)編輯器網(wǎng)站分成了不同的頁(yè)面,每個(gè)頁(yè)面(例如/course:id, /editor/:id, /quizs)對(duì)應(yīng)一個(gè)Action分組+一個(gè)Store, 有的復(fù)雜頁(yè)面可能需要很多歌store整個(gè)編輯器網(wǎng)站分成了不同的頁(yè)面,每個(gè)頁(yè)面(例如/course:id, /editor/:id, /quizs)對(duì)應(yīng)一個(gè)Action分組+一個(gè)Store, 有的復(fù)雜頁(yè)面可能需要很多歌store
- 1 回答
- 0 關(guān)注
- 1470 瀏覽
添加回答
舉報(bào)