![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 78
老Chen先生
这个作者很懒,什么都没留下…
展开
-
项目经验学习——在React的return里面使用switch-case语句
打发打发发原创 2021-10-15 15:28:53 · 2268 阅读 · 1 评论 -
React学习笔记——redux里中间件Middleware的运行机理
1、前言上篇文章中,我们详细介绍了redux的相关知识和如何使用,最后使用中间件Middleware来帮助我们完成异步操作,这篇我们来研究研究Middleware。2、正文我们以redux-thunk为例,从node_modules文件夹下面找到redux-thunk文件夹,查看其源码(下图为redux-thunk源码,一共12行)function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) =&g原创 2021-09-22 20:58:18 · 465 阅读 · 0 评论 -
JS学习笔记——前端关于File、Blob、FileReader和ArrayBuffer的相关概念知识
1、前提这几天在开发过程中,遇到了下载文件问题,其中服务端返回二进制文件流,需要前端自己对二进制文件流进行转换,用到了new Blob()方式,便上网查阅相关资料。2、Blob对象2.1、概念介绍Blob 全称:Binary Large Object(二进制大型对象)Blob 对象是一个前端的一个专门用于支持文件操作的二进制对象,表示一个二进制文件的数据内容。通常用来读写文件,比如一个图片文件的内容就可以通过 Blob 对象读写。在JS中,有两个构造函数:File 和 Blob,而File继承了原创 2021-09-14 10:12:21 · 3471 阅读 · 2 评论 -
React学习笔记——状态管理工具redux的基础介绍和使用(从基础概念到具体使用,全网最全)
1、前言聊起React,就不得不提redux,虽然并不是每个项目中必须使用redux,但是作为一个新生代农民工(国家认证),必须对相关概念了解,这样使用的时候才能立马上手,最近的项目中我们没怎么使用redux,为了防止遗忘,就琢磨写下一些学习心得,做到温故知新。2、传统MVC框架先看张图MVC的全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,是一种软件设计典范。V即View视图,是指用户看到并与之交互的界面。M即Mo原创 2021-08-31 17:24:36 · 468 阅读 · 0 评论 -
js学习笔记——关于对象内某属性更新,对象是否重新更新问题
1、问题描述今天在做项目过程中,处理一个对象时,遇到一个问题:页面渲染时要依赖于某个对象的属性,这个属性是个数组。最开始该数组为空,useEffect中请求完ajax后,拿到接口返回的数据,对该对象中的属性重新set,但是发现render函数中的数据仍然是空数组,对象好像并没有因此变化。所以想亲自尝试一下。2、更新对象的属性import React , {useState,useEffect} from 'react';const Demo = () => { const [arr,原创 2021-08-28 21:28:48 · 1053 阅读 · 0 评论 -
React学习笔记——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect
在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处:代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护组件树层级变浅,原创 2021-08-24 11:04:28 · 20618 阅读 · 8 评论 -
React学习笔记——函数Function组件和类Class组件的setState的区别
关于React中函数Function组件和类Class组件的相同点和区别点,我想大家都已经知晓了,比如:1、相同点无论是使用函数或是类来声明一个组件,它决不能修改它自己的 props所有 React 组件都必须是纯函数,并禁止修改其自身 propsReact是单项数据流,父组件改变了属性,那么子组件视图会更新。、父组件props有变化时,子组件随之而改变属性 props 是外界传递过来的,状态 state 是组件本身的,状态可以在组件中任意修改组件的属性和状态改变都会更新视图。2、不同点原创 2021-08-17 08:13:45 · 1538 阅读 · 0 评论 -
React学习笔记——this.setState的基础使用和不同传参方法详解
前言今天同事在开发过程中遇到了个问题,在使用AntD的Form组件时,内置的onFinish方法里面调用了2次setState方法,发现return函数渲染了2次,不过我记得多次调用setState时,会批量合并,所以就产生了一些疑惑,就上网查了一些资料,学习记录一下。1、setState的使用使用过React的应该都知道,在React中,一个组件中要读取当前状态需要访问this.state,但是更新状态却需要使用this.setState,不是直接在this.state上修改。setState(u原创 2021-08-02 23:10:44 · 3795 阅读 · 0 评论 -
React学习笔记——项目中Ant Design的使用和高级配置按需加载
1、全部加载(1) 安装并引入 antd从 yarn 或 npm安装并引入 antdyarn add antd或(2) 修改 src/App.js引入自己需要的antd组件(比如按钮)import Button from 'antd/es/button'(3)修改src/App.css在src/App.css 文件顶部引入 antd/dist/antd.css@import '~antd/dist/antd.css';2、按需加载以上步骤演示实例,加载了全部的 antd 组件的原创 2021-07-28 23:29:34 · 538 阅读 · 0 评论 -
React学习笔记——Hooks中useRef的基础介绍和使用,useRef和createRef的区别
在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处:代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护组件树层级变浅,原创 2021-07-27 10:06:52 · 1507 阅读 · 0 评论 -
React学习笔记——关于Memoization(记忆化)解决性能问题
1、什么是Memoizationmemoization 来源于拉丁语 memorandum (“to be remembered”),不要与 memorization 混淆了。首先看一下维基百科的描述:Memoization:在计算机科学中,记忆化(英语:memoization而非memorization)是一种提高程序运行速度的优化技术。通过储存大计算量函数的返回值,当这个结果再次被需要时将其从缓存提取,而不用再次计算来节省计算时间。记忆化是一种典型的时间存储平衡方案。简单来说,memoizati原创 2021-07-26 14:05:04 · 1051 阅读 · 0 评论 -
React学习笔记——Hooks中memo,useCallback和useMemo的基础介绍和使用
在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处:代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护组件树层级变浅,原创 2021-07-24 22:54:40 · 1342 阅读 · 4 评论 -
React学习笔记——Hooks中useReducer和useContext的组合使用替代redux
在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处:代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护组件树层级变浅,原创 2021-07-22 16:11:31 · 478 阅读 · 1 评论 -
React学习笔记——Hooks中useReducer的基础介绍和使用
在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处:代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护组件树层级变浅,原创 2021-07-21 15:24:24 · 840 阅读 · 0 评论 -
React学习笔记——Hooks中useContext的基础介绍和使用
在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处:代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护组件树层级变浅,原创 2021-07-20 19:52:42 · 1472 阅读 · 0 评论 -
React学习笔记——Hooks中useEffect的基础介绍和使用
在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处:代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护组件树层级变浅,原创 2021-07-19 23:29:08 · 2996 阅读 · 3 评论 -
React学习笔记——Hooks中useState的基础介绍和使用
Hook 是 React 16.8.0 版本增加的新特性,可以在函数组件中使用 state以及其他的 React 特性。Hook 使用规则Hook 就是JavaScript 函数,但是使用它们会有两个额外的规则:1、只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。(参考:https://blog.csdn.net/weixin_34413802/article/details/91475789)2、只能在 React 的函数组件中调用 Hook。不要在其他 JavaScri原创 2021-07-14 16:17:04 · 3519 阅读 · 0 评论 -
React学习笔记——状态提升
废话少说,直接谈主题,React中的兄弟组件简单通信,就是所谓的状态提升。先定义一个父组件parent和两个子兄弟组件child1和child2。父组件(父组件因为用到状态,所以考虑用类组件)import React, { Component } from 'react';//引入两个子组件import Child1 from './Child1'import Child2 from './Child2'class Parent extends Component { constructo原创 2020-12-25 22:03:30 · 179 阅读 · 0 评论