11 2020 档案
摘要：换了台笔记本，重新安装环境，遇到些奇怪的问题 1: create-react-app my-app --typescript 无法创建一个TS的React项目 必须用create-react-app my-app --template typescript 命令 可能是版本关系吧 2：创建出的项目，
阅读全文
摘要：关于require和import，先明确一些基础概念 1：require属于commonjs(ES5)规范，import属于ES6规范。 2：require/export 一般用于服务端(NodeJS)开发。 import由于是ES6规范，需要使用babel-loader转换为require 3：浏
阅读全文
摘要：我们知道React中的Class组件，其事件处理函数要么bind(this)，要么用箭头函数( ()=> )，否则this指针会是undefined 原因如下： class Logger { printName(name = 'there') { this.print(`Hello ${name}`
阅读全文
摘要：1：Object.assign() 把source对象中所有可枚举的属性copy到target对象中。 可以用来合并两个对象的属性。 const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget
阅读全文
摘要：问题1 ：ES6中的class 与 ES5中function的关系 ES6 中： class Person { constructor(name) { this.name = name; } sayHello() { return 'hello, I am ' + this.name; } } va
阅读全文
摘要：要解决的问题： 1：JWT存在local storage和cookie里面有什么不同，如何选择？ 2：使用ExpressJS作为前端React应用的Web Server。 登录、登出等请求都会由ExpressJS代码处理。 先来看第一个问题,local storage 和 cookie的方案各自优缺
阅读全文
摘要：在后台接口还没准备好的时候，我们可能会需要模拟数据来支持前端开发。 继续使用之前的代码示例：https://github.com/992990831/modernization/tree/main/full-demo npm install axios --save npm install mock
阅读全文
摘要：之前讲述了React-router的使用方法，这一篇讲述其实现原理 1：react-router的Link组件会被翻译为a标签， 其query、to、hash等属性都会被翻译为href属性 2：通过history.listen监听路由变化 以下源码可以在react-router.js中找到 3：ma
阅读全文
摘要：由于篇幅原因，再开一个性能优化的帖子，讲一下怎么做lazy loading和code split 先介绍一个VS Code插件，可以查看import package的大小。 插件名：Import Cost import React, { Suspense, lazy } from 'react';
阅读全文
摘要：测试框架：Jest + Enzyme 一句话来说，Jest的作用是跑test case， Enzyme的作用是在内存中渲染React组件，并对生成的DOM做比较。 1: 安装Enzyme: npm install --save-dev enzyme npm install --save-dev en
阅读全文
摘要：步骤一：使用React + Styled Component + Type Script实现响应式布局，效果如下 PC模式 Mobile模式 以上效果没有使用三方控件，都是原生css实现。代码示例：https://github.com/992990831/modernization/tree/mai
阅读全文
摘要：useMemo, useCallBack 这两个概念并非看上去那么容易理解，使用的不好的话，也很难带来任何的性能提升。 先说useMemo, 简单来说就是把返回值缓存起来，并监控一个变量。 如果被监控的变量不变，则返回值不变。以下是两个适用useMemo的场景 import React, { FC,
阅读全文
摘要：官网地址：https://styled-components.com/docs/basics 使用Styled Component的几大理由 1）Scoped Style(范围限定的样式) 不用担心引用的css文件被其他人修改 2）CSS in JS 可以在JS中使用component内部变量做条件
阅读全文
摘要：示例1：useMounted export const useMounted = () => { const isMounted = useRef<boolean>(false); useEffect(() => { isMounted.current = true; return () => {
阅读全文
摘要：useState & useEffect useState与useEffect经常一起被使用，用法简单，这里不多做介绍。以下一些概念需要搞清楚： 1）仅在函数组件的头部调用Hook。不要在循环体中、条件判断或嵌套方法中调用Hook。 https://reactjs.org/docs/hooks-ru
阅读全文
摘要：官网参考地址： https://reactrouter.com/web/example/basic 基础用法： import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; <Router> <div
阅读全文
摘要：安装： npm install axios --save 新建TUAPI.js import axios from 'axios'; export const TUAPI = axios.create({ baseURL: process.env.REACT_APP_BASE_URL, respon
阅读全文
摘要：ExpressJS常用中间件： npm install cookie-parser --save npm install body-parser --save npm install compression --save npm install errorhandler --save npm ins
阅读全文
摘要：react-app-rewired的作用是在不eject的情况下修改webpack配置 目标：修改build的output目录 1: npm install react-app-rewired --save-dev 2: 根目录下新建文件：config-overrides.js 3：添加以下配置 m
阅读全文
摘要：使用--typescript参数新建React项目 create-react-app react-ts-demo --template typescript 新建Header.tsx文件，加入以下代码： import React, { FC } from 'react'; interface MyP
阅读全文
