React<umi+小笔记>

Posted 2023-03-13

参考技术A

本篇文章主要介绍的一个 React小白 ，从 0 使用 umi 搭建 React 项目的过程，记录了相关 umi 的使用以及 react 的相关知识点~

🌟持续更新中...🌟

解决：采用links引入，favicon适合引入对应链接的图标

Hook概览 ，建议仔细阅读文档

例子：
这是我简单写的一个切换用户名的Model案例
需要留意的地方我已经用 红色 标记出来了，尤其是 ,如果没有的话，默认会接受一个 props ，在路由页面传参中有提到

约定式路由 ,如果按照官方推荐的目录结构，是可以不用配置路由表的，它会自动生成

这里有两种写法，一种是放在 route 路由表里，另一种是直接在指定页面写，看个人需求。
写法1: wrappers
写法2: 权限路由 👍

👍 React 中组件间通信的几种方式
子用父： 将数据绑定到子组件上，子组件通过props接收；

父用子： 通过 useRef() 定义，并在子组件上绑定ref, .current 获取DOM；

子改父： 通过在子组件上绑定一个关联父组件的方法数据

父改子： 通过 useRef() 定义，并在子组件上绑定ref, .current 调用子组件定义修改值的方法；

报错信息：
**Warning:**devScripts.js:6523 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

如果你在封装的组件上使用ref，那你就会发现这个错误，这就属于函数式调用，需要 useRef forwardRef 的使用,同时还能配合 useImperativeHandlede 来暴露子组件的数值或者方法给父组件使用。
👍 React函数式组件值之useRef()和useImperativeHandle()
👍 React Hooks系列之useImperativeHandle

👍 React中的html转义写法

umi-request配置说明
本地端口号修改
如何获取后端的相应数据 data
src/utils/request.js

使用

官方文档解释

解决方法

使用 State Hook

下面的预期在某些时候并不是你想要的

例如：在移动端滑动加载更多 list，根据搜索条件去更新 list，每次条件的变化就需要重新让 list = [],然后再去获取新的 list，此时就会遇到这种 list 不能及时更新清空的问题

解决：

outputPath 配置
outputPath:dist/shunfeng ,打包后会生成 dist 文件下 shunfeng 文件下的其他文件

umi中使用sass只需安装 @umijs/plugin-sass

安装完后无需配置，umi会自己识别。默认使用dart sass , 如果需要使用node-sass,才需要想官网那样 配置

区别 ：传入的第一个参数不同

React.createElement()
它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。

React.cloneElement()
React.cloneElement() 与 React.createElement() 相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而旧的子元素将被替换。将保留原始元素的键和引用。

配置 dynamicimport