![](https://img-blog.csdnimg.cn/fc0ba6b82fb5473cbb61ffb8c13875e7.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
React
岁月可贵
梦想很大,仍需努力
展开
-
Redux 与 Vuex 的区别总结
但是Redux状态更改可回溯——Time travel,数据多了的时候可以很清晰的知道改动在哪里发生,完整的提供了一套状态管理模式。如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。但是他要更改数据的时候不能直接修改,数据修改更新的角色由Reducers来担任,store只做存储。vuex 弱化 dispatch,通过commit进行 store状态的一次更变;弱化reducer,基于commit参数直接对数据进行转变,使得框架更加简易;原创 2023-02-15 09:30:00 · 783 阅读 · 1 评论 -
React + Redux 处理异步请求
但是在⼀定规模的项⽬中,上述⽅法很难进⾏异步流的管理,通常情况下我们会借助 redux 的异步中间件进⾏异步处理。方式二:借助 redux 的异步中间件进⾏异步处理。中直接进⾏请求,在将数据同步到 redux。创建 Store 仓库。原创 2023-02-14 19:27:02 · 482 阅读 · 0 评论 -
React 持久化全局数据状态管理(redux-toolkit、react-redux、redux-persist)
上述例子主要是结合、 实现的 react 全局数据状态管理(持久化)原创 2023-02-08 09:44:03 · 604 阅读 · 0 评论 -
react-redux基本使用
【代码】react-redux基本使用。原创 2023-02-07 19:37:58 · 73 阅读 · 0 评论 -
reudx基本使用
跟类组件使用类似,通过注入的方式使用。原创 2023-02-07 19:36:43 · 81 阅读 · 0 评论 -
React 持久化全局数据状态管理(redux、react-redux、redux-persist、immer)
上述例子主要是结合reduximmer实现的 react 全局数据状态管理(持久化)原创 2023-02-07 15:30:30 · 919 阅读 · 0 评论 -
redux 和 react-redux
采用这种方式修改数据,也可以让数据修改,UI 也会进行同步。(不可修改的),需要将参数 state 赋值给一个新对象,在该新对象对状态进行修改。2、将 header 组件封装成高阶函数,并使用 store 数据仓库。此步操作目的是在全局范围内可以操作 redux。这里使用了高阶函数,可以使用,也可以不使用。1、自定义高阶函数 withRouter。中的钩子函数,并将其钩子函数通过。1、入口文件 index.tsx。1、入口文件 index.tsx。是函数式组件,故可以使用到。2、header 组件。原创 2022-11-20 17:19:34 · 306 阅读 · 0 评论 -
react-router-dom
页面 Home页面 About。原创 2022-11-19 20:50:57 · 290 阅读 · 0 评论 -
React入门第二天(函数式组件实现数据响应式,生命周期的监听)
数据响应式由于函数式组件没有 this 指向,导致无法获取到 setState,无法实现数据动态化import React from 'react'import { useState } from 'react'export default function App4() { // Hook 只能用在组件函数中的最顶层 const [num1, setNum1] = useState(1); const [num2, setNum2] = useState(1);原创 2022-03-09 08:30:00 · 2650 阅读 · 0 评论 -
入门React第二天(函数式组件传值)
常规传值父 =》子import React, { useState } from 'react'function Child(props) { return <h2>子组件{props.num}</h2>}export default function Father() { return <Child num={123}/>}子 =》父function Child(props) { return ( <&原创 2022-03-09 08:00:00 · 471 阅读 · 0 评论 -
React入门第一天(绑定事件,动态渲染,修改样式、传参)
案例一:绑定事件,动态渲染import React, { Component } from 'react'export default class App extends Component { constructor(props){ super(props); // 状态管理 this.state = { num: 1 } } render() { return ( <> <h2>{this.state.n原创 2022-03-08 19:38:14 · 1398 阅读 · 0 评论 -
React 入门第一天(小案例和注意细节)
创建项目目录npx create-react-app democd demonpm start删除src 目录下的所有文件,从头开始学创建一个小案例src 创建入口 index.jsimport ReactDOM from "react-dom";import App from './App'// ReactDOM.render(组件名称,要注入的元素)ReactDOM.render( <App/>, document.getElementById('roo原创 2022-03-08 19:31:47 · 615 阅读 · 0 评论