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

Javascript react.js html

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

Previous: Please lazyload jquery | as long as the scroll is at the bottom, you will always ask for it from the back end, but there is no data available.

Next: How to pass hook functions like this.handleClickRow in redux

React error report solution!
Warning: Encountered two children with the same key, `.$4`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and or omitted the behavior is unsupported and could change i...

Javascript react.js html5 node.js redux

Mar.01,2021
Eslint checks jsx syntax rules
1, IDE reported an error as follows 2, eslint is configured as follows { "env": { "es6": true, "node":true, "browser": true }, "parserOptions": { "ecmaVersion": 6, ...

Javascript react.js html5

Mar.16,2021
Echarts displays numerical values on one y-axis and its percentage on one y-axis. How to make it show only one broken line?
echarts line chart, double y-axis, there is already a data corresponding to the y-axis. We need to get the percentage of the corresponding data according to its data to form another y-axis I get the corresponding percentage of the data, but show two cur...

Javascript react.js html5

Apr.05,2021
After the react-lazyload first screen is loaded, it will not be loaded by sliding again. Can you give me some advice on what loding, has used?
I almost brought the case over, but I still can t. Ask for advice, everyone import React from "react"; import LazyLoad from react-lazyload ; import Lazyloading from .. Lazyloading index ; import Placeholder from .. Lazyloading Placeh...

Lazyload javascript react.js html5 node.js

Jul.01,2021
Have you used a graphical interface to quickly create an open source project for html pages?
something like this allows people who have no coding foundation to make simple html pages and export as activity pages, mainly to export html . < H1 > introduction < H1 > ...

Html javascript react.js html5

Oct.12,2021