react在一个页面里面多次引入相同的组件，怎么让他们的生命周期函数和State保存独立

Question

1.描述你的问题

我在一个页面多次引用同一个自定义组件，但是我希望在创造的组件实例中各自接受自己的props,但是目前在componentWillReciveProp里面会触发两次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.期望
希望创造的每个Popover的生命周期函数和state是独立的，只能接受到各自的props

Answer 1

事实上就是独立的，两次console是两个组件实例分别console的。

除此以外，state也是独立的

Answer 2

事实上，现在程序的表现是对的，props是各自独立的，两个组件互相不会有影响

Answer 3

React 的 component 调用关系是树状的，被 initialize 两次是因为这个 component 被使用了两次，他们俩都是作为 child 节点，这样才能满足 React 高效的渲染算法，你的想法不符合 React 的设计思想。

<Popover> 的 constructor 实现中有些不符合 state vs props 的地方: placement, popContent 和 keyName 应该是 props，无需变成 state，如果有不得不把它变成 state的原因，那是别的地方设计有误

Answer 4

componentWillReceiveProps这个方法都要被废弃了，怎么还在用？

Answer 5

我也遇到这个问题,怎么解决的