React入门学习-纯函数VS纯组件

目录

1.什么是纯函数？

2.什么是纯组件？

---

1.什么是纯函数？

满足以下两个特征的函数叫做纯函数：

• 函数的返回结果只依赖与它的参数（同一个输入只能有同一个输出）
• 函数的执行过程中没有副作用（一个函数执行过程对外部产生了可观察的变化那么就说这个函数是有副作用的。）

我们首先看第一点什么叫函数的返回结果只依赖与它的参数呢？

    const b=1
    const add=a=>a+b
    const pureAdd=(a,c)=>a+c

add函数的返回值里面的b是外部作用域里的变量，不是它的参数当我们b变化的时候，是不是相同的输入就得不到相同的输出呢，所以不是纯函数。

反观pureAdd函数，返回值a,b都是函数自己的参数，相同的输入只会得到相同的输出，所以其是一个纯函数。

在函数里面调用随机生成数函数，并返回对应结果，或者调用时间戳函数并返回，都会使得返回的结果不统一，所以这种函数都是不纯的。

其次看第二点什么叫函数的执行过程中没有副作用？

    const foo = (obj, b) => {
        obj.x = 2
        return obj.x + b
    }
    const counter = { x: 1 }

couter是外部的对象，原本的counter里面x的属性对应值是1，但是当我们执行了函数foo之后，x的值变为了2，也就是说我们函数改变了函数外部counter，对外部产生了可观察的变化，所以这个函数也不是纯函数。

const foo = (b) => {
  const obj = { x: 1 }
  obj.x = 2
  return obj.x + b
}

像这个函数，counter是函数内部的，在函数执行的时候对里面的counter对象进行了修改，但是其对外部是不可见的，所以外部是观察不到的，所以其是一个纯函数。

当然修改外部变量，属性，数据结构等只是函数产生毒作用的一种方式，还有文件操作，网络操作，控制台/屏幕输入输出交互，抛出异常或者中止错误，刷新浏览器，调用DOM修改页面等都属于函数的副作用，都会导致函数不纯。

那么我们为什么要用纯函数呢？

• 便于代码复用，
• 便于单元测试

2.什么是纯组件？

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

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

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