丑小鸭变黑天鹅的博客

react后台管理带权限介绍本项目为学习react之后，练习的项目使用说明前端：gitee地址 采用最新的react17+react-router-domV6+redux+react-redux+axios+ES6 + Webpack + Antd4.x等技术前端项目拉取之后npm installnpm start后端: gitee地址使用 Node + Express + Mongodb 等技术后端运行步骤确保启动 mongodb 服务启动服务器应用: npm start项

扩展知识一、setState二、lazyLoad三、Hooks1. React Hook/Hooks是什么?2. 三个常用的Hook3. State Hook4. Effect Hook5. Ref Hook6、示例四、Fragment五、Context理解使用注意示例六、组件优化Component的2个问题效率高的做法原因解决示例七、render props如何向组件内部动态传入带内容的结构(标签)?children propsrender props示例八、错误边界理解：特点：使用方式：示例九、组件通信

redux一、redux理解1、学习文档2、redux是什么3、什么情况下需要使用redux4、redux工作流程二、redux的三个核心概念一、redux理解1、学习文档英文文档: https://redux.js.org/中文文档: http://www.redux.org.cn/Github: https://github.com/reactjs/redux2、redux是什么redux是一个专门用于做状态管理的JS库(不是react插件库)。它可以用在react, angula

React路由一、SPA的理解二、路由的理解三、react-router-dom1、理解2、相关API四、路由的基本使用五、NavLink的使用（v5和v6有区别）六、对NavLink二次封装七、Switch的使用(v6已经移除switch，替换为Routes）八、解决多级路径刷新页面样式丢失的问题九、路由的严格匹配与模糊匹配十、Redirect的使用（v6版本已经废除，用Navigate 代替）十一、嵌套路由（v5和v6使用起来不一样）十二、向路由组件传递params参数十三、向路由组件传递search参

消息订阅与发布机制一、没有用消息订阅与发布机制的案例二、使用消息订阅与发布机制的案例三、fetch发送请求四、总结一、没有用消息订阅与发布机制的案例如果没有使用消息订阅与发布机制，兄弟组件想互相通信智能通过他们的父组件来进行管理，看一个github搜索案例项目结构index.js//引入react核心库import React from 'react'//引入ReactDOMimport ReactDOM from 'react-dom'//引入Appimport App from '

脚手架配置代理（React ajax）一、理解二、常用的ajax请求库三、配置代理的第一种方法四、配置代理的第二种方法五、总结方法一方法二一、理解React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)二、常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用封装XmlHttpRequest对象的ajaxpromise

React项目写了setupProxy.js出现了crbug/1173575, non-JS module files deprecated这样的问题一、问题描述二、问题解决一、问题描述最近学习react，网课中老师讲解setupProxy.js文件配置跨域代理，按照老师的写法出现了问题，我才可能是http-proxy-middleware版本不一样导致的看一下老师的写法const proxy = require('http-proxy-middleware')module.exports =

React脚手架一、使用create-react-app创建react应用1、react脚手架2、创建项目并启动3、react脚手架项目结构4、功能界面的组件化编码流程（通用）5、用脚手架写一个简单示例二、组件的组合使用（综合实例）一、使用create-react-app创建react应用1、react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目1）. 包含了所有需要的配置（语法检查、jsx编译、devServer…）2）. 下载好了所有相关的依赖3）. 可以直接运行

虚拟DOM与DOM Diffing算法React Diff原理深入分析1、 Diffing 算法1）逐层比较2）、对比同类型的组件元素3）、对比同一类型的元素4）、对子节点进行递归5）、Keys2、用例子验证一下Diffing算法3、key的作用（key的内部原理）React Diff原理深入分析在了解Diff前，先看下React的虚拟DOM的结构这是html结构这是React渲染html时的js代码 自己可以在babel上试试由此可以看出这是一个树结构React在调用render方

组件的生命周期

React学习笔记---面向组件编程

React学习笔记（一）