前言如果自己的项目是按照750尺寸做的适配，引入vant组件就会出现，组件的样式都缩小一半的情况；github的issues里面已经有小伙伴提过类似的问题传送门 修改配置改法：利用postcss-pxtorem对项目和vant组件进行区别适配，修改postcss.config.js或者.postcssrc.js里面的配置: 12345678910111213141516171819202122// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = ({ file }) => { let rootValue; // vant组件使用37.5 if (file && file.dirname && file.dirname.indexOf("vant") > -1) { rootValue = 37.5; } else { rootValue = 75; ...

react-helmetReact Helmet是一个HTML文档head管理工具，管理对文档头的所有更改; 传送门 reselect为什么我们需要reselectReselect 是一个 Redux 的选择器库： Selector 可以计算衍生的数据，可以让 Redux 存储尽可能少的 state 。 Selector 非常高效，除非某个参数发生变化，否则不会发生计算过程。 Selector 是可组合的，它们可以输入、传递到其他的选择器。 history 消除平台差异的一个history库 invariant校验库

前言React.memo()是 React 的一个顶层 API 且为高阶组件，它对组件做的事类似于React.PureComponet,不同的是：React.memo()是对函数组件进行优化，React.PureComponent是定义类组件使用的； React.Component、React.PureComponent了解React.memo()之前，让我们先来了解一下React.Component、React.PureComponent这两个组件，只要理解了这两个组件React.memo()就能自然而然的 get 到了~ React.Component这里引用 React 官方介绍：React.Component 是使用 ES6 classes 方式定义 React 组件的基类；只要是写类组件就需要用到它； 12345class Name extends React.Component { render() { return <h1>Hello, {this.props.name}</h1> }&# ...

自定义 hooks 记录 记录一下常用的自定义 hook~~~ useForceUpdate 当我们使用React.PureComponent定义类组件的时候，因为React.PureComponent只是对数据做浅比较，当数据结构非常复杂的情况则可能出现数据更新页面不更新的情况，react 提供了一个forceupdate方法用来手动重新渲染组件，而函数组件是没有这个方法的，如果也想要实现手动刷新组件可以通过自定义 hook 的方法去实现； 以下记录了两种实现 useForceUpdate 自定义 hook 的方法： useState 版12345678910111213141516import { useState, useCallback } from 'react'/** * 自定义hook 模拟类组件的forceUpdate * 写法一 利用uesState */const useForceUpdate = function (): Function { const [, setCount] = useState < ...

学习目标 使用 demo react-router 简介 实现 BrowserRouter HashRouter Router Route Link Switch Redirect hooks Prompt WithRouter MemoryRouter 其他组件 RouterContext LifeCycle matchpath 学习目标 通过对 react-router 的学习和自己实现其核心功能，更加深度的掌握 react-router 的使用和原理，以达到日常遇到相关问题可以从源码角度快速定位问题并解决问题；(记笔记行为，仅供学习参考，代码解释均在注释里) react-router 简介 react-router 包含 3 个库，react-router、react-router-dom 和 react-router-native。react-router 提供 最基本的路由功能，实际使用的时候我们不会直接安装 react-router，而是根据应用运行的环境选择安 装 react-router-dom(在浏览器中使用)或 react-router- ...

前言 众所周知，redux只单纯的提供数据流的管理，action也只接受plain object类型，那么如果我们需要在action中写异步就需要借助其他中间件; 学习的时候简陋的实现了一下redux-thunk、redux-promise、redux-logger， 特此记录（记笔记行为，仅供学习参考）。 redux-thunk1234567891011121314/** * 实现redux-thunk * @param {*} * @returns */function thunk({ getState, dispatch }) { return (next) => (action) => { if (typeof action === 'function') { return action(dispatch, getState) } return next(action) }} redux-promise12345 ...

前言记录一次通过 create-react-app 搭建一个 react 项目的过程，坑一个接着一个~ 1. 创建项目1npx create-react-app my-app --typescript 2. 扩展 webpack 配置需要用到 react-app-rewired customize-cra 1yarn add react-app-rewired customize-cra -D 配置支持装饰器、别名、postcss根目录下新建一个config-overrides.js文件， 123456789101112131415161718192021222324252627282930313233343536373839/* config-overrides.js */const { override, addDecoratorsLegacy, addWebpackAlias, addPostcssPlugins,} = require('customize-cra')const path = require('pat ...

先看使用在vue组件中的template里 1<svg-icon :icon-class="icon-name"></svg-icon> SvgIcon.vue123456789101112131415161718192021222324252627282930313233343536373839404142<template> <svg :class="svgClass" v-on="$listeners"> <use :xlink:href="iconName" /> </svg></template><script>export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, cla ...

前言学习笔记，仅供学习参考 主要功能点 可以输入数据，数据动态更新； 点击 submit，进行数据校验（仅做必填校验）； 校验失败展示提示，控制台打印 Failed 详情信息； 校验成功控制台打印 Success 详情信息，并输出 form 表单数据； 注： 仅实现核心思想，更多业务细节忽略 学习目的 学习 antd4.x 对 form 表单的优化处理，控制 dom 的精准更新以提高性能； 学习 antd form 表单封装思路； antd4.x form 表单优化点 antd4.x 之前，form 的数据都做在 Form 的 state 中，一旦 form 表单某一项数据更新，整个 form 表单会全部更新，一旦表单逻辑复杂了，性能成本可想而知； antd4.x 通过新建一个类，对 form 表单的数据进行缓存和处理，一旦数据更新，通过forceUpdate方法对表单数据更改项精准更新； 兼容了 class 组件和函数组件； 上代码代码目录结构 使用 函数组件使用 12345678910111213141516171819202122232425262728293031323 ...

最近学习vue3.0.11的源码，顺便画了一个流程图。防止图片丢失，贴在这里吧~