〇、对于一个普通的div创建过程，有着如下的步骤：

const div=document.createElement("div")：div的create/construct
div.textContent="hi":初始化state（数据）
document.body.appendChild(div):div mount 在body上
div.textContent="hi2":update 全新的state
div.remove():将div unmount

一、React中的生命周期

constructor()
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidMount()
componentDidUpdate()
componentWillUnmount()
static getDerivedStateFromError()
componentDidCatch()

二、shouldComponentUpdate()

用途：

返回true表示不阻止页面更新
false表示阻止页面更新

一个栗子：
对于一个组件，假如state通过一系列变化，最后数值没有变，但是由于state对象是变化的，必然导致强行更新UI，这是不利于用户体验的。于是就有了这个钩子，询问你是否更新：

即使点击了button，n+1-1生成的n没变，但是依然会生成{n:1}新对象。这个新对象会调用render（）函数触发更新。

于是可以使用shouldComponentUpdate()去判断是否需要更新

shouldComponentUpdate里面有两个参数，一个是nextProps（新的props）和nextState（新的state），通过对比新的state里的数据和旧的state的数据是否相同判断要不要render()

另外，其实对比新的state和旧的state的数据是否变没变有利于优化react的渲染体验，去掉不必要的渲染，React难道没想过这个吗？需要我们手动判断是否需要渲染吗

这个功能其实已经内置了，叫React.PureComponent

使用PureComponent，点击按钮，“UI渲染”字段不会再出现。

三、render()

顾名思义，用来渲染视图。

但是有一点，return的东西只能有一个根元素
例如:

return (
    <div>
        <div className="innnercontent1">这是里面1</div>
        <div className="innnercontent2">这是里面2</div>
    </div>
)   
复制代码

假如把最外面的div去掉，会报错：

    //这样return是必报错的，因为没有一个根元素包裹
    return (
         <div className="innnercontent1">这是里面1</div>
         <div className="innnercontent2">这是里面2</div>
    )
复制代码

解决方法：使用React.Fragment

return (
   <React.Fragment>
       <div className="innnercontent1">这是里面1</div>
       <div className="innnercontent2">这是里面2</div>
   </React.Fragment>
   
   //或者直接<></>
    <>
       <div className="innnercontent1">这是里面1</div>
       <div className="innnercontent2">这是里面2</div>
   </>
)  
复制代码