首页 > 其他分享 >[email protected](52)[email protected](1)- 核心概念

[email protected](52)[email protected](1)- 核心概念

时间:2024-07-08 22:56:39浏览次数:16  
标签:count 16 type 52 React state action 数据 store

目录

1,MVC

是一个解决方案,用于降低 UI 和数据关联的复杂度。

在早期前后端未做分离时,服务端会响应一个完整的HTML,包含页面需要的所有数据。而浏览器仅承担渲染页面的作用,整体流程也就是服务端渲染

其中服务端的处理流程:处理请求,并将需要的数据嵌入到 HTML,再返回给浏览器。

为了降低这个过程的复杂度,出现了 MVC 模式。

  • 服务端收到不同的请求,分发给不同的 Controller(控制器)来处理,并组装这次请求需要的数据。
  • Model 层会将数据组装为,用于UI渲染的数据模型。
  • View 层会将数据模型组装到 HTML 中,返回给浏览器。

前后端分离的部分原因

MVC 模式中,将数据模型为组装到 View 视图层生成最终的 HTML,这一步越来越复杂了。
所以想直接给前端返回数据,组装数据进行展示的逻辑,交给前端来做。

2,前端MVC的困难

前端框架 VueReact 解决了数据 --> 视图的问题,但 Controller 比服务端复杂的多。

1,前端的 Controller 实际上是在处理用户的操作,而操作场景是复杂的,改变数据的情况太多了。

1,不同的组件有不同的操作和响应,每一个事件处理程序做的事情也都不一样。
2,比如,服务器只需要知道是否调用了某个接口,并控制器来处理逻辑。
而前端触发调用接口的场景可能不止一个:点击按钮触发,计时器触发,或其他逻辑执行完后再触发。

2,前端框架使用的是单向数据流,在共享数据时,只能将数据提升到顶层组件,并逐层传递,比较繁琐。

所以产生了上下文(React.createContext / prvide/inject)来提供共享数据。但还是有一些缺陷,尤其对中大型应用来说。

  • 上下文更多应用在局部的、层级关系较深的组件间通信,并且是为了数据传递,很少有更改传递数据的情况。
  • Vuex、Redux 是为了提供了更完整的状态管理解决方案,也包括时间旅行(调试,状态回溯)、模块化等。

3,Flux

FaceBook 提出的数据解决方案,最大的历史意义是引入了 action 概念。

  • action是一个对象,用于描述要做的事情,是触发数据变化的唯一原因
  • store 表示数据仓库(全局单例模式),存储共享数据。会根据不同的 action 更改仓库的中的数据。
// 示例
cosnt loginAction = {
    type: "login",
    payload: {
        loginId:"admin",
        loginPwd:"123123"
    }
}

const deleteAction = {
    type: "delete",
    payload: 1  // 用户id为1
}

4,Redux

Flex 基础上引入了 reducer,用于根据 action 来处理数据,处理后的数据会被仓库重新保存。

和 vuex 的对比:

ReduxVuex
StoreStore
ReducerMutation
ActionAction

流程差不多相当于:

store.dispatch({
  type: 'ADD_TODO',
  count: 2,
})

// action 也可以是一个函数
store.dispatch(addAction(2))
function addAction(count) {
  return {
    type: 'ADD_TODO',
    count,
  };
}


function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return Object.assign({}, state, {
        count: action.count + 1,
      });
    default:
      return state;
  }
}

Vuex

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state, { amount }) {
       state.count += amount
    }
  },
  actions: {
    increment ({ commit }, payload) {
      // 触发 mutation
      commit('increment', payload)
    }
  }
})

// 分发 action
store.dispatch('increment', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'increment',
  amount: 10
})

以上。

标签:count,16,type,52,React,state,action,数据,store
From: https://blog.csdn.net/qq_40147756/article/details/140072880

相关文章

  • vue3 watch使用方式,如何监听reactive子属性 ref数据等
    代码<template><divclass="box">childB</div></template><scriptlang="ts"setup>import{reactive,watch,ref}from"vue";constdata1=reactive({msg:"childB",abc:"sl......
  • P0916VB 触点输入模块
    型号:P0916VB类别:触点输入模块成色:全新,非全新质保:一年P0916VB触点输入模块的工作原理基于触点信号的检测与转换。当外部设备的触点闭合或断开时,会产生相应的电信号变化。触点输入模块通过内部的电路设计,能够检测到这种电信号的变化,并将其转换为控制系......
  • SPI驱动--TM1628
     /*********************************************************************************@fileGPIO_Toggle\main.c*@authorMCDApplicationTeam*@versionV2.0.1*@date18-November-2011*@briefThisfilecontainsthemainfuncti......
  • LeetCode 523. 连续的子数组和
    523.连续的子数组和给你一个整数数组 nums 和一个整数 k ,如果 nums 有一个 好的子数组 返回 true ,否则返回 false:一个 好的子数组 是:长度 至少为2 ,且子数组元素总和为 k 的倍数。注意:子数组 是数组中 连续 的部分。如果存在一个整数 n ,令整数 x......
  • 入门PHP就来我这(高级)16 ~ 批量删除功能
    有胆量你就来跟着路老师卷起来!--纯干货,技术知识分享路老师给大家分享PHP语言的知识了,旨在想让大家入门PHP,并深入了解PHP语言。  本文给大家接着上篇文章进行图书删除功能的优化,实现批量删除图书的功能。 1添加删除按钮<divclass="panel-heading">......
  • IIC驱动--TM1651
     /*********************************************************************************@fileGPIO_Toggle\main.c*@authorMCDApplicationTeam*@versionV2.0.1*@date18-November-2011*@briefThisfilecontainsthemainfuncti......
  • SPI驱动--TM1638
     /*********************************************************************************@fileGPIO_Toggle\main.c*@authorMCDApplicationTeam*@versionV2.0.1*@date18-November-2011*@briefThisfilecontainsthemainfuncti......
  • 数据结构第16节 最大堆
    最大堆是一种特殊的完全二叉树数据结构,其中每个父节点的键值都大于或等于其子节点的键值。在Java中,最大堆通常用于实现优先队列,堆排序算法,或者在需要快速访问最大元素的应用场景中。让我们通过一个具体的案例来说明最大堆的使用和实现:假设我们正在开发一个系统,用于实时分析......
  • 两张图带你全面了解React状态管理库:zustand和jotai
    zustand和jotai是当下比较流行的react状态管理库。其都有着轻量、方便使用,和reacthooks能够很好的搭配,并且性能方面,对比React自身提供的context要好得多,因此被很多开发小伙伴所喜爱。更有意思的是,这两个库的作者是同一个人,同时他还开源了另外一个状态库valtio,并没来得及研究......
  • 蓝牙发射接收器芯片TD5165A—拓达半导体
     随着科技的不断发展,越来越多的人开始将电视机作为娱乐和休闲活动的重要设备。然而,电视机的内置音响系统通常无法提供给用户高质量的音频体验,此时需要搭配蓝牙发射接收器使用,本文将详细介绍这款蓝牙发射接收器的应用场景、产品功能和与配对兼容性相关的问题。    首......