React 全家桶
关注
分享
扫一扫
文章平均质量分 70
React+React-Router+Redux+antd+React-Hooks。。。
一颗不甘坠落的流星
前端专栏博主，目标是归纳前端所需要各种技术的使用，不是在补充、就是在重写博客的路上，一步步完善中。
展开
-
【React】forwardRef 用法
react 中 forwardRef 使用方法及案例原创 2023-06-25 09:34:16 · 2456 阅读 · 0 评论 -
【React】PureComponent 与 memo
- PureComponent 和 memo 仅作为性能优化的方式而存在。- 但请不要依赖它来“阻止”渲染，因为这会产生 bug。- PureComponnet 和 memo 都是通过对 props 值的浅比较来决定该组件是否需要更新的。原创 2022-06-09 16:00:10 · 682 阅读 · 1 评论 -
【React】Fragments（＜＞＜/＞）
基本介绍React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。也可以使用<></>的语法来声明 Fragments，它看起来像空标签。但是 Fragments 支持key属性，而 <></>不支持任何属性使用显式 <React.Fragment> 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个原创 2022-04-28 15:14:59 · 488 阅读 · 0 评论 -
【React】Context 跨组件通信
在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。原创 2022-04-28 13:30:06 · 2431 阅读 · 0 评论 -
【React】函数式组件传值（props）
在用react进行函数式编程时，父组件可以通过props向子组件传值，那么子组件怎么向父组件传值呢？首先，父组件需要向子组件传递一个函数，然后，子组件通过props获取函数并附上参数，最后，父组件通过函数拿到子组件传递的值。原创 2022-04-13 17:29:25 · 5642 阅读 · 0 评论 -
【React】axios 封装使用
axios的封装一般在项目文件夹中的src目录下，单独建个文件夹utils，里面新建个request.js文件用来封装路由。基本格式如下：//axios 的封装import axios from 'axios';//配置const service = axios.create({ baseURL: '/',//基础路径 timeout: 60000 //请求的超时时间})//请求拦截service.interceptors.request.use(原创 2021-06-15 15:44:29 · 669 阅读 · 3 评论 -
【React】虚拟 DOM 和 Diff 算法
文章目录原创 2021-06-15 15:05:53 · 583 阅读 · 0 评论 -
【React】immutable.js 基础教程
文章目录JS中数据修改问题介绍常用APIobject转Map对象array转List对象JS转immutableimmutable转JSRedux中集成用它的原因是为了解决问题：解决项目当中状态大规模管理的深拷贝的问题（防止对象/数组因为引用传递而在使用过程中出现的各种问题）。JS中数据修改问题我们先来看一段熟悉的代码：import React, { Component } from "react";class App extends Component { state = {原创 2021-05-28 17:40:59 · 551 阅读 · 0 评论 -
【React】类组件 state 状态用法
State状态（state）定义状态修改状态状态提升同步和异步状态（state）如果将 state 与 vue 中的某个点做类比的话，则其相当于 vue 组件中的 data ，作用就是用于存储当前组件中需要用到的数据。状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)定义状态切记：不要直接通过this.state.xxx = xxxx形式去更改state的值。否则会包警告，警告如下：Do no原创 2021-05-20 21:03:41 · 1876 阅读 · 0 评论 -
【React】props 属性用法
Props进阶children 属性props-type默认值children 属性介绍：1. children 属性是只存在于 props 对象中的一个属性2. children 属性只有在组件标签中有子节点的时候才会存在3. children 属性的使用就类似于vue中匿名插槽 插槽就是在子组件中挖一个坑，坑里填什么由父组件决定（传值：父-子）4. children 属性的值可以是任意的类型（可以是字符串，也可以是对象），并且标签子节点也可以是多个5. 如果子组件标签里只存在一个子节原创 2021-05-20 20:27:53 · 558 阅读 · 3 评论 -
【React】JSX 语法及原理
文章目录不用 jsx 语法使用 jsx 语法JSX 总结不用 jsx 语法hello world<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi原创 2021-05-18 16:42:16 · 850 阅读 · 0 评论 -
【React】react-redux 案例
文章目录容器组件和UI组件改写计数器知识点总结容器组件和UI组件React-Redux 将所有组件分成两大类：UI 组件（presentational component）容器组件（container component）UI组件容器组件作用描述如何展现（骨架、样式）描述如何运行（数据获取、状态更新）直接使用Redux否是数据来源props监听Redux state数据修改从props调用回调函数向Redux派发actions原创 2021-05-13 12:18:51 · 1270 阅读 · 8 评论 -
【Redex】使用及案例分析
文章目录需求：不用 Redex使用 Redex知识点总结：需求：我们写一个计数器+：点击后 +1-：点击后 -1++：点击后延时后 +1不用 RedexApp.jsx 文件import React ,{Component} from 'react';class App extends Component{ constructor(props) { super(props); this.state = { count:0 } }原创 2021-05-13 08:32:59 · 1952 阅读 · 1 评论 -
【Redux】简解及工作流程分析
文章目录Redux 工作流程图Redux 三个核心概念Redux 工作流程图完整版：先来个简单版本的：Store 相当于老板Reducers 相当于厨师Action Creators相当于服务员React Component 相当于顾客打个比方：顾客（React Component）想吃点东西，于是就把吃啥告诉了服务员（Action Creators）服务员（Action Creators）就用菜单（dispatch）记录（action）下来，点了什么菜（type），和数量（d原创 2021-05-12 19:48:37 · 7153 阅读 · 3 评论 -
【React】类组件渲染性能优化
文章目录Redux 框架Redux 安装Redux 使用情况Redux 框架2013 年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构React 与 Redux的区别就相当于 Java 和 JavaScript 的区别，完全是两种不同的东西，只不过名字比较像Redux的设计思想：React 只是 DOM 的一个抽象层，并不是web应用的完整解决方案。代码结构和组件间的原创 2022-04-18 18:30:19 · 444 阅读 · 2 评论 -
【Flux】基本介绍
文章目录MVC框架缺陷FluxReduxMVC框架缺陷MVC的全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范。M：即是 Model 模型是管理数据，很多业务逻辑都在模型中完成。在MVC的三个部件中，模型拥有最多的处理任务。V：就是View视图是指用户看到并与之交互的界面C：是Controller控制器是指控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处原创 2021-05-07 21:43:15 · 1880 阅读 · 2 评论 -
【React】生命周期详解
文章目录constructor(props)constructor(props)React组件的构造函数在挂载之前被调用。在使用React.Component构造函数时：需要先在添加其他内容前，调用super(props)用来将父组件传来的props绑定到这个类中使用this.props将会得到。官方建议：不要在constructor引入任何具有副作用和订阅功能的代码，这些应当使用componentDidMount()。constructor中应当做些初始化的动作如：初始化原创 2021-04-27 22:55:56 · 3932 阅读 · 1 评论 -
【React】路由详解
文章目录基本用法path 属性Histroy 属性HashRouterBrowserRouter声明式跳转LinkNavLink路由组件componentrenderchildren编程式导航pushgo路由传参match.paramslocation.searchlocation.stateswitch及404页面处理嵌套路由withRouter添加路由属性路由守卫基本用法安装依赖：npm i -S react-router-dom使用时，路由器 Router 就是 React 的一个组件。原创 2021-04-26 22:30:59 · 6170 阅读 · 7 评论 -
【React】 lazy 和 Suspense
文章目录一、import() 函数二、React.lazy三、React.Suspense3.1、lazy 不用 Suspense（报错）3.2、lazy 使用 Suspense（推荐）一、import() 函数同样是引人模块，import命令是同步引人模块，而import ()函数动态引入// `math.js`文件const add = (x, y) => { return x + y;}export default add;//import 命令import { a原创 2021-04-23 22:48:26 · 1872 阅读 · 0 评论 -
【React】Portal 传送门
文章目录基本用法案例分析基本用法Portal 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法render到一个组件中时，实际上是改变了网页上的另一处的dom结构，一般用于对话框、提示框ReactDOM.createPortal(child,container);child：可渲染的react子项，比如元素，字符串或片段container：DOM元素普通的组件，子组件的元素将挂载到父组件的DOM节点中render(){ // React原创 2021-04-23 21:16:43 · 928 阅读 · 1 评论 -
【React】HOC 高阶组件
高阶组件Higher-Order Components就是一个函数，传给它一个组件（参数是组件），它返回一个新的组件（返回值是组件）作用：对原有的组件的扩展const NewComponent = higherOrderComponent(YourComponent)比如，我们想要我们的组件通过自动注入一个版权信息。withCopyright.jsx 文件定义一个高阶组件//版权的高阶组件 hoc import React, { Component } from 'react';/原创 2021-04-23 19:29:15 · 336 阅读 · 0 评论 -
【React】类组件传值（props）
文章目录父传值给子子传值给父父传值给子父组件将自己的状态传递给子组件，子组件当做属性来接收props，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变import React, { Component } from "react";// 父组件class Farther extends Component { // 父的数据 state = { msg:"父的数据" } render() { return (原创 2021-04-23 10:19:02 · 1164 阅读 · 0 评论 -
【React】表单应用
文章目录表单受控组件input 标签textare 标签select 标签非受控组件表单在 React 里，HTML表单元素的工作方式和其他的DOM 元素有些不同，这是因为表单元素通常会保持一些内部的state。例如这个纯 HTML 表单只接受一个名称：<form> <label> 名字: <input type="text" name="name" /> </label> <input type="submi原创 2021-04-23 09:49:15 · 408 阅读 · 0 评论 -
【React】 类组件中 Ref 的使用（createRef）
文章目录基本使用父子传值基本使用React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例,ref可以挂载到组件上也可以是dom元素上。挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性，因为它们没有实例挂载到dom元素上时表示具体的dom元素节点import React, { PureComponent } from 'react'class Child extends Pure原创 2021-04-22 22:14:56 · 2076 阅读 · 0 评论 -
【React】Profiler 测量渲染
文章目录Profiler 测量渲染一个 React 应用多久渲染一次以及渲染一次的“代价”。 它的目的是识别出应用中渲染较慢的部分，或是可以使用类似 memoization 优化的部分，并从相关优化中获益。尽管 Profiler 是一个轻量级组件，我们依然应该在需要时才去使用它。对一个应用来说，每添加一些都会给 CPU 和内存带来一些负担。Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销。它需要两个 prop ：一个是 id(string)，一原创 2022-04-28 15:41:54 · 930 阅读 · 0 评论 -
【React】列表应用
文章目录渲染列表组件基础列表组件用 key 提取组件渲染列表组件我们使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 <li> 标签，最后我们将得到的数组赋值给 listItems：const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) => <li>{number}</li>);我们把整个 listItems原创 2021-04-22 21:45:16 · 477 阅读 · 0 评论 -
【React】事件处理
文章目录事件绑定事件写法Event 对象事件传参处理表单事件绑定React 采用on+事件名的方式来绑定一个事件但是和原生事件是有区别的：原生事件全是小写onclickReact里面的事件是驼峰写法onClickReact的事件并不是原生事件，而是合成事件事件写法在组件内使用箭头函数定义一个方法（推荐）import React ,{Component} from 'react'import ReactDOM from 'react-dom'class App extends原创 2021-04-21 22:01:24 · 409 阅读 · 1 评论 -
【React】基础入门教程
文章目录组件是啥？函数组件组件是啥？组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素函数组件由于元素没有办法传递参数，所以我们就需要把之前定义的变量改为一个方法，让这个方法去return一个元素:import React from 'react'import ReactDOM from 'react-dom'// 特别注意这里的写法，如果要在JSX里写js表达式(只能是表达式，不能流程控制)，就需原创 2021-04-20 16:40:50 · 763 阅读 · 0 评论 -
React 编写我的第一个 react 应用程序
react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app里已经帮我们把这些东西都安装好了，不要自己手动安装配置。具体步骤：先创建一个 react 项目：点这跳转，查看流程创建的工程目录下的src里面的文件清空重新创建一个index.js文件js 代码如下：// 从 react 的包当中引入了 React。/*只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，.原创 2021-04-19 21:27:31 · 5394 阅读 · 3 评论 -
React vscode 创建 react 项目流程【超详细】
文章目录一、安装node二、配置淘宝镜像三、配置 vscode（win10）四、全局安装脚手架五、创建项目一、安装node请在官网下载安装：https://nodejs.org/zh-cn/vscode 中 点击 ( ctrl + `) 调出终端输入指令node -v，能显示版本号，说明 node 已经装好了输入指令npm -v，能显示版本号，说明 npm 可以使用了点击链接查看图文教程https://blog.youkuaiyun.com/qq_45677671/article/detail原创 2021-04-19 20:29:09 · 23328 阅读 · 3 评论