![](https://img-blog.csdnimg.cn/25b9e8f867e6474a9a9c7c3df4d5b530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React 进阶手册
文章平均质量分 75
React 进阶手册
乐闻x
一个不安分的前端,还搞过两年后端开发
展开
-
React Query 实战教程:在 React 中如何优雅的管理接口数据状态?
如何通过Ajax或者Fetch优雅的请求后端接口,这是所有复杂前端项目都需要考虑处理的事情。在React项目中,有不少成熟的Hook能够让开发者管理整个请求过程中的数据和状态,例如use-httpswr甚至ahook中提供的useRequest。我曾经很长一段时间是直接使用ahook中的useRequest,但是有的项目中不需要ahook中的其他hook,我又不愿意仅仅为了使用useRequest而在项目中引入ahook。就像我第参与的一个前端项目中仅仅为了使用jquery的$.ajax而引入。原创 2023-12-28 20:39:19 · 2071 阅读 · 0 评论 -
如何通过 useMemo 和 useCallback 提升你的 React 应用性能
useMemouseMemo的作用是返回一个 memoized 值,它接受两个参数:一个函数和一个依赖数组。只有当依赖项中的一个值变化,才会重新计算并返回新的 memoized 值。[a, b],上述代码例子中,useMemo返回了一个 memoized 版本的函数结果,a或b改变时,才会重新计算。举个例子假设 computeExpensiveValue是一个需要大量计算资源的函数,比如它需要计算斐波那契数列的第 n 项。在这种情况下,每次组件渲染时重新计算显然是一种资源浪费。原创 2023-12-27 23:25:29 · 782 阅读 · 0 评论 -
Reac保姆级通俗易懂教程汇总(超详细版!!!)
React 新手级基础知识,React 状态管理总结,React 开发编译部署,从Webpack入门前端开发架构以及 React项目实战经验保姆级教程!!!原创 2019-07-10 23:28:27 · 447 阅读 · 0 评论 -
一篇搞定React生命周期以及执行顺序 v16.8+(前端面试整理)
一篇搞定React生命周期以及执行顺序 v16.8+(前端面试整理);render运行过程1. constructor 初始化整个组件的state 以及调用super(props)2. componentWillMount 发生在render之前触发,既可以在客户端触发也可以在服务端触发。SSR的时候,无法触发组件的componentDidMount时,需要在该生命周期中调用服务。原创 2020-02-29 20:53:33 · 2526 阅读 · 0 评论 -
「自己动手丰衣足食」搭建React脚手架
很多朋友学习React都是从Facebook官方提供create-react-app脚手架开始的,脚手架开箱即用固然爽,可是如果想更进一步学习React,甚至更进一步学习流行的SPA应用,我们还是很有必要追根溯源。接下来我会记录我是如何从零一步步搭建一个react脚手架。一、梦开始的地方初始化空项目npm init -ywebpack yarn add webpack w...原创 2020-04-09 22:40:24 · 617 阅读 · 0 评论 -
React Context:跨层级组件共享状态参数、状态
通常情况下,我们通过props将参数从父组件传递给子组件,达到组件间状态参数共享的目的。但是面对嵌套了多层组件的情况,继续使用props一层一层的传递参数是非常冗余和繁琐的。对于这种包含多层组件的传参,React提供了 Context 能力来支持父组件向它包含的无论嵌套层级有多深的子组件传递状态参数,让状态共享变的简单。React Context 为了我们提供了一种组件间状态共享的手段,合理使用会高效提升代码运行效率和维护成本。后续会继续分享在生产项目中使用案例。原创 2023-12-12 21:37:20 · 406 阅读 · 0 评论 -
React进阶教程之Refs详解——通俗易懂,Class组件&Function组件(受控组件与非受控组件)
React进阶教程之Refs详解——通俗易懂,Class组件&Function组件(受控组件与非受控组件),现在有一个表单,页面加载完成时第一个input框自动获取焦点,不需要人为选中,应该怎么实现?React提供了Refs帮助开发者可以直接操作DOM节点,就像jquery时代一样,直接操作DOM,简单明了。原创 2020-11-11 11:44:04 · 1189 阅读 · 0 评论 -
React 支持多语言翻译国际化 -- i18next
如果我们的项目需要更多的流量,支持其他国家的语言是必不可少的。对于React项目我们该如何实现项目多语言,让工程走向国际化,本文将介绍目前最通用的解决方案 i18next。准确是说 i18n并不仅仅是为 React 而生,为了支持React项目,我们还需要引入 react-i18n ext插件。原创 2022-11-06 20:13:17 · 1062 阅读 · 0 评论 -
redux-actions详解教程记录( redux使用更简单???)
前言 Redux 的诟病是重复的模块代码太多,各路大佬都开始尝试解决这些问题,Redux-actions 悄然而生。刚开始使用 Redux-actions 时遇到一些问题,那么专门写一篇博客全面详细的记录 Redux-actions 的使用。安装npm install redux-actions DEMO项目结构 入口// index.jsximport React from 'react';import React..原创 2020-12-03 13:47:57 · 1857 阅读 · 0 评论 -
bindActionCreators & combineReducers 使用记录
阅读 redux 源码的时候,发现 redux 给我们提供了一系列方法。createStore ( redux 创建 store; 必备 )applyMiddleware ( redux 注入中间件 )compose ( redux 组合多个中间件)下面这两个方法是干啥用的呢?bindActionCreatorscombineReducers一、bindActionCreators1. 定义 action 文件一个文件定义多个 action 方法,一般跟某一个业务相关的 .原创 2020-12-02 18:16:07 · 1543 阅读 · 6 评论 -
一篇搞定React状态管理Redux&React-redux使用详解(保姆级教程!!!)
工作流程:首先我们需要创建一个仓库store,仓库里面可以存放组件们需要的数据state。store仓库创建需要招聘处理外部动作信号的仓库管理员reducer。reducer 管理员由 store 直接管理,reducer 管理员通过action 动作传递的信号的type来做相应的提前预定好的动作来管理store中的数据。action 信号由数据用户view component 来触发,通过store 提供的联系方式 store.dispatch() 来发送action。原创 2020-03-25 13:15:42 · 889 阅读 · 0 评论 -
React富文本——markdown编辑器
https://github.com/kkfor/for-editorhttp://react-china.org/t/react/27050原创 2019-07-13 22:31:40 · 2244 阅读 · 5 评论 -
React 所见即所得编辑器 Vditor
前言在网页上嵌入一个 Typora 编辑器是不是很酷的一件事?Markdown是程序员写文档最喜欢的语法,但是直接写Markdown并不够直观,所以出现了「所见即所得」的Markdown编辑器,Typora就是拔尖的产品。我的博客写作过程是先在 Typora上写好,然后复制Markdown到博客编辑上进行保存发布。开始使用Markdown编辑器是 for-editor,我之前写过for-editor富文本组件的使用方法 React富文本——markdown编辑器但是这个过程太麻烦了,如果有一个富文本原创 2021-12-12 16:03:06 · 2224 阅读 · 0 评论 -
React动态效果——animate.css
1.React引入Animate.cssanimate官网animate官网查看需要的动效react项目引入animate.cssnpm i animate.cssnpm i react-addons-css-transition-group封装react动效木偶组件import React from 'react'import "animate.css";i...原创 2019-07-09 21:08:16 · 5163 阅读 · 0 评论 -
React集成Nprogress顶部进度条(效果图 + 代码实现)
「效果」「React 代码」如果仅仅是想在项目中使用 nprogress顶部进度条,那么直接拷贝下面的代码就完事了安装依赖包npm install nprogress npm install hoist-non-react-statics创建 withProgress.jsx 高阶组件import React, { Component } from "react";import hoistNonReactStatic from "hoist-non-react-statics原创 2020-11-17 11:56:53 · 2114 阅读 · 0 评论