鍍金池/ 問(wèn)答/HTML/ react組件的狀態(tài)是應(yīng)該放在組件state還是其他第三方狀態(tài)器里[比如redu

react組件的狀態(tài)是應(yīng)該放在組件state還是其他第三方狀態(tài)器里[比如redux-store]中?

之前項(xiàng)目是state和redux混合使用. 區(qū)分的邏輯大多是:

  1. 該狀態(tài)是否有其他組件共享. 比如登錄用戶的角色信息. 許多組件根據(jù)角色的不同有不同的渲染.
  2. 當(dāng)銷(xiāo)毀該組件后, 重新加載該組件是否需要初始化為上次的狀態(tài). 比如上次的查詢條件或結(jié)果. 切換路由后再切換回來(lái)希望仍看到上次的數(shù)據(jù).

后來(lái)寫(xiě)起來(lái)很混亂, 干脆全部使用redux廢棄了所有狀態(tài)組件. 觸發(fā)要使用生命周期, 否則全都是函數(shù)組件了.

不過(guò)最近在思考一個(gè)問(wèn)題.
如果存在組件嵌套的情況, 比如

function Father(props){
    const { a , b } = props;
    return {
        <div>
            <A state={a}/>
            <B state=/>
        </div>
    }
}

function B(props) {
    const { c } = props;
    return {
        <div>
            <C state={c} />
        </div>
    }
}

如果connect在Father上的store任意部分變化, 比如store.b.c變化, 會(huì)造成其他組件的重新渲染. 這樣性能會(huì)不會(huì)不如放在state上好. 如果store.b.c是存在B的state上, 那么應(yīng)該只會(huì)有組件B重新刷新, 不會(huì)影響到Father和A

求大神解惑

回答
編輯回答
離人歸

reselect正是你需要的。
reselect

2017年9月6日 22:58