React合集 - 随笔分类 - 萬事順意

React — 访问 Redux Store 的正确方法是什么？

摘要：在组件中访问 Store 的最佳方法是使用connect()函数，该函数创建一个包裹现有组件的新组件。此模式称为高阶组件，通常是在 React 中扩展组件功能的首选方式。这允许您将状态和 Action 创建者映射到组件，并在 Store 更新时自动传递它们。使用 connect 的<FilterL 阅读全文

posted @ 2024-05-10 09:35 萬事順意阅读(66) 评论(0) 推荐(0)

React — 什么是 redux-saga？

摘要：redux-saga是一个库，旨在使 React/Redux 项目中的副作用（数据获取等异步操作和访问浏览器缓存等可能产生副作用的动作）更容易，更好。 1.安装 $ npm install --save redux-saga 2.redux-saga 的模型概念是什么? Saga就像你的项目中的一个阅读全文

posted @ 2024-05-09 09:39 萬事順意阅读(165) 评论(0) 推荐(0)

React — 如何在 Redux 中发起 AJAX 请求？

摘要：可以使用redux-thunk中间件，它允许您定义异步操作。 //使用fetch API将特定帐户作为 AJAX 调用获取：export function fetchAccount(id) { return dispatch => { dispatch(setLoadingAccountState( 阅读全文

posted @ 2024-05-09 09:35 萬事順意阅读(43) 评论(0) 推荐(0)

TS — 在React中使用TS（基础使用）

摘要：在 React 中使用 TypeScript（TS）是一种很常见的做法，因为 TypeScript 提供了静态类型检查和其他一些有用的功能，可以帮助您更好地开发和维护 React 应用。 1.原始组件： // SimpleComponent.js import React from 'react'; 阅读全文

posted @ 2024-05-08 09:49 萬事順意阅读(553) 评论(0) 推荐(0)

React — 原理面试题-持续更新

摘要：1.什么是React事件，什么是原生事件？两者的区别在哪儿？ React 事件: React 事件是经过封装和合成的，以保证在不同浏览器上的一致性。在使用 React 中的事件处理时，你会给 JSX 元素添加事件处理函数，比如 onClick、onChange 等，然后在事件处理函数中处理相应的逻辑阅读全文

posted @ 2024-03-28 20:02 萬事順意阅读(2072) 评论(0) 推荐(0)

React — 通用hooks封装

摘要：1.UseLocalStorage：该 Hook 用于在本地存储中存储和检索数据。在组件之间共享和保持状态，并且在页面重新加载时保持数据的持久性。 import { useState } from 'react'; const useLocalStorage = (key, initialValue 阅读全文

posted @ 2024-03-28 12:24 萬事順意阅读(355) 评论(0) 推荐(0)

React— React面试题按照学习顺序持续更新

摘要：1.React的特点采用组件化模式，命名式编码，提高代码复用率；在React Native中可以使用react语法进行移动端开发使用虚拟DOM（v-dom）和diff算法，减少DOM和浏览器的交互 2.babel在React的作用 ES6语法转ES5，如箭头函数、模板字符串、解构赋值等。Bab 阅读全文

posted @ 2024-03-28 11:49 萬事順意阅读(53) 评论(0) 推荐(0)

React — zustand状态管理工具

摘要：zustand 是一个用于状态管理的简单而强大的库，它可以与 React 一起使用。它提供了一种简单的方式来管理组件的状态，并且遵循了 React Hooks 的使用规范。使用 zustand 可以方便地创建和共享状态，同时还能够实现状态的订阅和更新。通过 zustand，你可以创建自定义的状态钩阅读全文

posted @ 2024-03-16 18:52 萬事順意阅读(1960) 评论(0) 推荐(0)

React — Class类组件

摘要：一、Class类组件基础模板 import './App.css'; import {Component} from 'react' class Counter extends Component{ //编写组件的逻辑代码 //1.状态变量事件回调 UI //2.定义状态变量 state = { 阅读全文

posted @ 2024-03-15 21:54 萬事順意阅读(410) 评论(0) 推荐(0)

React — forwardRef、useImperaiveHandle

摘要：forwardRef：获取子组件的DOM元素 React.forwardRef 是 React 提供的一个 API，用于在函数组件中向子组件传递 ref。通过使用 React.forwardRef，我们可以将 ref 传递给函数组件内部的 DOM 节点或其他组件，从而实现对其进行操作。 import 阅读全文

posted @ 2024-03-15 15:04 萬事順意阅读(124) 评论(0) 推荐(0)

React — React.memo

摘要：React.memo 是 React 提供的一个优化高阶组件，用于函数组件的性能优化。它类似于类组件中的 shouldComponentUpdate，可以帮助避免不必要的组件重新渲染。使用 React.memo 可以很方便地对函数组件进行性能优化，但需要注意的是，它只进行浅比较，如果 props 阅读全文

posted @ 2024-03-15 14:20 萬事順意阅读(100) 评论(0) 推荐(0)

React — useReducer使用方法

摘要：1.定义一个reducer函数（根据不同的action返回不同的新状态） 2.在组件中调用useReducer，并传入reducer函数和状态的初始值 3.事件发生时，通过dispatch函数分发一个action对象（通知reducer）要返回哪个新状态并渲染UI import { useReduc 阅读全文

posted @ 2024-03-15 13:54 萬事順意阅读(131) 评论(0) 推荐(0)

React — 打包优化

摘要：1.路由懒加载：（1）说明路由懒加载是指路由的JS资源只有在被访问的时候才会被动态获取，是为了优化项目首次打开的时间。（2）配置把路由修改为由React提供的lazy函数进行动态导入 import {Suspense, lazy} from 'react' //lazy函数对组件进行导入 c 阅读全文

posted @ 2024-03-14 17:38 萬事順意阅读(172) 评论(0) 推荐(0)

React — 请求模块(http)封装、API模块封装

摘要：一、请求模块封装 //axios封装 //根域名配置 //超时 //请求拦截器/响应拦截器 import axios from 'axios' const http = axios.create({ baseURL : "", timeout : 5000 }) // 在发送请求之前拦截插入自定义阅读全文

posted @ 2024-03-12 17:42 萬事順意阅读(622) 评论(0) 推荐(0)

React — react配置@路径

摘要：通常情况下，@ 路径是作为一个别名来使用，用于指向项目的根目录。这样做的好处是可以简化模块导入时的路径书写，使代码更加清晰和易读。别名路径配置 1.路径解析配置（webpack），把@/ 解析为 src/ （1）下载插件 craco npm i -D @craco/craco （2）项目根目录下创阅读全文

posted @ 2024-03-12 17:34 萬事順意阅读(816) 评论(0) 推荐(0)

React — 路由

摘要：一、路由的使用 1.安装react-router-dom npm i react-router-dom 2.配置（1）创建router实例对象并且配置路由对应关系（2）路由绑定 import {createBrowserRouter,RouterProvider} from 'react-rou 阅读全文

posted @ 2024-03-12 16:47 萬事順意阅读(1130) 评论(0) 推荐(0)

React — Redux详解

摘要：Redux 是一个用于 JavaScript 应用程序的状态管理库。它可以帮助您管理应用程序中的状态，并确保状态的一致性和可预测性。 Redux 主要用于处理大型应用程序中的复杂状态逻辑，例如跨组件共享状态、处理异步数据流等。 Redux 的核心概念包括： Store（存储）：Redux 应用程序的阅读全文

posted @ 2024-03-07 17:27 萬事順意阅读(2190) 评论(0) 推荐(1)

React—组件通信

摘要：一、父传子（Props）父组件可以通过 props 将数据传递给子组件。这是 React 中最常见的一种方式，适用于父子组件之间的数据传递。 {/* 组件传递：父传子 */} {/* 1.父组件传递数据子组件标签上绑定属性 */} {/* 2.子组件接收数据 props(props对象里包含了父阅读全文

posted @ 2024-03-06 12:01 萬事順意阅读(555) 评论(0) 推荐(1)

Redux

摘要：Redux的特点 Redux能做什么？随着JavaScript单页应用开发日趋复杂，管理不断变化的state非常困难，Redux的出现就是为了解决state里的数据问题。在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件(通过props)，由于这个特征，两个非父子关系的组件（阅读全文

posted @ 2019-09-26 20:28 萬事順意阅读(424) 评论(0) 推荐(0)

react-router-dom中link与Navlink

摘要：React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。目前react-router最新版本已经到4.0+，因为新的版本是一次非常大的改动，所以这里直接讨论4.0以上版本。引用以上资源库按需引用，本文讨论w 阅读全文

posted @ 2019-09-24 08:10 萬事順意阅读(6739) 评论(0) 推荐(1)

随笔分类 - React合集