react的纯函数

**

外面的值不受里面的值的影响

**

reducer必须是纯函数是设计的?

1.redux 可以提供可预测化的状态管理
在一个应用中,所有的 state 都是以一个对象树的形式存在一个单一的 store 中,唯一改变 state 的办法就是触发 action,而 reducer 就是用来编写专门的函数决定每个 action 如何改变应用的 state 。
reducer 就是一个纯函数,接受旧的 state 和 action,返回新的 state (previousState, action) => newState
为什么reducer 必须是一个纯函数?
为什么必须返回一个新的 state?
返回旧的 state 为什么不行?

redux 源码是怎么写的?
纯函数写法
我们首先来看下正常案例,我们一般会有如下几种写法返回新state:
直接返回一个新对象
使用 Object.assign()返回一个新对象
使用 Immutable.js 返回一个新对象
在 Redux store 中保存了 reducer 返回的 这个 state,这个新的 store 树就是应用的下一个 state, 所有订阅 store.subscribe(listener)的监听器都将被调用,监听器里可以调用 store.getState()获得当前 state 此时,我们就可以使用新的 state 来更新 UI setState(newState)
什么是纯函数?
这里简单的讲解一下什么是纯函数?
相同的输入永远返回相同的输出
不修改函数的输入值
不依赖外部环境状态
无任何副作用

为什么reducer必须为纯函数?

我们先来试验下,如果 reducer 不是纯函数会发生什么? 我们将上面代码reducer改造一下,直接修改 state,而不是返回新的 state
改变代码后,我们发现当我们触发了 action 以后,页面没有发生任何变化,这是为什么呢?
我们来看下 redux 源码:
通过源代码,我们发现,var nextStateForKey = reducer(previousStateForKey, action), nextStateForKey就是通过 reducer 执行后返回的结果(state),然后通过hasChanged = hasChanged || nextStateForKey !== previousStateForKey来比较新旧两个对象是否一致,此比较法,比较的是两个对象的存储位置,也就是浅比较法,所以,当我们 reducer 直接返回旧的 state 对象时,Redux 认为没有任何改变,从而导致页面没有更新。
为什么 Redux 会这样设计?
因为比较两个 javascript 对象中所有的属性是否完全相同,唯一的办法就是深比较,然而,深比较在真实的应用中代码是非常大的,非常耗性能的,需要比较的次数特别多,所以一个有效的解决方案就是做一个规定,当无论发生任何变化时,开发者都要返回一个新的对象,没有变化时,开发者返回就的对象,这也就是 redux 为什么要把 reducer 设计成纯函数的原因。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过 useEffect 钩子函数来实现计时器的启动和销毁。 具体实现如下: ```jsx import React, { useState, useEffect } from 'react'; function Timer({ seconds }) { const [count, setCount] = useState(seconds); useEffect(() => { const interval = setInterval(() => { setCount(count => count - 1); }, 1000); return () => clearInterval(interval); }, []); useEffect(() => { if (count <= 0) { clearInterval(interval); } }, [count]); return <div>{count}</div>; } export default Timer; ``` 在上面的代码中,我们定义了一个 Timer 组件,它接受一个 seconds 参数表示计时器的初始时间。 在组件的状态中,我们使用 useState 钩子来定义一个 count 变量,用于记录当前计时器的剩余时间。 在 useEffect 钩子中,我们使用 setInterval 函数来每秒更新一次 count 变量的值,并返回一个清除计时器的函数,以便在组件销毁时清除计时器。 我们还定义了一个第二个 useEffect 钩子,用于判断计时器是否已经结束,如果结束则清除计时器。 最后,在组件的返回值中,我们将 count 变量渲染到页面中用于展示当前剩余时间。 使用方式如下: ```jsx import React from 'react'; import Timer from './Timer'; function App() { return ( <div> <Timer seconds={10} /> </div> ); } export default App; ``` 在上面的代码中,我们将 Timer 组件引入到 App 组件中,并传入了一个 seconds 参数,表示计时器的初始时间为 10 秒。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值