组件高级知识

本节目标：理解“组件高级知识”的核心思路，并能把它用于实际开发或面试表达。

==首先，====pureComponent====是和====shouldComponentUpdate====这个周期函数相关，正常情况下，这个周期函数默认返回的是====true====，也就是任何====props====的改变，或者是任何的====setState====，都会导致界面的重新====render====。==
==pureComponent====会改变====shouldComponentUpdate====的行为，它不再是返回一个====true====，它会对====props====和====state====进行一次浅比较，只有在不相等的情况下，再进行====return== ==一个====true====，进行触发====render====操作。==
==这个时候，如果是数组类型，或者====Object====类型的数据发生变化，对于====pureComponent====而言，其实都是一样的，不会触发====render====。例如：==
==import== ==React====,== =={== ==pureComponent== ==}== ==from== =='react'========export== ==default== ==class== ==A== ==extends== ==pureComponent===={======   ==constructor====(====props====)== =={======       ==super====(====props====);======       ==this====.====state== ===== =={======           ==name====:== =={======               ==value====:== =='mapbar'======           ==}======       ==}======       ==this====.====click== ===== ==this====.====click====.====bind====(====this====);======   ==}======   ==click====()== =={======      ==this====.====state====.====name====.====value== ===== =='mapbar_front'====;======      ==this====.====setState====({======          ==name====:== ==this====.====state====.====name======      ==})======   ==}======   ====  ==render====()== =={======      ==return== ==(======          ==<====div onClick====={====this====.====click====}>{====this====.====state====.====name====}</====div====>======      ==)======  ==}========}==
==以上的例子，不会触发====render====，导致====name====的值一直是====mapbar====。==
**受控组件（****controlled components****）**
==在原生的表单中，====input====的值是这么设定的。==
==<input== ==value========="mapbar_front"== ==/>======
==并且在这种情况下，我们能够给====input====中输入任何的值。==
==但是在====react====中，我们对于====input====如果给定一个初始值，它是不会随便进行输入进行改变的，它必须同时绑定一个====onChange====事件。==
==<input== ==type========="text"== ==value========={this.state.value}== ==onChange====={(====e====)== ===>== ==this.setState({value: e.target.value})}>==
==在原生的表单中，====textarea====标签的值是由其子元素决定的。例如：==
==<textarea== ==value========="mapbar_front"== ==></textarea>====这个值是空的======
==<====textarea>====mapbar_front====</textarea>====这个值是有的====mapbar_front==
==但是在====react====中，是由====value====属性决定的。==
==同样的，这个====value====属性的改变，也需要使用====onChange====时间来进行更改====value====的状态。==
==<textarea== ==value========="mapbar_front"== ==></textarea>======
==在====react====中，上面的====value====值是存在的，不过你不能改变文本框的值，你必须加上一个====onChange====事件来进行更改。==
==受控组件的意义，就是在====react====中，把====input,textarea====这一类的表单元素，使用====onChange====事件以及====value====属性，动态跟踪他们的值的改变。==
**无状态组件**
==无状态组件的意义，在于其良好的性能，它是用一个函数的方式进行表示一个组件的。==
==import== ==React====,== =={== ==Component== ==}== ==from== =='react'====;========export== ==default== ==function== ==Hello====(====props====)== =={======  ==return== ==(======      ==<div>====hello====,== =={====props====.====name====}</====div====>======  ==);========}==
==无状态组件，之所以由比较高的性能，是因为它自身少了一个组件的实例化的一个过程，它本身就是一个函数。==
==它自身的一切只与====props====相关，一切需要定义====state====的地方，你都应该抽离到容器组件上面，或者使用====redux====之类的东西，进行抽离。==
==它自身没有====this====的概念，因为本身就是一个函数，而====class====类型的组件是要进行实例化的，所以会有====this====的概念。==
==在无状态组件中，不能使用周期函数，这就要让我们思考我们的数据结构，怎么样才算是显得更加的高级。==
==无状态组件，专注于====UI====层，它自身不会对业务逻辑进行处理，这就让我们更好的理解====component====和====page====的关系问题。有助于我们进行组件分离。==
**高阶组件**
==高阶组件的本质，是一个函数，只不过这个函数的返回值，是一个====class====类型的组件。一个高阶组件的基本示例如下：==
==function== ==highComponent====(====MyComponent====)== =={======  ==return== ==class== ==A== ==extends== ==Component== =={======      ==constructor====(====props====)== =={======          ==super====(====props====);======          ==this====.====state== ===== =={======              ==isShow====:== ==true======          ==}======      ==}======      ==componentDidMount====()== =={======          ==this====.====setState====({======            ==isShow====:== ==false====,======          ==})======      ==}======      ==render====()== =={======          ==return== ==(======              ==<====MyComponent== ==isShow====={====this====.====state====.====isShow====}></====MyComponent====>======          ==)======      ==}======  ==}========}==
==从上面的示例中可以看到，高阶组件聚焦于业务层，不关心组件的====UI====层，所以在上面的示例中，我们可以把====MyComponent====这个传递进来的组件，写成无状态组件。==