史一试
这个作者很懒,什么都没留下…
展开
-
具有相同大小写的相对路径上的“文件名与仅在大小写中已包含的文件名不同”
错误 TS1149:文件名“C:/Project/frontend/scripts/State.ts”与已包含的文件名“…/frontend/scripts/State.ts”不同,仅在大小写中。我已经三次检查了我们参考文献中的大小写,实际文件也有正确的大小写。据我所知,这仅仅是因为相对路径使用了不正确的大小写,或者仅仅是因为相对路径本身?问题是,它在 Mac 和 Linux 上编译得很好,但在 Windows 上会抛出这个错误。在 tsconfig.json 中加入配置。原创 2023-04-11 13:55:09 · 5145 阅读 · 0 评论 -
Styled-component使用与修改antd的样式
styled-component 是一个CSS-In-JS 的函式库,使你可以在JSX 中撰写CSS code,更方便的是他可以接到component 的props 值来动态改变css 样式。将styled-component 引入到component code 后就可以把它当作是一般component 来使用。我的习惯是会把styled-component 跟component 的code 拆开,最后再引入进去使用。透过这种方式我们就可以依赖props 来达成动态改动style。首先透过npm 安装它。原创 2023-04-06 15:18:35 · 855 阅读 · 0 评论 -
Umi4 antDesign Pro 实现多 tabs (keep-alive)
最近umi升级到umi4了,antDesignPro也有升级,看到最新的消息,是antDesignPro已经内置了多tabs功能了,在项目创建好之后,只需要一些简单的配置就可以了。在配置项中新增这2个配置项就可以了,其他的都不需要动,然后刷新页面,效果出来,配置文件:config/config.ts。原创 2023-04-06 10:20:16 · 1612 阅读 · 0 评论 -
Umi&React antd pro 增加前缀打包部署后404与刷新找不到资源问题
在开发中可能一个项目包含多个子项目,如前端项目和后台管理的项目放在同一个服务器目录中,前端项目地址是 www.xxx.com ,后台管理项目地址是 www.xxx.com/admin。这样会遇到一个问题,本地开发是好的,部署后就会有问题,修复方式需要从两方面下手。原创 2023-04-06 09:46:29 · 1339 阅读 · 0 评论 -
antd pro 日期组件英文问题
这个问题的原因是moment.js配置的是英文而导致的,修复的方式也很简单,哪个文件用了日期时间组件,就在哪个组件中导入,moment.js的中文包即可(切记不是在app.tsx中导入,否则不生效)原创 2023-04-06 09:23:58 · 479 阅读 · 0 评论 -
redux中常用的hooks(笔记)
创建sotre。创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre创建sotre原创 2023-02-16 14:05:38 · 258 阅读 · 0 评论 -
useRef 几种使用场景
图修改自 dev.to Demystifying React Hooks: useRef神奇的地方除了可以在不重新渲染的状态下更有价值,也可以直接获取DOM 进入而控制的行为。原创 2023-02-16 09:43:47 · 988 阅读 · 0 评论 -
项目优化 useMemo
由于当元件重新渲染时,复杂的函式又会重复执行一次,为了避免函式又进行不必要的执行,所以透过useMemo 将函式运算完的值存起来。像需要花比较多时间执行的复杂函式都适合使用useMemo。这里示范一下用useMemo 去包住Math.random() 函式,所以除了第一次渲染之外,每次印出memoizedValue 都会出现一样的值。参考: https://ithelp.ithome.com.tw/articles/10269673。原创 2023-02-15 09:19:53 · 273 阅读 · 0 评论 -
项目优化 useCallback
useCallback 真的是效能优化的利器?倒也不一定,看你怎么使用它,过度使用反而只是拖垮效能罢了。原创 2023-02-14 17:17:01 · 71 阅读 · 0 评论 -
既生 useState 何生 useReducer (主讲useReducer)
useState 的底层其实是用useReducer 实践的useReducer 适合较复杂的state,因为我们可以将状态的改变统一放在reducer 去做管理,像useState 的状态改变就会分散在不同的函式里面。原创 2023-02-14 10:51:20 · 406 阅读 · 0 评论 -
重新认识 React Hooks useContext
是被这个API所建立,里面有两个子元件提供者:传值这个值消费者:接收价值这个值const {提供者,消费者 } = testContext;接收一个上下文对象(React.createContext的返回值)并返回该上下文当前的值。上下文当前的值是取决于上层组件距离最近的 prop 中的 value若ButtonGroupComponent.js 用useContext这个语法糖改写,会变更精再来一个使用例子。原创 2023-02-14 09:35:35 · 268 阅读 · 0 评论 -
重新认识 React Hooks useEffect (2)
首先介绍两个概念,纯函数和副作用函数纯函数( Pure Function )对于相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用,这样的函数被称为纯函数。副作用函数( Side effect Function )如果一个函数在运行的过程中,除了返回函数值,还对主调用函数产生附加的影响,这样的函数被称为副作用函数。(比如修改了函数外面的变量)原创 2023-01-29 22:21:43 · 309 阅读 · 1 评论 -
重新认知 React Hooks useState(1)
点击时会发现只触发一次,状态的set函数被批处理了。18之后就不会失效了,默认所有的事件都会进行批处理,以此来进行性能优化。这个 useState 就说这么多,就说这么两句,相信这两句也是比其他两句强,至于强在哪里,也就强在两句比较详情和明了,其他两句就不说两句了,其他两句呢,等你在评论区再说两句,我看了你说的两句之后,我再回你两句!state 存放state 的值,setState 设定state 的值(用来更新state),而initialState 为第一次render 时回传的state 初始值。原创 2023-01-17 13:33:28 · 570 阅读 · 0 评论 -
点进详情巩固 react-router-dom v6
多层嵌套路由需要 < Outlet / > 来指定展示的组件的位置 < Routes > < Route path = '/' element = {这个与v5基本一样,不过就是把Switch改成了Routes,另外components改成了element,但是不好的一点是不向下兼容,如果你还使用Switch,就会报好多error。原创 2023-01-05 11:34:03 · 483 阅读 · 1 评论 -
重学redux之Redux Toolkit(四)
更新第四篇了,这篇是最终篇,没有基础的最好看看前几篇,篇幅有限,更多的是一个指导,如果有不清楚的地方,可评论区留言(最好自己找度娘问问),引用官方说话,先来了解一下是什么东西。原创 2022-12-30 11:09:31 · 665 阅读 · 0 评论 -
重学redux之react-redux(二)
上一节已经讲过redux的基本组成了,下面讲讲使redux与react链接的react-redux.js。原创 2022-12-28 17:54:23 · 82 阅读 · 0 评论 -
重学redux之基本构成(一)
以上就是常用的四大组织部分,看了一些文章,写的特别乱,我真是服辣,下面直接上调用的代码,之后会更新更加高级的用法,慢慢来import {changeCounter } from "./store/actionCreators.js" import store from "./store/index.js" // 订阅数据 store . subscribe(() => {原创 2022-12-28 15:06:35 · 135 阅读 · 0 评论 -
在React中组件间过渡动画如何实现?
用transition 只能作一些最简单的动画,如果稍微复杂一点就做不出来了,这时候就可以用CSS3中的keyframes使用动画的关键词是animation,然后加上定义好的动画名称forwards 代表不循环播放,在上面的设定中我们定义的是:持续2秒钟,由慢到快更多关于keyframes的动画参数,请小友去google吧,下面介绍实现动画更简单的方式,原创 2022-12-19 16:18:35 · 422 阅读 · 0 评论 -
重学React之高阶函数(Higher Order Function)
高阶函数是一个常见的函数,它接受其他函数作为参数,然后返回一个函数。高阶组件实际是一个函数(不管对于class组件还是function组件),它接受一个组件,并返回一个新的组件。这样一来,dataHandler就脱离了具体的数据依赖,例如可以通过withData,把不同请求来源,但处理流程相同的数据,统一使用一个方法来处理,使代码复用程度更高。以函数的角度来看,它为dataHandler函数提供了必要的值,然后最终的逻辑还是交给dataHandler做。看,接受一个组件,然后返回一个新的组件。原创 2022-12-19 15:03:40 · 355 阅读 · 0 评论 -
React 获取DOM的几种方式(详细总结)
在一个组件中,state 属性可以跨渲染周期,也就是在组件被多次渲染之后依旧不变。但是,state 的问题在于一旦修改了它就会造成组件的重新渲染。在react中导入createref, 通过createref() 方式提前创建出来一个对象, 将创建出来的对象绑定到要获取的元素上,使用时获取到创建的对象其中有一个current属性就是对应的元素;在上面的例子中,我用 ref 对象的 current 属性来存储定时器的ID,这样便可以在多次渲染之后依旧保存定时器ID,从而能正常清除定时器。原创 2022-12-09 11:23:40 · 1322 阅读 · 0 评论 -
react evenbus 使用教程
eventBus.emit( ‘事件名’, 参数1, 参数2,…eventBus.emit( ‘事件名’, callback )原创 2022-12-08 16:55:44 · 218 阅读 · 0 评论 -
React 传值方式(超详细不含Redux)
这应该是最常见的一种场景,通过在子组件上写 props,将数据从父组件中传递到子组件,子组件再从 this.props 中获取相应的值,这样可以根据传入值的不同返回不同的状态,即实现组件的复用,实现方式:多层传值上述方法只用于单层数据传递,即父级传向子级,如果子级又存在子级,甚至向下递推,那么父组件要传值给后代组件,就要逐层向下传递,类似下面的情况:子级传向父级React 中似乎没有提供子级向父级直接传值,类似 props 的方法或途径,可以通过一些间接手段实现,开发中常见的处理方式就是子组件调用父原创 2022-12-07 21:41:04 · 114 阅读 · 0 评论 -
React高级备忘录(生命周期)class component
什么是生命周期?就像人有生老病死,component也有类似这样的概念,了解生命周期可以让我们知道如何在「对」的时间做「对」的事。 — Lieutenant过!constructor :初始化static getDerivedStateFromPropscomponentWillMount(即将废弃render :渲染componentDidMount: DOM挂载完成componentWillReceiveProps :props改变时才触发(即将废弃static getDerivedState原创 2022-12-07 19:55:03 · 483 阅读 · 0 评论 -
React事件绑定的几种方式对比(高级进阶)
react 最大的组成部分是JSX,JSX可以通过babel等一些工具,转换成html,但是在JSX中绑定的一些方法function也就失去了this,下面演示几种如果绑定this的方法2. ES6新语法,创建的时候使用箭头函数(不推荐使用)3. 调用的时候,使用箭头函数 (推荐使用)总结调用的时候,使用箭头函数,方便传递参数,而且方便获取调DOM,赶紧用起来,加我微信获取更多教程,赶紧加起来!!!原创 2022-12-07 19:27:05 · 187 阅读 · 0 评论