○ For a normal div creation process, there are the following steps:

  1. const div=document.createElement("div"): the create/construct div
  2. div.textContent="hi"Initialize state (data)
  3. document.body.appendChild(div)The :div mounts to the body
  4. div.textContent="hi2":update the new state
  5. div.remove(): the div unmount to

React lifecycle

  1. constructor()
  2. static getDerivedStateFromProps()
  3. shouldComponentUpdate()
  4. render()
  5. getSnapshotBeforeUpdate()
  6. componentDidMount()
  7. componentDidUpdate()
  8. componentWillUnmount()
  9. static getDerivedStateFromError()
  10. componentDidCatch()

Second, the shouldComponentUpdate ()

USES:

  1. Returning true does not block page updates
  2. False prevents page updates

One argument: For a component, if the state goes through a series of changes, the final value does not change, but because the state object is changed, it must force the UI update, which is not good for the user experience. So there’s this hook that asks you if you want to update:

Even if the button is clicked, n+1-1 generates the same n, but still generates {n:1} new objects. The new object calls the Render () function to trigger the update.

ShouldComponentUpdate () is used to determine if an update is needed

ShouldComponentUpdate (); shouldProps (new props); nextState (new state);

In addition, comparing the data of the new state and the old state is helpful to optimize the rendering experience of React and remove unnecessary rendering. Didn’t React think about this? Do we need to manually determine if we need to render

This feature is already built in, called react.pureComponent

With PureComponent, click the button and the “UI Render” field will no longer appear.

Third, render ()

As the name suggests, used to render views. There is one point, however, where a return can only have one root element. For example:

return (
    <div>
        <div className="innnercontent1">This is the inside 1</div>
        <div className="innnercontent2">This is the inside 2</div>
    </div>
)   
Copy the code

If the outermost div is removed, an error is reported:

    // Return must return because there is no root element wrapped around it
    return (
         <div className="innnercontent1">This is the inside 1</div>
         <div className="innnercontent2">This is the inside 2</div>
    )
Copy the code

Solution: Use react. Fragment

return (
   <React.Fragment>
       <div className="innnercontent1">This is the inside 1</div>
       <div className="innnercontent2">This is the inside 2</div>
   </React.Fragment>
   
   // Or directly <>
    <>
       <div className="innnercontent1">This is the inside 1</div>
       <div className="innnercontent2">This is the inside 2</div>
   </>
)  
Copy the code

Four, componentDidMount ()

  1. The code executes immediately after the component is mounted to the page, which is obviously dom dependent
  2. This place can also make load AJAX requests to load data (typically used for server-side rendering)

If you want to get the width of the component’s div, you must get it after you mount it:

Let {a:1,b:2,c:3} let {a,c}=obj

In addition, we can use ref to locate divs.

  1. Create a ref in the constructorthis.myRef=React.createRef()
  2. After mounting, usethis.myRef.currentRefer to this div and process it
  3. Write the ref attribute in the tag and assign the created myRef to ref

Four, componentDidUpdate ()

  1. Execute code after view update
  2. AJAX requests can also be made here for data updates (documents)
  3. The first rendering will not trigger the update, so this hook will not fire
  4. It’s best not to use setState directly here, because setting data triggers UI updates, and UIgengxin triggers this hook, which loops indefinitely. You can use statements such as if to determine.
  5. If shouldComponentUpdate is set to false, the update will not be triggered

Fifth, componentWillUnmount ()

  1. Code that executes when the component is about to be removed from the page and destroyed
  2. Components that have been unmounted will not be mounted

Fixed issue: If you are listening for window Scroll or Timer or AJAX requests in componentDidMount you need to cancel them in componentWillUnmount() to free up memory for the user