摘要：
要解决的问题： 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 阅读全文