React
是梦梦啊
只要我够勤快,咸鱼总会翻身哒!
展开
-
【问题记录】next项目打包构建报错(npm WARN deprecated @babel/[email protected])
npm WARN已弃用[email protected]: core-js@❤️.3不再维护,由于存在大量问题,不建议使用。请将您的依赖项升级到core-js的实际版本。更多信息请参见@babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill)。npm WARN notsup不支持引擎[email protected]: wanted: {“node”:“>=12.22.0”}(当前:{“node”:“12.18.3”,“npm”:“6.14.7”})原创 2022-10-13 14:34:06 · 2104 阅读 · 2 评论 -
nextjs项目配置babel和polyfill
next.config.js配置。新建.babelrc, 就好了。原创 2022-10-11 16:07:22 · 1131 阅读 · 1 评论 -
【React: 踩坑】Warning: Function components cannot be given refs. Attempts to access this ref will fail.
这里的RgInput是其他人封装过的input框,后来我换成了antd的input也可以直接使用ref,不需要去包一层forwardRef了。我就想得到了在B框上使用ref,通过调用xxxRef.current?.focus()来实现这个小场景。套了一层forwardRef,并且有了第二个参数ref,在input上传入了ref={ref}有两个input框A、B,在A输入之后要进行校验,如果校验通过,自动聚焦到B的输入框……因为原来父组件通过ref获取了子组件的节点,子组件是函数式组件。...原创 2022-07-29 14:28:09 · 3629 阅读 · 1 评论 -
【面试准备:react】状态管理 mobx?redux?
核心原理:利用defineProperty或Proxy,实现数据的Observble,在get中收集依赖,set中触发依赖绑定的监听函数。mobx通过action去更改state在react组件中使用,observer:将状态和组件建立联系。有没有方法在项目开发中store只需一次注入? 可以,使用Provider,inject,适用于class组件如果是hooks + mobx,可以使用useContext后续待补充...原创 2022-07-03 17:58:19 · 284 阅读 · 0 评论 -
【面试准备:react】hooks的原理
前言:renderWithHooks函数的作用是调用function组件函数的主要函数。function组件初始化:function组件更新:那么renderwithHooks做了些什么呢?在react-r econciler/src/ReactFiberHooks.js中回到原点,renderWithHooks函数的主要作用:1、置空workInProgress树的memoizedState和updateQueue,因为要把新的hooks信息挂载到这两个属性上,然后在组件的 commit阶段,将原创 2022-07-03 08:42:23 · 1234 阅读 · 1 评论 -
【面试准备-react】React.memo和useMemo、useCallback的区别
1、前言2、定义:3、memo和useMemo的区别:1、react.memo()是一个高阶组件,我们可以使用它来包装不想重新渲染的组件,props没有变化,则不会冲性能渲染此组件2、useMemo是一个react hook,我们可以使用它在组件中包装函数。可以使用它来确保该函数中的值仅在依赖项之一发生变化时才重新计算4、定义:5、useMemo和useCallback的区别:1、useCallback优化针对于子组件渲染,返回值是函数。2、useMemo优化针对于当前组件高开销的计算。返回值是缓存原创 2022-06-28 20:17:43 · 1280 阅读 · 0 评论 -
Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?
报错信息:warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?解决:在Modal上加属性: forceRender={true} destroyOnClose={false}参考链接: https://github.com/ant-design/ant-design/issues/21543...原创 2022-03-24 15:40:52 · 1330 阅读 · 0 评论 -
【react踩坑记录2】umijs中如何在首页中document.ejs引用全局变量
首先,在umijs中,document.ejs文件就对应index.html,官方原话:1、 新建 src/pages/document.ejs,umi 约定如果这个文件存在,会作为默认模板2、模板里可通过 context 来获取到 umi 提供的变量,context 包含:route,路由信息,需要打包出多个静态 HTML 时(即配置了 exportStatic 时)有效config,用户配置信息 比如:<link rel="icon" type="image/x-icon" h原创 2022-02-03 12:05:01 · 4814 阅读 · 1 评论 -
【react项目踩坑记录1】antd中table的rowSelection如何设置disabled
有一个需求是将antd中table的复选框直接禁用,查阅了antd文档后,我发现并没有相关的说明,最后查到一个方法,发现可以实现效果,即在rowSelection中加入getCheckboxProps方法,具体方法如下:rowSelection={ selectedRowKeys: selectedRoles, getCheckboxProps(value) { return { disabled: true, }; },}修改前:修改后:...原创 2022-02-03 11:52:07 · 2764 阅读 · 0 评论 -
[React Hook | useMemo、usecallBack] |学习记录
useCallback:把内联回调函数及依赖项数组作为参数传入 useCallback,它将返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新.useCallback(fn,deps) 相当于 useMemo(() => fn, deps)useMemo:把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算如果没有提供依赖项数组,useMemo 在每次渲原创 2021-10-20 18:28:08 · 126 阅读 · 0 评论 -
[Typescript 泛型学习] |学习记录
[Typescript 泛型学习] |学习记录泛型:类型变量:它是一种特殊的变量,只用于表示类型而不是值。泛型函数的两种使用方法:泛型接口:泛型类:泛型约束:泛型:类型变量:它是一种特殊的变量,只用于表示类型而不是值。function identity(arg: T): T { return arg; }T就是类型变量。我们把这个版本的identity函数叫做泛型,因为它可以适用于多个类型。泛型函数的两种使用方法:1、传入所有的参数,包含类型参数:使用了<>括起来而不是()let原创 2021-10-20 16:32:23 · 102 阅读 · 0 评论 -
$ git config credential.helper store
$ git config credential.helper store安装依赖包的时候,输入密码账号错误,再输入一次$ git config credential.helper store就可重新输入!太有用了!!npm cache clean -f 强制清除缓存,需要以管理员身份打开prowershellgit config --list 可以查询name和邮箱https://stackoverflow.com/questions/15381198/remove-credentials-fr原创 2021-09-18 14:56:25 · 2338 阅读 · 0 评论 -
mobx学习
Mobx:https://cn.mobx.js.org/intro/concepts.htmlMST文档:https://mobx-state-tree.js.org/intro/philosophyMST介绍参考文章:https://juejin.im/post/6844903772972384263Cerebral:https://cerebraljs.com/docs/views/angularjs.htmlMobx适合中小型项目1、js语法编写2、es6的装饰器写法babel插件:[原创 2021-05-10 10:05:16 · 309 阅读 · 0 评论 -
ant-design的description组件中给label添加自定义样式
ant-design的description组件中给label添加自定义样式修改前:<Descriptions.Item label={"减免类型">修改后:<Descriptions.Item label={ <span>{"减免类型"}<span style={{color:'red', paddingLeft:'10px',verticalAlign:'middle'}}>*</span></span> }>原创 2021-04-19 11:26:18 · 3577 阅读 · 0 评论 -
react学习记录(一)
1、纯函数,不能改变传入的参数,例如:function add(a,b) { return a+b } 就是一个纯函数,所有react组件都必须像纯函数一样保证props不被修改2、组件分为函数组件和class组件,分别书写为:函数组件:function Welcome(props){ return <h1>Hello, {props.name}</h1>}它接收唯一带有数据的“props”(代表属性)对象并返回一个react元素class组件:class Wel原创 2020-10-27 17:29:40 · 144 阅读 · 0 评论