随笔分类 - JavaScript前端框架相关
摘要：一、起因： 1.super引用父类构造函数，在调用super之前，不能用this。 2.在使用super()之后，构造函数结束之前，this.props的值为undefined。 二、作用：使用super(props)，调用父类构造函数，并初始化this.props。
阅读全文
摘要：key的作用： 同一层级的节点，通过唯一的key进行区分，key是vnode的唯一标记，参与对比新旧vnode。 避免使用index作为key: 当index作为key的时候，新插入一条数据的时候，它后面列表项的key都会变化，key变化的列表项都会重新渲染，但其实它们的新旧vnode是可以复用的，
阅读全文
摘要：v-for优先级高于v-if，如果v-for和v-if写在一起，会先执行v-for，循环出列表，然后用v-if判断每一个列表项 应该使用计算属性，先将不需要的值过滤掉 // DOM <ul> <li v-for="item in filterList" :key="item.id"> {{ item
阅读全文
摘要：v-if：如果条件不成立不会渲染当前指令所在节点的DOM元素 v-show：只是切换当前DOM的显示与隐藏
阅读全文
摘要：一、概念 React 性能优化的起因： 在React中，默认情况下，当父组件重渲染时，子组件也会重渲染。 在React中，子组件默认随父组件更新而更新。 React 性能优化的方向：通过缓存，减少渲染次数、减少重复计算。 React Hook性能优化的总结：memo缓存组件、useCallback缓
阅读全文
摘要：v-model是语法糖： <input v-model="sth" /> <input v-bind:value="sth" v-on:input="sth = $event.target.value" /> <input :value="sth" @input="sth = $event.targ
阅读全文
摘要：一、基本概念： 1.state：存放状态 2.getters：加工state成员给外界 3.actions：异步操作 4.mutations：state成员操作 5.modules：模块化状态管理 二、用于Vue组件： 1.dispatch：提交异步操作 2.commit：提交同步操作 3.mapS
阅读全文
摘要：一、路由模式： 1.默认hash模式：后面有井号，如http://www.aaa.com/#/hello，不需要服务端支持，无特殊需要一般选择这个 2.H5 history模式：后面没有井号，如http://www.aaa.com/hello，需要服务端支持 二、路由配置： 1.动态路由：动态路由的
阅读全文
摘要：一、生命周期： 1.单个组件： （1）挂载阶段： beforeCreate created（Vue实例初始化完成，并没有开始渲染） beforeMount mounted（页面渲染完成） （2）更新阶段： beforeUpdate updated （3）销毁阶段： beforeDestroy（解除绑
阅读全文
摘要：一、模板（指令、插值）： 使用v-bind指令设置HTML属性，如v-bind:class="{ black: isBlack, yellow: isYellow }"，缩写为:class="{ black: isBlack, yellow: isYellow }" 使用v-on指令绑定HTML事件
阅读全文
摘要：进入项目根目录 一、安装eslint-plugin-react-hooks： cnpm i -D eslint-plugin-react-hooks 二、配置ESLint： 1.打开项目根目录的package.json 2.把 "eslintConfig": { "extends": [ "reac
阅读全文
摘要：在项目文件夹运行cmd 切换npm源和yarn源为淘宝源： npm config set registry https://registry.npm.taobao.org yarn config set registry https://registry.npm.taobao.org 安装creat
阅读全文
摘要：以管理员身份运行cmd 安装cnpm： npm i -g cnpm --registry=https://registry.npm.taobao.org 安装Vue CLI命令行接口： cnpm i -g @vue/cli 查看Vue CLI版本： vue --version 升级Vue CLI版本
阅读全文
摘要：在项目根目录： cnpm install --save-dev babel-plugin-import less less-loader@5.0.0 style-loader css-loader 打开项目根目录的config-overrides.js， 把 const { override, fi
阅读全文
摘要：打开设置标签页： 点击左下角的齿轮按钮，点击“设置” 在设置标签页顶部的搜索框输入： includeLanguages 点击搜索结果底部的“添加项”，输入键和值： 键： javascript 值： javascriptreact 点击“确定”
阅读全文
摘要：一、修改标签页图标： 在项目根目录打开cmd 使用vscode打开项目根目录public文件夹下的index.html： code public/index.html 把 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 改为 <link rel
阅读全文
摘要：安装React-router： cnpm i react-router-dom --save 一、最基本示例： 在src目录下有index.js、app.js，再新建index.redux.js，分别修改这几个文件的内容如下： index.js： import React from 'react';
阅读全文
摘要：安装Redux： cnpm i redux --save 一、手动连接Redux处理同步，示例： 在src目录下有index.js、app.js，再新建index.redux.js，分别修改这几个文件的内容如下： index.js： import React from 'react'; import
阅读全文
摘要：在项目根目录： cnpm install antd-mobile --savecnpm install react-app-rewired customize-cra --save-devcnpm install babel-plugin-import --save-devcnpm install
阅读全文
摘要：一、类组件的生命周期： https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 二、在函数组件中使用Hook函数时，Hook函数与类组件生命周期函数的对应关系： useState相当于constructor或类属性，用来初始化st
阅读全文
浙公网安备 33010602011771号