web前端 - 纯函数与React纯函数什么是纯函数在计算机编程中，当一个函数满足以下2点，可被称为纯函数： 1.想

纯函数与React

在计算机编程中，当一个函数满足以下2点，可被称为纯函数：
1.想同的参数，函数调用的返回值总是想同的。
2.这个函数无副作用(sideEffect)。

这里的副作用（sideEffects），一般指：局部静态变量、非局部变量、可变引用参数或输入/输出流没有被改变。

定义1很好理解，区分一个纯函数的难点通常在定义2（是否有副作用），这里简单举例。

如下的add函数是个纯函数，同一个nums总是能得到相同的返回值，且函数内部没有改变任何外部变量。

function add(nums) {
  return nums.a + nums.b + 1
}

修改后的add就不是纯函数了，每次调用它都修改了nums这个引用对象的属性值

function add(nums) {
  nums.a += 1
  return nums.a + nums.b
}

可以认为，一个纯函数，它的功能仅限于计算，不应该对任何外部的变量产生修改行为。

扩展到前端领域，如修改dom、window变量等行为也算一种副作用，此时的函数不仅仅用于计算，因为每次调用都对外部产生了修改。

// 满足1，不满足2
function add(a, b) {
  document.title = 'title-' + String(a + b)
  return a + b
}

React中强调一个规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

所以类似以下的行为是不被允许的，无论你使用的是类组件还是函数组件，都不能修改props

function withdraw(account, amount) {
  account.total -= amount;
}

这是我们使用React编写代码需要遵守的原则，不然可能会出现预期之外的情况（显示和状态不一致）

把我们自己的组件看成一个函数，props就是这个函数的输入，state就是这个函数的内部变量，对于输入的引用值，我们不能去修改他，违反的话ui随着时间变化的过程将失去控制。

React建议组件尽量使用纯函数的方式编写:
1.服务端和客户端的运行结果一致。
2.如果输入未改变，那每次返回的jsx就是相同的，可以安全地跳过render或者使用缓存, 用于提高性能。

组件使用纯函数的方式编写，可以避免随着业务逻辑的增加，出现不可预测的行为，同时也便于编写单元测试。