我已经浏览了ReactJs Official Docs中纯Javascript函数和不纯Javascript函数的定义。 .
纯函数是指不尝试更改输入的函数,并且对于相同的输入始终返回相同的结果。
示例
function sum(a, b) {
return a + b;
}
不纯函数是一种改变其自身输入的函数。
示例
function withdraw(account, amount) {
account.total -= amount;
}
现在,有人可以告诉我,在需要纯函数的 React/Redux 中,我如何错误地使函数变得不纯?
最佳答案
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:
- Redux 的
combineReducers
实用程序检查引用更改。 - React-Redux 的
connect
方法生成的组件会检查根状态的引用更改以及mapState
函数的返回值,以查看包装的组件是否确实需要重新-渲染。 - 时间旅行调试要求 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 调用。没有突变。只是一个计算。
关于javascript - ReactJS/Redux - 纯 Javascript 函数与不纯 Javascript 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60751292/