React
文章平均质量分 71
小小白学计算机
这个作者很懒,什么都没留下…
展开
-
react-router细节补充
【代码】react-router细节补充。原创 2023-08-02 16:37:41 · 1179 阅读 · 0 评论 -
React SSR
一、为什么需要SSR呢?单页面富应用的局限:之前我们开发的应用程序,如果直接请求可以看到上面几乎没有什么内容。但是为什么我们页面可以看到大量的内容呢?因为当我们请求下来静态资源之后会执行JS,JS会去请求数据,并且渲染我们想要看到的。但是这个过程存在另外两个问题:问题一:首屏显示的速度较慢;问题二:不利于SEO的优化;如何解决这个问题呢?采用服务端渲染;二、认识SSR和同构?SSR(Server Side Rendering,服务端渲染),指的是页面在服务器原创 2022-02-25 16:02:55 · 3771 阅读 · 0 评论 -
react项目打包
一、react项目打包对于使用脚手架创建的项目,打包是一件非常容易的事情:yarn build其他文件没有太多要解析的,我们看一下js文件:[hash].chunk.js代表是所有依赖的第三方库, vendor(第三方库) 的代码;main.[hash].chunk.js我们自己编写的应用程序代码;runtime~main.[hash].jsWebpack runtime逻辑的chunk;用于加载和运行你的应用程序;思考:随着业务逻辑代码越多,main会变得非常臃肿;二、原创 2022-02-24 17:45:41 · 8749 阅读 · 1 评论 -
react 网易云音乐实战项目笔记
一、路由相关npm i react-router-domnpm i react-router-config // 用于配置路由映射的关系数组1. 路由重定向访问 /路径 =》 重定向到 /discover路径2. 二级路由:二、网络请求相关npm i axios页面中使用暴露 出来的request发送网络请求:封装service:config.js: 配置baseUrl、timeout等参数const devBaseURL = "http://123.207.32.原创 2022-02-22 17:25:51 · 1186 阅读 · 0 评论 -
React Hooks的使用(三)——useRef、useImperativeHandle、useLayoutEffect解析、自定义Hook
一、useRefuseRef返回一个ref对象,返回的ref对象再组件的整个生命周期保持不变。最常用的ref是两种用法:用法一:引入DOM(或者组件,但是需要是class组件)元素;案例一:引用DOMimport React, {useRef} from "react";class TestCpn extends React.Component{ render() { return <h2>TestCpn</h2> }}fun原创 2022-02-19 18:26:37 · 1175 阅读 · 0 评论 -
React Hooks的使用(二)——useContext、useReducer、useCallback、useMemo解析
一、useContext的使用在之前的开发中,我们要在组件中使用共享的Context有两种方式:第一种方式:类组件可以通过 类名.contextType = MyContext方式,在类中获取context;第二种方式:多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context;但是多个Context共享时的方式会存在大量的嵌套:import React, {createContext, useState} from 'react';imp原创 2022-02-18 20:41:03 · 953 阅读 · 0 评论 -
React Hooks的使用(一)——useState、useEffect解析
一、为什么需要Hook?Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。我们先来思考一下class组件相对于函数式组件有什么优势?比较常见的是下面的优势:class组件可以定义自己的state,用来保存组件自己内部的状态;函数式组件不可以,因为函数每次调用都会产生新的临时变量;class组件有自己的生命周期,我们可以在对应的生命周期中完成自己的逻辑;比如在componentDidMount中发送原创 2022-02-18 16:28:13 · 2480 阅读 · 0 评论 -
react-router的使用(二)——NavLink的使用、Switch的作用、Redirect
一、NavLink的使用需求:路径选中时,对应的a元素变为红色这个时候,我们要使用NavLink组件来替代Link组件:activeStyle:活跃时(匹配时)的样式;activeClassName:活跃时添加的class;exact:是否精准匹配;但是,我们会发现在选中about或profile时,第一个也会变成红色:原因是/路径也匹配到了/about或/profile;这个时候,我们可以在第一个NavLink中添加上exact属性;默认的activeClassName:事原创 2022-02-06 17:07:43 · 3007 阅读 · 0 评论 -
react-router的使用(一)——URL的hash、HTML5的history、Router的基本使用
一、阶段一:后端路由阶段早期的网站开发整个HTML页面是由服务器来渲染的.服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.但是, 一个网站, 这么多页面服务器如何处理呢?一个页面有自己对应的网址, 也就是URL.URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.这就完成了一个IO操作.上面的这种操作, 就是后端路由.当我们页面中需要请求原创 2022-02-06 15:59:03 · 1709 阅读 · 0 评论 -
Redux学习(三)——redux-saga的使用、编写中间件函数、Reducer文件拆分
一、redux-devtools我们之前讲过,redux可以方便的让我们对状态进行跟踪和调试,那么如何做到呢?redux官网为我们提供了redux-devtools的工具;利用这个工具,我们可以知道每次状态是如何被修改的,修改前后的状态变化等等;安装该工具需要两步:第一步:在对应的浏览器中安装相关的插件(比如Chrome浏览器扩展商店中搜索Redux DevTools即可,其他方法可以参考GitHub);第二步:在redux中继承devtools的中间件;index.js:imp原创 2022-02-05 20:24:05 · 1548 阅读 · 0 评论 -
Redux学习(二)——封装connect函数
一、自定义connect函数connect.js:import {PureComponent} from "react";import store from "../store";export function connect(mapStateToProps, mapDispatchToProps) { return function enhanceHOC(WrappedComponent) { return class extends PureComponent {原创 2022-02-04 15:44:30 · 685 阅读 · 0 评论 -
Redux学习(一)——Redux的使用过程
一、为什么需要reduxJavaScript开发的应用程序,已经变得越来越复杂了:JavaScript需要管理的状态越来越多,越来越复杂;这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等,也包括一些UI的状态,比如某些元素是否被选中,是否显示加载动效,当前分页;管理不断变化的state是非常困难的:状态之间相互会存在依赖,一个状态的变化会引起另一个状态的变化,View页面也有可能会引起状态的变化;当应用程序复杂时,state在什么时候,因为什么原因而发生了变化,发生原创 2022-02-02 16:58:40 · 1105 阅读 · 0 评论 -
AntDesign组件库的使用
一、AntDesign的介绍AntDesign ,简称 antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。中后台的产品 属于工具性产品,很多优秀的设计团队通过自身的探索和积累,形成了自己的设计体系。AntDesign的特点:提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 React 组件。使用 TypeScript 开发,提供完整的类型定义文件。全链路开发和设计工具体系。数十个国际化语言支持。深入每个细节的主题定原创 2021-12-13 22:13:16 · 4145 阅读 · 0 评论 -
React中添加class——借助第三方库classnames
一、vue中添加classvue中添加class是一件非常简单的事情:你可以通过传入一个对象:你也可以传入一个数组:甚至是对象和数组混合使用:二、React中添加classReact在JSX给了我们开发者足够多的灵活性,你可以像编写JavaScript代码一样,通过一些逻辑来决定是否添加某些class:这个时候我们可以借助于一个第三方的库:classnames很明显,这是一个用于动态添加classnames的一个库。安装:yarn add classnames原创 2021-12-12 19:34:45 · 968 阅读 · 0 评论 -
React脚手架学习笔记
一、前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题:比如目录结构如何组织划分;比如如何管理文件之间的相互依赖;比如如何管理第三方模块的依赖;比如项目发布前如何压缩、打包项目;等等…现代的前端项目已经越来越复杂了:不会再是在HTML中引入几个css文件,引入几个编写的js文件或者第三方的js文件这么简单;比如css可能是使用less、sass等预处理器进行编写,我们需要将它们转成普通的css才能被浏览器解析;比如JavaScript代码不再原创 2021-12-12 19:05:19 · 493 阅读 · 0 评论 -
React中的CSS——styled-components
一、认识CSS in JS实际上,官方文档也有提到过CSS in JS这种方案:https://zh-hans.reactjs.org/docs/faq-styling.html“CSS-in-JS” 是指一种模式,其中 CSS 由 JavaScript 生成而不是在外部文件中定义;注意此功能并不是 React 的一部分,而是由第三方库提供。 React 对样式如何定义并没有明确态度;在传统的前端开发中,我们通常会将结构(HTML)、样式(CSS)、逻辑(JavaScript)进行分离。原创 2021-12-12 17:07:49 · 2917 阅读 · 1 评论 -
React中的fragment和StrictMode
一、fragment在之前的开发中,我们总是在一个组件中返回内容时包裹一个div元素:我们又希望可以不渲染这样一个div应该如何操作呢?使用FragmentFragment 允许你将子列表分组,而无需向 DOM 添加额外节点;React还提供了Fragment的短语法:它看起来像空标签 <> </>;但是,如果我们需要在Fragment中添加key,那么就不能使用短语法二、StrictModeStrictMode 是一个用来突出显示应用程原创 2021-12-05 16:50:42 · 752 阅读 · 0 评论 -
React Portals的使用
某些情况下,我们希望渲染的内容独立于父组件,甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM元 素上的)。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案:第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment;第二个参数(container)是一个 DOM 元素;通常来讲,当你从组件的 render 方法返回一个元素时,该元素将被挂载到 DOM 节点中离其最近的父节点:然而,有时候将.原创 2021-12-05 16:07:24 · 905 阅读 · 0 评论 -
React ref的转发
在前面学习ref时讲过,ref不能应用于函数式组件:因为函数式组件没有实例,所以不能获取到对应的组件对象但是,在开发中我们可能想要获取函数式组件中某个元素的DOM,这个时候我们应该如何操作呢?方式一:直接传入ref属性(错误的做法)方式二:通过forwardRef高阶函数;import React, {PureComponent, createRef, forwardRef} from 'react';class Home extends PureComponent{ rende原创 2021-12-05 15:48:25 · 431 阅读 · 0 评论 -
React高阶组件
一、认识高阶组件什么是高阶组件呢? 相信很多人都听说过,也用过 高阶函数,它们非常相似,所以我们可以先来回顾一下什么是 高阶函数。高阶函数的维基百科定义:至少满足以下条件之一:接受一个或多个函数作为输入;输出一个函数;JavaScript中比较常见的filter、map、reduce都是高阶函数。那么什么是高阶组件呢?高阶组件的英文是 Higher-Order Components,简称为 HOC;官方的定义:高阶组件是参数为组件,返回值为新组件的函数;我们可以进行如下的解析:原创 2021-11-20 11:27:47 · 7278 阅读 · 0 评论 -
React中的受控组件和非受控组件
一、认识受控组件在React中,HTML表单的处理方式和普通的DOM元素不太一样:表单元素通常会保存在一些内部的state。比如下面的HTML表单元素:这个处理方式是DOM默认处理HTML表单的行为,在用户点击提交时会提交到某个服务器中,并且刷新页面;在React中,并没有禁止这个行为,它依然是有效的;但是通常情况下会使用JavaScript函数来方便的处理表单提交,同时还可以访问用户填写的表单数据;实现这种效果的标准方式是使用“受控组件”;二、受控组件练习HTML 中,表单元素(原创 2021-11-14 18:06:58 · 1166 阅读 · 0 评论 -
React中使用ref
一、如何使用ref在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作:管理焦点,文本选择或媒体播放;触发强制动画;集成第三方 DOM 库;如何创建refs来获取对应的DOM呢?目前有三种方式:方式一:传入字符串使用时通过 this.refs.传入的字符串格式获取对应的元素;import React, { PureComponent } from "react";import PropTypes from原创 2021-11-14 17:04:06 · 9372 阅读 · 0 评论 -
React事件总线
通过Context主要实现的是数据的共享,但是在开发中如果有跨组件之间的事件传递,应该如何操作呢?一、安装events在Vue中我们可以通过Vue的实例,快速实现一个事件总线(EventBus),来完成操作;在React中,我们可以依赖一个使用较多的库 events 来完成对应的操作;我们可以通过npm或者yarn来安装events:二、events常用的API:创建EventEmitter对象:eventBus对象;发出事件:eventBus.emit(“事件名称”, 参数列.原创 2021-11-14 16:15:52 · 1448 阅读 · 1 评论 -
React条件渲染&&列表渲染
一、React条件渲染某些情况下,界面的内容会根据不同的情况显示不同的内容,或者决定是否渲染某部分内容:在vue中,我们会通过指令来控制:比如v-if、v-show;在React中,所有的条件判断都和普通的JavaScript代码一致;常见的条件渲染的方式有哪些呢?方式一:条件判断语句适合逻辑较多的情况方式二:三元运算符适合逻辑比较简单方式三:与运算符&&适合如果条件成立,渲染某一个组件;如果条件不成立,什么内容也不渲染;方式四:v-sho原创 2021-11-01 00:00:28 · 2196 阅读 · 0 评论 -
JSX详解&&React的事件绑定&&事件参数的传递
一、认识JSX这段element变量的声明右侧赋值的标签语法是什么呢?它不是一段字符串(因为没有使用引号包裹),它看起来是一段HTML原生,但是我们能在js中直接给一个变量赋值html吗?其实是不可以的,如果我们讲 type=“text/babel” 去除掉,那么就会出现语法错误;它到底是什么呢?其实它是一段jsx的语法;JSX是什么?JSX是一种JavaScript的语法扩展(eXtension),也在很多地方称之为JavaScript XML,因为看起就是一段XML语法;它用于描述原创 2021-10-31 22:52:08 · 2194 阅读 · 1 评论 -
Fetch发送网络请求
1. 文档https://github.github.io/fetch/https://segmentfault.com/a/11900000038106522. 特点fetch: 原生函数,不再使用XmlHttpRequest对象提交ajax请求老版本浏览器可能不支持3. 相关APIGET请求fetch(url).then(function(response) { return response.json() }).then(function(data) {原创 2021-10-07 10:27:44 · 306 阅读 · 0 评论 -
react 消息订阅-发布机制(解决兄弟组件通信问题)
消息订阅-发布机制工具库: PubSubJS下载: npm install pubsub-js --save使用:1)import PubSub from ‘pubsub-js’ //引入2)PubSub.subscribe(‘delete’, function(data){ }); //订阅3)PubSub.publish(‘delete’, data) //发布消息App组件:import React, {Component} from 'react'import Search原创 2021-10-02 13:44:54 · 204 阅读 · 0 评论 -
react父子组件通信案例
父组件:App组件子组件:Search组件、List组件案例需求:文本框中输入关键词,点击搜索按钮后,下方列表展示出搜索结果实现思路:子组件Search组件向父组件App传递状态(状态包括:是否为第一次打开页面isFirst、是否处于加载中isLoading、搜索出来的列表结果users、请求相关的错误信息err)解决方案:想要实现子向父传递状态,可以采取父向子传递一个方法,然后子中通过this.props.updateAppState({状态名: “状态值”})的方式来实现子组件List.原创 2021-10-01 22:19:29 · 207 阅读 · 0 评论 -
react脚手架配置代理解决跨域问题
一、问题描述:控制台报错,出现跨域问题二、解决方案配置代理:第一种配置方式:在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)第二种配置方式:第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js原创 2021-09-24 00:18:05 · 304 阅读 · 0 评论 -
react 生命周期
1.组件从创建到死亡它会经历一些特定的阶段。2.React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。3.我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。一、react生命周期(旧的)生命周期的三个阶段(旧) 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount() 常用 一.原创 2021-09-22 16:47:54 · 3071 阅读 · 0 评论