React.pureComponent 与React.Component 区别

• shouldComponentUpdate： 我们知道组件存在生命周期函数 shouldComponentUpdate()，我们可以这个生命周期中对props与state进行比较，决定在更新props与state之后是否需要重新渲染，如果shouldComponentUpdate()返回true，则当前组件的重新渲染（render函数执行），返回false则不需要重新渲染。默认情况下(如果我们不写 shouldComponentUpdate函数)， shouldComponentUpdate()返回true，所以只要当父组件触发重新渲染，子组件也会跟着重新渲染。

• React.Component： React.Component组件的shouldComponentUpdate函数执行原则就遵循上面shouldComponentUpdate的介绍。

• React.PureComponent： React.PureComponent组件的shouldComponentUpdate会在 React.Component的shouldComponentUpdate原有基础上进行一波加强，简而言之，PureComponent组件的shouldComponentUpdate默认情况下（如果我们不写 shouldComponentUpdate函数），会自己进行一波props与state的浅比较，决定返回true or false，而Component组件在默认情况下置灰无脑返回true。

总结：

所以当props与state没有发生变化的时候，可能为了性能优化，Component组件中还要手动对比变化，决定是否更新，而PureComponent自己内置比较，就不需要我们再手动比较。

• PS: 浅比较采用Object.is，简而言之在处理+0与-0时返回false，NaN与NaN返回true，其他与===处理相同,所以如果当我们进行更新state数据的话，例如this.state.arr :['marker'],当我们使用this.setState({arr:this.state.arr.push('marker')}),PureComponent组件是不会发生重新渲染的，因为对于浅比较数组，这种写法数组引用相同地址，浅比较会认为其没有发生变化，导致不触发重新渲染，所以请合理使用setState。

react中元素与组件的 区别

• react元素： 让我们想想react中的元素，我们第一反应是不是下面这个element

// 代码1
const element =
    <div className="ele">
        <p>React</p>
        {/* 注意 这里是个组件 function Child() { return <div>child</div> } */}
        <Child />
    </div>

没错这是一段JSX代码，JSX代码react中是如何处理的呢，没错是通过babel转义，调用eact.createElement函数，最终返回出一个对象，像下面这样。

// 1,最常写的JSX
const element =
    <div className="ele">
        <p>React</p>
        {/* 注意 这里是个组件 function Child() { return <div>child</div> } */}
        <Child />
    </div>
    
// 2,通过babel转义 调用React.creactElement()
const element = React.createElement(
    "div",
    {
        className: "ele"
    },
    React.createElement("p", null, "React"),
    React.createElement(Child, null)
);

// 3,React.creactElement()最终返回结果
const element = {
    type: 'div',
    props: {
        className: "ele",
        children: [
            {
                type: 'p',
                props: {
                    children: 'React'
                }
            },
            {
                type: 'Child',
                props: {

                }
            }
        ]
    }
}

到这里，我们发现所谓的react元素本质就是一个js的对象，描述了react虚拟dom的结构，而我们的react根据虚拟dom的结构渲染出最终的真实dom。

如果虚拟dom的结构中是type = 'div' ， type = 'p'这种，react知道最终渲染的就是div与p标签，如果type = 'Child'（首字母大写），react并不能立即知道渲染什么样的dom元素，因为这是一个react的组件，react会根据当前组件的返回值（函数组件）或者render函数的返回值（类组件）确定最终渲染的dom，这里的Child最终返回的是<div>child</div>,所以对应的就是{type: 'div', props: { children: "child" }},如果里面还有组件，则继续递归该操作，直到确定所有的虚拟dom数据。

• react组件： 说到react组件我们肯定想起来下面两种组件形式

// 函数组件
function Child() {
    return <div>Child</div>
}
// 类组件
class Child extends React.Component {
    render() {
        return <div>Child</div>
    }
}

第一种函数组件以返回值的形式返回需要渲染的react元素
第二种类组件通过render函数返回我们需要渲染的react元素
所以react组件的本质就是用来返回react元素，而所用到的hook或者生命周期函数等无非是就是帮助处理最终返回的react元素是什么样的，对于逐渐的复用本质就是复用该组件返回的react元素，React 元素是React 应用的最基础组成单位。

总结：

react元素react应用的最基础组成单位，本质是js对象，告诉react最终真实dom长什么样，而react组件本质就是用来返回react元素的函数或者类，组件的复用实则便是对组件最终返回的react元素进行复用。

参考整理来源 ： React 深入系列１：React 中的元素、组件、实例和节点