javascript - ReactJS/Redux - 纯 Javascript 函数与不纯 Javascript 函数？

Question

我已经浏览了ReactJs Official Docs中纯Javascript函数和不纯Javascript函数的定义。 .

纯函数是指不尝试更改输入的函数，并且对于相同的输入始终返回相同的结果。

示例

function sum(a, b) {
  return a + b;
}

不纯函数是一种改变其自身输入的函数。

示例

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

现在，有人可以告诉我，在需要纯函数的 React/Redux 中，我如何错误地使函数变得不纯？

Answer 1

React 和 Redux 都需要纯函数和不变性才能以可预测的方式运行。

如果您不遵循这两件事，您的应用程序将会出现错误，最常见的是 React/Redux 无法跟踪更改，并且在您的 状态时无法重新渲染/prop 更改。

就 React 而言，请考虑以下示例:

let state = {
    add: 0,
}

function render() {
    //...
}
//pure function
function effects(state,action) {
//following immutability while updating state, not directly mutating the state.
    if(action == 'addTen') {
        return {...state, add: state.add + 10} 
    }
    return state;
}

function shouldUpdate(s) {
    if(s === state){
        return false
    }
    return true
}

state = effects(state, 'addTen')if(shouldUpdate(state)) {
    render();
}

状态由仅添加属性的状态对象保存。此应用程序呈现应用程序属性。当发生任何事情时，它不应该总是渲染状态，但应该检查状态对象中是否发生更改。

像这样，我们有一个效果函数，一个纯函数，我们用它来影响我们的状态。您会看到，当要更改状态时，它会返回一个新状态，而当不需要修改时，它会返回相同的状态。

我们还有一个 shouldUpdate 函数，它使用 === 运算符检查旧状态和新状态是否相同。

要在 React 方面犯错误，实际上可以执行以下操作:

function effects(state,action) {

  doRandom(); // effects should only be called for updating state.
             // Doing any other stuff here would make effects impure.

    if(action == 'addTen') {
        return {...state, add: state.add + 10}
    }
    return state;
}

直接设置状态而不使用 effects 函数也可能会犯错误。

function doMistake(newValue) {
    this.state = newValue
}

不应执行上述操作，而应仅使用 effects 函数来更新状态。

就 React 而言，我们将 effects 称为 setState。

对于 Redux:

1. Redux 的 combineReducers 实用程序检查引用更改。
2. React-Redux 的 connect 方法生成的组件会检查根状态的引用更改以及 mapState 函数的返回值，以查看包装的组件是否确实需要重新-渲染。
3. 时间旅行调试要求 reducer 是纯函数且没有副作用，以便您可以在不同状态之间正确跳转。

通过使用不纯的函数作为 reducer ，您可以轻松违反上述三点。

以下内容直接取自 redux 文档:

它被称为reducer，因为它是您要传递给Array.prototype.reduce(reducer, ?initialValue)的函数类型。
reducer 保持纯净非常重要。你不应该在 reducer 内做的事情:

Mutate its arguments;
Perform side effects like API calls and routing transitions;
Call non-pure functions, e.g. Date.now() or Math.random().

给定相同的参数，它应该计算下一个状态并返回它。没有什么惊喜。无副作用。没有 API 调用。没有突变。只是一个计算。