react之纯函数、函数组件、类组件、纯组件

一.纯函数 Pure Function

定义：一个函数的返回结果只依赖于它的参数，并且在执行的过程中没有副作用，我们就把该函数称作纯函数。 — 特点：

• 1.函数的返回结果只依赖与它的参数（同一个输入只能有同一个输出）

let foo=(a, b)=>a+b
foo(1,2) //=3

• 2.函数的执行过程中没有副作用（一个函数执行过程对外部产生了可观察的变化那么就说这个函数是有副作用的。）

什么是副作用
除了修改外部的变量，一个函数在执行过程中还有很多方式产生外部可观察的变化，比如说调用 DOM API 修改页面，或者你发送了 Ajax 请求，还有调用 window.reload 刷新浏览器，甚至是 console.log 往控制台打印数据也是副作用。

二.函数组件

function myComponents(props) {
  return <h1>Hello Word！</h1>;
}

函数组件特点

• 函数组件中是没有this的，通过props传递过来的数据是不变的，同时也不没有生命周期钩子函数；
• 函数组件在Hook没出来之前是无状态的，在React16后增加了Hook来保存数据状态；
• 函数式组件性能消耗小，不需要创建实例，渲染的时候就执行一下，得到返回的 react 元素后就直接把中间量全部都销毁。

三.类组件

class MyComponents extends React.Component {
  render() {
    return <h1>Hello Word！</h1>;
  }
}

• 在类组件中必须要有constructor()函数，用于定义组件内部变量，默认创建一个空的构造函数，该函数接收参数(props)。想要访问父组件传递过来的参数，可通过this.props的方式去访问；
• 类组件中有生命周期钩子函数，可以在特定的钩子函数中执行特殊操作；例如接口请求、事件监听和绑定定时器等通常放到componentDidMount()钩子函数中，此时组件已经挂载，DOM树也构建完毕。而移除事件监听和清除定时器要放到componentWillUnmount()钩子函数中，避免发生内存泄露。
• 在类组件中有state状态存储，当要改变变量值时通过setState()更改；
• 类组件的性能消耗比较大，需要创建类组件的实例，且不能销毁；

四.类组件和函数组件的区别

是否有this 是否有生命周期 是否有状态state （灵魂三问）

类组件有生命周期，函数组件没有；
类组件依赖class创建，函数组件通过return返回创建；
类组件有状态存储，函数组件需要依赖Hook完成状态存储；
类组件中有this指向问题需要特别注意，函数组件则没有this；
类组件消耗大，需要创建实例，且不能销毁；函数组件消耗少，得到结果就销毁；

总结：
1.函数组件语法更短、更简单，这使得它更容易开发、理解和测试。
2.类组件也会因大量使用 this 而让人感到困惑。使用功能组件可以很容易地避免这种缺点，保持代码整洁。
3.当业务逻辑复杂，用类组件更易于我们维护，也相应降低了开发成本。
4.函数组件多用于简单功能模块封装，便于复用；
发展前景：未来函数式组件将会成为主流，因为它可以更好的屏蔽 this 问题、规范和复用逻辑，更好的适合事件分片和并发渲染

五.纯组件pureComponent

其实React中的纯组件和纯函数的关系不是特别大。我们有时候在更新state的时候会发现，我们使用setState的对象模式传递一个空对象过去也会重新render渲染页面，而且父组件render之后，子组件也会重新render，但是这不是我们想看到的，会降低性能。我们希望看到的是当我们的state和props改变了，再进行render。

这个时候有人提出来一个方案，在新的生命周期中不是有一个shouldComponentUpdate钩子函数嘛？我们可以在这个钩子里面判断一下state和props是否改变了，然后再判断是否render啊，但是如果我们的state和props数据很多呢，这样我们代码代价是不是就太高了呢？

所以pureComponent就是React中为这种情况提供的一种新的解决方案，类式组件在继承的时候都继承了React.Compoonent组件，有了pureComponent之后，我们直接替换成继承React.pureComponent就可以达到这种效果了。