鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ react在一個頁面里面多次引入相同的組件，怎么讓他們的生命周期函數(shù)和State

react在一個頁面里面多次引入相同的組件，怎么讓他們的生命周期函數(shù)和State保存獨立

1.描述你的問題

我在一個頁面多次引用同一個自定義組件，但是我希望在創(chuàng)造的組件實例中各自接受自己的props,但是目前在componentWillReciveProp里面會觸發(fā)兩次props，因為引用了2次該組件

2.代碼

UI:
<Popover
    visible={popBotVisible}
    placement="left"
    keyName="footer"
>
</Popover>
<Popover
    visible={popTopVisible}
    placement="top"
    keyName="header"
>
</Popover>
constructor(props) {
    super(props);
    this.state = {
        popMainShow:false,
        keyName:props.keyName,
        placement:props.placement,
        popContent:props.popContent,
        
    }
}
componentWillReceiveProps(props){
    console.log(nextProps)  // 會console兩次
}

3.期望
希望創(chuàng)造的每個Popover的生命周期函數(shù)和state是獨立的，只能接受到各自的props

回答
編輯回答
魚梓

componentWillReceiveProps這個方法都要被廢棄了，怎么還在用？

2017年7月6日 13:37
編輯回答
淡墨

React 的 component 調(diào)用關(guān)系是樹狀的，被 initialize 兩次是因為這個 component 被使用了兩次，他們倆都是作為 child 節(jié)點，這樣才能滿足 React 高效的渲染算法，你的想法不符合 React 的設(shè)計思想。

<Popover> 的 constructor 實現(xiàn)中有些不符合 state vs props 的地方: placement, popContent 和 keyName 應(yīng)該是 props，無需變成 state，如果有不得不把它變成 state的原因，那是別的地方設(shè)計有誤

2018年7月1日 13:23
編輯回答
淺淺

事實上就是獨立的，兩次console是兩個組件實例分別console的。

除此以外，state也是獨立的

2017年6月4日 11:03
編輯回答
故林

事實上，現(xiàn)在程序的表現(xiàn)是對的，props是各自獨立的，兩個組件互相不會有影響

2017年9月11日 18:02