Redux 学习(一)

介绍

Redux 是一个状态管理库,可用于其他框架,但基本与 React 搭配使用。

有人说当你不清楚自己项目是否需要 Redux 时,就不要使用他,可见 Redux
存在一定复杂性,可能使得简单的项目复杂化,所以,如果项目不存在一堆变量需要共享的话,则不推荐使用 Redux 进行状态管理。

Redux 原理

这就要提到 Fuc 架构,可以自己去网上看峰佬的网络日志,

原理图(截图自尚硅谷B站的视频)
在这里插入图片描述
有一个很好理解的例子,可以将 React Components 比作顾客,将 Action Creators 比作服务员,dispatch 有分发之意,可比喻为服务单, Store 是老版,Reducers 是厨师。

顾客原本点了一份蛋炒饭,但想在里面加牛肉,服务员记录下 Action 菜名,告诉老版顾客点单了,老版再将服务单给厨师,告诉厨师这个顾客之前点的是蛋炒饭( previousState ),想在里面加牛肉( action ),厨师知道之后肯定也要把做完的菜传回去给老版,告诉他做好了,老版吧菜端给顾客。

以上本人对 Redux 工作原理的一点拙见。

Redux的精简例子

开源地址:

创建react脚手架:create-react-app simple-redux-demo

reducer 是个死脑筋只管做事,不管判断,要么就在组件里面判断,再告诉他加不加,reducer 只维护状态,他并不会因为里面状态的改变而引起页面的更新。因此要写一些代码来监听状态的改变并重新调用render进行渲染(下面的 subscribe 订阅)

/*
专门创建为count组件服务的reducer,他的本质就是一个函数,根据原理图,他接收两个参数,一个是preState,一个是action 
*/

const initdata = 0 //有多个变量要存在redux里面的话就要用对象了 const initdata = { count:0, result:2 }
const countReducer = (preState = initdata,action)=>{
    
    
    const {
    
    type,data} = action;
    switch (type){
    
    
        case increment:
            return preState + data 
        case sub:
            return preState - data 
        default:
            return preState
    }
    
}
export default countReducer;

store.js 是专门用来创建、暴露 store 和指定厨师的文件,其他事情不干

/*
    该文件专门用于暴露一个store就好了 createStore
*/

//createstore专门创建核心store
import {
    
    createStore} from 'redux'
import countReducer from './count_reducer'

//开店之前指定厨师
export default createStore(countReducer)

组件 Count.js 中引入 store :
store.getState() 是获取数据,我认为他只是调用了 reducer 函数, reducer 中返回了什么他这个 getState 就是返回了什么。里面返回对象,他也返回对象,里面返回数值,他也返回数值。
store.dispatch() 是通知 store 要执行什么 action。

//示例代码
store.dispatch({
    
    type:'increment',data:value})

store.subscript(callback) 是订阅store,检测 redux 中任意状态的变化,如果任一个状态有变化就调用回调函数

store.subcript(()=>{
    
    
	this.setState({
    
    })//啥也不更新,但react承诺了,只要
	你setstate就帮你调用render进行重新渲染,晃他一波。
})

重新渲染的其他解决办法

上面的使用setState的招式虽然可行,但组件一多起来,就要不停地写setState,这显然效率上很不行,下面提供一种更加方便的犯法。
直接到react里面的入口文件index.js,加入代码,如图所示:

在这里插入图片描述
这样就能一劳永逸了,放心,不会引起项目节点的大面积更新,因为有DOM的diff算法看着呢

猜你喜欢

转载自blog.csdn.net/weixin_46235143/article/details/121270876
今日推荐