React
文章平均质量分 73
水痕01
暂停更新博客
展开
-
使用 rtk-query 优化你的数据请求
一、目前前端常见的发起ajax请求的方式1、使用原生的ajax请求2、使用jquery封装好的ajax请求3、使用fetch发起请求4、第三方的比如axios请求5、angular中自带的HttpClient就目前前端框架开发中来说我们在开发vue、react的时候一般都是使用fetch或axios自己封装一层来与后端数据交互,至于angular肯定是用自带的HttpClient请求方式,但是依然存在几个致命的弱点,1、对当前请求数据不能缓存,2、一个页面上由多个组件组成,但是刚好有遇原创 2021-09-15 17:37:17 · 3034 阅读 · 2 评论 -
react单元测试和集成测试
一、TDD(Test-Driven-Development)的认识TDD简单点来说就是测试驱动开发,这里说的测试并不是指开发团队中的测试小组来驱动开发者写代码,而是开发人员根据业务场景编写的单元测试文件,通过单元测试文件来写业务代码,直到业务代码都通过单元测试为止。整个环节可以拆分为:二、自己手动实践一个TDD1、创建一个react项目npx create-react-app react-demo01 --template typescript2、可以将react配置映射出来,查看r原创 2021-08-02 11:00:52 · 669 阅读 · 0 评论 -
前端代码接入单元测试一
本篇是前端单元测试的第一篇文章,从基础讲解然后到前端的react单元测试及node的单元测试一、单元测试发展1、为什么要有单元测试软件测试是一种实际输出与预期输出之间的审核或者比较过程测试可以尽早发现BUG测试可以提高代码质量测试可以让我们自信地重构2、手动的测试代码(或者叫肉眼测试)function add(a, b) { return a + b;}console.assert(add(4, 2) == 7, '测试add函数');3、测试框架与手工断言的.原创 2021-07-28 16:22:07 · 274 阅读 · 0 评论 -
vscode配置react样式模块化开发代码提示
二、配置css模块化的代码提示1、关于css模块化开发可以参考文档,参考文档,这样写代码没样式名的提示也不是很友好的,以下配置可以提示类名的方式2、安装依赖包npm install typescript-plugin-css-modules -D、在tsconfig.json中配置插件的使用{ "compilerOptions": { ... // 添加下面配置 "plugins": [ { "name": "typescri原创 2021-07-27 20:13:56 · 871 阅读 · 0 评论 -
详解企业级使用Graphql开发项目
一、基本环境搭建1、创建一个react项目npx create-react-app react-graphql --template typescript2、根据文档在react中配置Graphql的环境,链接地址安装依赖包npm install @apollo/client graphql在index.ts中配置连接graphql的后端地址import { ApolloClient, InMemoryCache } from '@apollo/client';cons原创 2021-06-25 20:49:12 · 382 阅读 · 2 评论 -
react项目中使用react-query包
一、react query基本介绍1、官网地址2、安装依赖包npm i react-query3、在react项目的入口文件中配置import React from 'react';import ReactDOM from 'react-dom';import App from './App';import reportWebVitals from './reportWebVitals';import { QueryClient, QueryClientProvider }原创 2021-06-19 10:07:30 · 1550 阅读 · 0 评论 -
使用工具更加规范你的react项目
一、配置prettier1、使用npx初始化一个项目,这里我使用typescript模板的方式构建项目npx create-react-app react-demo1 --template typescript2、参考官方的方式配置,官方地址3、安装插件包npm install --save-dev --save-exact prettier4、在根目录下创建一个.prettierrc和.prettierignore的文件prettierr文件是配置prettierr规则原创 2021-06-04 20:54:44 · 491 阅读 · 1 评论 -
React的性能优化(useMemo和useCallback)的使用
一、业务场景React是一个用于构建用户界面的javascript的库,主要负责将数据转换为视图,保证数据和视图的统一,react在每次数据更新的时候都会重新render来保证数据和视图的统一,但是当父组件内部数据的变化,在父组件下挂载的所有子组件也会重新渲染,因为react默认会全部渲染所有的组件,包括子组件的子组件,这就造成不必要的浪费。1、使用类定义一个父组件export default class Parent extends React.Component { state = {原创 2021-05-23 10:29:47 · 904 阅读 · 1 评论 -
使用redux-toolkit简化react中redux的操作
一、基本使用1、官网地址2、在项目中直接安装npm install @reduxjs/toolkit react-redux3、查看@reduxjs/toolkit的依赖包其中自动集成了thunk处理异步的包..."dependencies": { "immer": "^9.0.1", "redux": "^4.0.0", "redux-thunk": "^2.3.0", "reselect": "^4.0.0" },...4、在st原创 2021-05-15 16:22:02 · 1365 阅读 · 0 评论 -
一文全名搞懂react函数组件开发中的hook
一、hook的认识Hook是react16.8的新增特性。它可以让你在不编写class的情况下使用state的特性,换句话说就是你使用函数组件也可以使用state等属性有了hook,你再也不用写class组件了,所有的组件都可以是函数组件有了hook,生命周期钩子函数可以丢一边了,函数组件中不需要考虑生命周期钩子函数二、state的使用state是状态属性,与之对应的是setState是设置状态属性的,一般情况都是成对的出现定义方式const [属性名称,set属性名称] = us原创 2021-02-18 20:51:19 · 711 阅读 · 0 评论 -
express+react实现上传文件
一、使用express+mongodb搭建后端服务1、安装依赖包npm install express# 处理跨域的中间件npm install cors npm install mongoose# 上传文件的npm install multer2、express的app.js文件const express = require("express");const path = require("path");const bodyParser = require("body-pa原创 2020-10-18 21:35:59 · 666 阅读 · 0 评论 -
手动使用typescript+webpack搭建react开发环境(二路由的使用)
一、简单的使用路由1、需要安装依赖包npm install react-router-dom2、简单创建2个组件3、在src/index.tsx文件中配置路由的使用import React from 'react';import ReactDOM from 'react-dom';import { Provider } from 'react-redux';import { BrowserRouter as Router, Route, Switch, Link } from原创 2020-10-01 16:06:56 · 378 阅读 · 0 评论 -
手动使用typescript+webpack搭建react开发环境(一)
一、项目基础构建1、创建一个文件,并且初始化npm init -ytsc --inittouch .gitignore2、安装依赖包# 基础的包npm install react react-dom @types/react @types/react-dom react-router-dom @types/react-router-dom # 安装关于webpack的包npm install webpack webpack-cli webpack-dev-server html-原创 2020-10-01 10:28:18 · 764 阅读 · 0 评论 -
redux的使用及优化
一、什么是redux1、redux的主要作用主要作用是方便组件之间的通讯不使用redux的时候组件之间只能通过传值的方式进行通讯,如果组件多了,嵌套多了,通讯方式就只能一层一层的传递,比较麻烦一个项目中只有一个store,在根组件中使用上下文的方式传递到整个项目的根组件下2、主要的流程components表示我们的react组件,在组件中发出一个命令到action中action使用dispatch返回一个带type类型的对象到reducersreducer中使用sw原创 2020-09-22 10:40:18 · 543 阅读 · 0 评论 -
react项目配置成手机端rem像素单位
一、使用react-app-rewired包修改react配置1、安装基础的包npm install react-app-rewired customize-cra -D2、在项目的根目录下创建一个config-overrides.js文件const { override } = require('customize-cra');module.exports = {};3、安装样式转换的包npm install less -D4、安装postcss-pxtorem包n原创 2020-09-04 08:09:27 · 699 阅读 · 0 评论 -
Redux入门案例todo
redux入门案例写在一个页面中实现,增加数据与删除数据(官方版的简写)[忽视项目中的命名]'use strict';import React,{Component} from 'react';import {createStore} from "redux";function add(text) { return{ type:"ADD", value:t原创 2017-03-08 14:48:54 · 1222 阅读 · 0 评论 -
MOBX的入门案例
直接上代码demo主要把握几个词observable和observer/** * @author:水痕 * @time:2017-03-20 11:36 * @email:[email protected] * @version:1.0 * @fileName:index * @direction: * @title: */'use strict';import {observa原创 2017-03-20 16:53:40 · 3226 阅读 · 0 评论 -
MOBX在项目开发中的具体使用
一、MOBX的认识1、mobx是react或者reactNative开发过程中进行状态管理的一个状态机,类似redux和vuex一样的,中文官方文档,相对于redux或者vuex简单直白,mobx使用的是ES7的装饰器,因此需要配置下。2、所谓的状态机,不管是redux、mobx、vuex都是采用观察者模式来开发的,可以简单的把状态机(状态)理解为项目中的全局变量,只是这个全局变量采用指定的方式原创 2017-12-16 13:28:36 · 7463 阅读 · 1 评论 -
React16.8定义上下文的3种方式
一、Context(上下文)的认识1、在某些场景下,你想在整个组件树中传递数据,但却不想手动地在每一层传递属性。你可以直接在 React 中使用强大的contextAPI解决上述问题2、在一个典型的 React 应用中,数据是通过 props 属性自上而下(由父及子)进行传递的,但这种做法对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI 主题),这些属性是应用程序中许多组件都需要的。...原创 2019-05-24 16:42:03 · 943 阅读 · 0 评论 -
React16.8中关于children和render props的认知
一、组件的创建方式1、使用createClass方式创建(已经被淘汰了)2、类组件import React, { Component } from 'react'export default class Components1 extends Component { render() { return <div /> }}3、函数组件(比较推...原创 2019-05-27 10:17:44 · 1126 阅读 · 0 评论 -
React16.8中父组件获取子组件数据的3中方式
一、类组件的情况下1、定义父组件(直接使用ref)export default class UserRef1 extends Component { constructor(props) { super(props); this.child = React.createRef(); } focus = () => { console.log(thi...原创 2019-05-23 16:40:26 · 8511 阅读 · 1 评论 -
React16.8组件代码复用的4种方式
在react项目开发中经常会遇到有一些代码复用的问题,现介绍几种常见的方式一、直接把相同的代码复制一份到需要使用的组件中(非常low的方式)二、创建一个高阶组件,将复用的代码存放到高阶组件中,需要使用的组件中直接复用1、定义一个高阶组件import React from 'react';function withCounter(Component) { return cla...原创 2019-05-24 10:02:11 · 3237 阅读 · 0 评论 -
creact-react-app创建react项目配置scss
一、安装1、安装loaderinstall sass-loader node-sass --save-dev二、配置1、找到node_modules/react-scripts/config/webpack.config.dev.js文件和webpack.config.prod.js2、新增圈住的地方 { loader: require.resolve('file-loader'),原创 2017-11-03 12:58:23 · 2945 阅读 · 0 评论 -
第四章:组件之间的通讯
一、react组件之间的通讯主要有1、父组件到子组件2、子组件到父组件3、相邻组件4、不相关的两个组件二、父组件到子组件(常见) 父组件传递参数到子组件在开发中比较常见,react提供了一个props来进行传递1、定义子组件**ListItem.tsx**import * as React from 'react';//定义一个接口规范外面传递进来的参数类型export inter原创 2017-08-01 14:49:35 · 682 阅读 · 0 评论 -
第三章:关于事件与样式
一、react中事件绑定与原生js的对比1、原生js中绑定事件的方式1、在行内直接使用<input type="button" value="按钮" onclick="alert()"/>2、 DOM0的绑定方法el.onclick = function(){ //}3、DOM3事件绑定方式el.addEventListener('click',()=>{},false);el.a原创 2017-07-30 11:49:30 · 547 阅读 · 0 评论 -
Redux-form嵌套到实际项目开发案例八
初始化数据|demo|----webpack.config.js|----package.json|----index.html //引入了bootstrap.css|----node_modules //存放工具包|----src |--------index.js //入口文件|--------action|------------index.js|--------com原创 2017-04-11 16:09:09 · 2282 阅读 · 0 评论 -
React组件属性部类(propTypes)校验
PropTypes提供了多种验证器1、JavaScript基础数据类型,包括数组、布尔、函数、数字、对象、字符串optionalArray: React.PropTypes.array,optionalBool: React.PropTypes.bool,optionalFunc: React.PropTypes.func,optionalNumber: React.PropTypes.nu原创 2017-03-29 15:27:52 · 2474 阅读 · 0 评论 -
关于React中的路由的react-router的案例
项目目录结构 1.package.json文件内容{ "name": "react-router-demo01", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1",原创 2017-03-07 09:16:10 · 1752 阅读 · 0 评论 -
react-redux连接react与redux入门案例[分目录结构]
一、实现一个点击点击翻译文字内容二、效果图如下:三、项目结构|--src //项目文件|----actions //存放actions的文件|------index.js|----components //存放展示组件|------Hello.jsx|----container //存放容器组件|------ConnectHello.js|----reducers /原创 2017-03-10 14:48:15 · 2482 阅读 · 1 评论 -
react-redux连接react与redux入门案例
利用react-redux实现一个简单的翻译案例 要实现react组件与redux的连接用到第三方组件react-redux一、现在简单的介绍下react-rendux组件的API方法安装npm install react-redux --save-dev到你的工程项目中Provider这个属性的使用:我们相当于在最顶层的组件中外套这个属性就可以。传递的参数store,那么在所有的组件中都原创 2017-03-09 13:00:08 · 660 阅读 · 0 评论 -
React的数据载体state、props与context
1.state严格来说是内部状态或者说是局部状态,在React组件中是比较常见的: state的方法主要有this.state = {}一般是在构造函数constructor中设置值this.setState({xx:xxx})用于给state赋值this.state.xx 用于取值补充说明 取值一般会用ES6中的解析赋值操作let {xx,xx,xx} = this.state2.pr原创 2017-03-03 20:17:49 · 1633 阅读 · 0 评论 -
Redux 简明教程
原文链接(保持更新):https://github.com/kenberkeley/redux-simple-tutorial写在前面本教程深入浅出,配套 简明教程、进阶教程(源码精读)以及文档注释丰满的 Demo 等一条龙服务§ 为什么要用 Redux当然还有 Flux、Reflux、Mobx 等状态管理库可供选择抛开需求讲实用性都是耍流氓,因此下面由转载 2017-03-03 10:28:51 · 546 阅读 · 0 评论 -
关于ES6+React+webpack的环境搭建
关于ES+React+webpack的环境搭建1.全局安装webpacknpm install webpack -g2.安装webpack-dev-server(全局可选)npm install webpack-dev-server -g这个是创建一个本地服务器,及热部署的轻量开发工具3.创建项目并初始化项目npm init一路回车就好了4.安装依赖文件npm install webpack web原创 2017-03-01 09:52:24 · 844 阅读 · 0 评论 -
React组件的生命周期
React中组件的生命周期函数,又叫钩子函数React的生命周期分两类来说明 一、从组件的一般挂载与卸载的过程来分 二、从组件数据更新过程来划分 从组件的一般挂载与卸载的过程来分 :constructor ES6创建方式中的构造函数,在组件实例化的时候就会调用,创建组件的时候会默认添加constructor函数,如果你要添加state状态等的就要手动添加,不然可以省去。comp原创 2017-03-02 11:35:17 · 2307 阅读 · 0 评论 -
理解redux和redux的中间件redux-thunk的认识
一、Action的认识简单点说Action就是一个对象,一个必须带key为type的对象[value是自己定义的],其他的key就根据用户自己喜好自己定义: 以下都是action的定义 1、{type:”ADD”}2、{type:”ADD”,key1:”“,key2:”“}二、Reducer的认识别主观意识就是类似数组中的reduce,也不是只能定义reducer,它仅仅是一个称呼,纯函原创 2017-03-28 10:29:42 · 31242 阅读 · 0 评论 -
React-Redux链接React与Redux开发项目
一、本案例在 理解redux和redux的中间件redux-thunk的认识基础上及结合fetch如果有不清楚的可以查看下-fetch下一代ajax请求数据的封装用户在页面上点击按钮触发事件调用数据二、项目结构|react-redux-demo|----webpack.config.js|----package.json|----index.html|----node_modules //原创 2017-03-29 15:15:45 · 1741 阅读 · 0 评论 -
第二章:typescript与js开发react的区别
一、从定义文件格式方面说1、传统的开发模式可以定义js文件或者jsx文件2、利用ts开发定义的文件格式tsx二、定义state的状态来说1、传统的方式直接在构造函数中使用constructor(){ this.state = { num1:10 }}2、使用ts开发过程中需要先定义一个接口,规范数据类型,通过泛型传入到类中//定义一个接口规范state的类原创 2017-07-30 11:48:36 · 9566 阅读 · 0 评论 -
使用typescript构建react项目环境搭建
一、使用typescript开发react项目常见有两种方式1、使用webpack手动配置2、使用create-react-app脚手架二、使用webpack手动配置1、全局安装webpacknpm install webpack -g# 本人一般会安装这个服务的npm install webpack-dev-server -g2、创建一个项目目录3、进入项目文件,在黑窗口中输入命令np原创 2017-07-29 12:58:50 · 4087 阅读 · 0 评论 -
creact-react-app创建项目跨域的处理
最近求职中发现很多公司都在用react和vue开发,而自己最近一直使用与深入研究的是angular2+系列,出去找工作人家根本不用angular2+,虽然自己对react也深入研究过并使用过,只是好久没用,面试也能说出个八九分,上班也可以直接拿起键盘干活的,只是每个公司用的状态机不一样而已,但是还是遭到别人的怀疑,vue我是没项目经验,只是因为外面都在用自己不得不研究,虽然不能说精通,但是做项目是随原创 2017-11-02 15:41:32 · 7746 阅读 · 0 评论 -
解析react-redux官方案例todo
我相信很多小伙伴在学习react-redux都会涉及到一个todo的官方案例,不过刚刚开始接触的人可能看十几次都没感觉,现在我本人对它的总结下一、项目的构建1、本项目我使用前端脚手架yeoman构建参考2、创建一个todo项目yo react-webpack3、安装别的依赖包npm install redux --savenpm install react-redux --savenpm原创 2017-08-06 16:18:22 · 945 阅读 · 0 评论