许小墨のBlog

react中使用ts创建一个 react+ts 的项目参考地址: https://create-react-app.bootcss.com/docs/getting-started 1npx create-react-app 项目名称 --template typescript 01: ts在类组件中的使用1234567891011121314151617181920212223242526// 定义类组件import React, { Component } from 'react';// 声明 state 的数据类型interface stateType { username: string}// Component 后面接收泛型约束, <属性props约束, 自身 的state约束>class Father extends Component<any, stateType>{ state: stateType = { username:  ...

next.js1.什么是服务端渲染SSRReact.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 React 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记”激活”为客户端上完全可交互的应用程序。 服务器渲染的 React.js 应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。 1.1 后端渲染1$ npx express express-app --view=ejs 1234567891011121314// 服务端渲染 --- 后端渲染 ---- express --- ejs模板// 后端代码router.get('/', function(req, res, next) { res.render('index', { title: 'Express', list: ['a', 'b ...

react-mobile1.项目介绍实现react移动端项目 2.目标： 能够应用CRA+React+Mobx+Antd-mobile开发C端项目 掌握基于React的C端项目开发流程 学会如何应用next优化项目 3.使用技术栈 脚手架：cra dva-cli umi 脚本：ts react版本：react v18 2022年更新 react 17 路由：react-router v6 2021年10-11月 react-router v5 状态管理器：mobx v6 redux redux + react-redux redux + react-redux + 分模块 redux + react-redux + 分模块 + redux-thunk redux + react-redux + 分模块 + redux-saga redux + react-redux + 分模块 + redux-thunk + immutable + redux-immutable redux + react-redux + 分模块 + redux-saga + immuta ...

react-pchttps://www.html.cn/create-react-app/ 1.创建项目12# 现在npx create-react-app admin-react-app --template typescript 熟悉目录结构 123456789101112131415161718- admin-app -node_modules -public -src App.css App.test.tsx App.tsx的测试文件 npm run test 查看测试结果 App.tsx index.css index.tsx react应用程序的入口文件 logo.svg react-app-env.d.ts // 声明文件 // 指令声明对包的依赖关系 reportWebVitals.ts // 测试性能 seupTests.ts // 使用jest做为测试工具 .gitignore package-lock.json package.json README.md tsconfig.json *.d.ts 代表ts的声明文件 2.改造目录结构 ...

《React》课程资料——许小墨 〇、React一、关于React英文官网：https://reactjs.org/ 中文官网：https://zh-hans.reactjs.org/ React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 react在发展过程中，一直跟随原生js的脚步，特别是从v16.0版本开始（用到了class来创建组件） 2015年推出了使用react来编写移动端的app —- react-native 重要版本发版时间 序号 版本号 发版时间 重要更新 1 16 2017年9月26 引入es6的类组件 2 16.3 2018年4月3日 生命周期更新 3 16.4 2018年5月23日 生命周期更新 4 16.8 2019年2月6日 引入 react hooks 5 17.0 2020年10月20日 过渡版本 6 18.0 2022年3月29日 写法改 ...

React综合案例 一、概要1、开发背景因公司某项目的业务数据管理需要，公司决定安排开发人员组成项目小组，为该项目开发一个后台管理系统，实现该项目日常业务数据的展示和维护。 【切勿直接写增删改查】 通用功能 登录 数据的展示 列表 图 …… 数据添加 正常表格添加数据 ….. 开发背景需要体现： 为什么开发项目 开发项目能解决什么问题 比较核心的技术栈及功能实现 2、技术栈使用react框架来完成本次项目的实现，采用前后端分离式开发，使用前端技术有如下一些： react：主框架 react-router-dom：路由包 redux：大规模状态管理库 react-redux：给redux做强化 styled-components ：css-in-js技术的实现 antd：前端组件库（ant design、antd mobile） axios：网络请求库 …… 后端技术有： PHP/JAVA/Go/Python/NodeJS：后端语言 MySQL：数据库软件 (关系型数据库) Redis：数据库软件 (非关系型数据库) La ...

几个不常用的hookuseSyncExternalStore （同步外部仓部数据到组件)1234useEffect(()=>{ setN(store.getState().n)},[store.getState().n])useSyncExternalStore(store.subscribe,store.getState) useInsertionEffect (作用插入style)12345678910111213141516171819202122232425import React,{useInsertionEffect} from 'react'import { useDispatch,useSelector } from 'react-redux';export default function Home() { let state=useSelector(state=>state.user) useInsertionEffect(()=> ...

Redux-thunkhttps://cnodejs.org/api/v1/topics 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849const reducer = ( state = { bannerList: [], proList: [] }, { type, payload }) => { switch (type) { case 'CHANGE_BANNER_LIST': return { ...state, bannerList: payload } case 'CHANGE_PRO_LIST': return { ...state, proList: payload } default: return state }& ...

复习jsx组件(类组件和函数组件)常用hook useState useRef useImperativeHandle useEffect useLayoutEffect useCallback useMemo useContext useDebugValue 路由(react-router-dom) useLocation useHistory useRouteMatch useParams redux(react-redux) useSelector useDispatch 存数据 取数据 useSelector(state=>state.模块名) 改数据 useDispatch 获取一个dispatch dispatch(动作) reducer 分模块：一个reducer 拆分为多个reducer 或者事先就分好了多个reducer combineReducers 把多个reducer合并为一个 key 模块名 value 引入的reducer 异步处理 ：redux-thunk 是一个中间件 createStor ...

Redux（重点）1、简介2013年Facebook提出了Flux架构的思想，引发了很多的实现。2015年，Redux出现，将Flux与函数式编程结合一起，很短时间内就成为了最热门的前端架构。 纯函数:输出完成有输入决定的函数 函数的副作用(side effect):发请求，dom操作，….. 简单说，如果你的UI层非常简单，没有很多互动，Redux就是不必要的，用了反而增加复杂性。 如果你的项目的迭代变得越来越复杂，组件的数量和层级也变得越来越多，越来越深，此时组件间的数据通信就变得异常的复杂和低效，为了解决这个问题，引入了状态管理（redux）从而很好的解决多组件之间的通信问题。 如果需要使用Redux请先进行安装： 网址：https://redux.js.org/introduction/getting-started 1npm i -S redux 作用：项目进行大规模数据管理的工具。 提醒：所有的代码需要从0开始写（不像vuex，选择了vuex后会自带一些代码） 2、三大原则（重点） 单一数据源 整个应用的state（这个state不是组件中的state，请不要混淆）被 ...