React introduces the same components many times in a page, how to keep their lifecycle functions and State independent

1. Describe your problem

props,componentWillRecivePropprops2

2. Code

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. Expect
the life cycle function and state of each Popover you want to create are independent, and can only accept their own props

May.24,2021

is actually independent, and the two console are console by two component instances.

in addition, state is also independent


in fact, the performance of the program is right now, props is independent, and the two components will not affect each other


The component call relationship of

React is tree-shaped and is used by initialize twice because the component is used twice. Both of them are used as child nodes, so that it can satisfy the efficient rendering algorithm of React. Your idea does not conform to the design idea of React.

< Popover > 's constructor implementation does not conform to state vs props : placement , popContent and keyName should be props , not state . If there is a reason why it has to be turned into state , it is a design error elsewhere

.

componentWillReceiveProps this method is going to be abandoned, why is it still in use?


I also encountered the same problem, how to solve

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eab07f-2020.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eab07f-2020.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?