- 博客(8)
- 收藏
- 关注
RSS订阅原创 结合 useContext 和 useReducer （ redux 效果）
使用Context相比回调函数的优势：对比回调函数的自定义命名，Context的Api更加明确，我们可以更清晰的知道哪些组件使用了dispatch、应用中的数据流动和变化。这也是React一直以来单向数据流的优势。更好的性能：如果使用回调函数作为参数传递的话，因为每次render函数都会变化，也会导致子组件rerender。当然我们可以使用useCallback解决这个问题，但相比useCallbackReact官方更推荐使用useReducer，因为React会保证dispatch始终是不变的，不会引
2022-04-14 13:43:30
3543
原创 useReducer 介绍和基本使用
一、前言useReducer 是 useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）const [state, dispatch] = useReducer(reducer, initialArg, init);useReducer接收两个参数：第一个参数：reducer函数。第二个参数：初始化
2022-04-14 13:39:26
21537
1
原创 useContext 介绍和基本使用
一、前言Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。使用 context, 我们可以避免通过中间元素传递 props。const value = useContext(MyContext);接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value pr
2022-04-14 13:38:43
3100
原创 React 中 memo()、useCallback()、useMemo()
React 中 memo()、useCallback()、useMemo()Render基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。react 处理 render 的基本思维模式是每次一有变动就会去重新渲染整个应用。会将 render 函数返回的虚拟 DOM 树与老的进行比较，从而确定 DOM 要不要更新、怎么更新。
2022-04-13 12:49:11
1145
2
原创 React 中 react-i18next 切换语言（ 项目国际化 ）
React 中 react-i18next 切换语言（ 项目国际化 ）**在React中，使用 react-i18next 切换中英文目录React 中 react-i18next 切换语言（ 项目国际化 ）安装依赖一、文件配置1、config.ts2、zh.json3、en.json二、使用1、引用配置文件2、在组件中使用3、切换语言安装依赖需要同时安装 i18next 和 react-i18next 依赖：npm install react-i18next i18next --save
2021-11-10 20:42:00
5187
2
原创 C3中pointer设置
有些时候网页中用到了一些绝对定位的Div，因为需要事先这个Div是隐藏的，但是它所在的位置会遮挡住鼠标点击事件。这个时候可以用CCS3中的pointer-events属性来解决。穿透该层pointer-events:none;恢复点击处理pointer-events:auto;根据情况来动态修改Div的pointer-events属性即可。例如用JQuery可以这样写：穿透该层$(’#dvTest’).css(‘pointer-events’, ‘none’);恢复点击
2021-09-07 23:20:48
149
原创 js筛选函数
1、邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2、手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3、电话号码export const isPhone = (s) => { re
2021-09-07 23:19:37
1060
原创 基于element-ui Tree树形控件 生成 文件目录 缩进树
前几天需要展示一个文件目录，选择到的是AntV G6 的缩进树。收缩效果确实不错，不过在使用的过程中 遇到了 G6 的 BUG，传入数据对象的最后一层，不能正常展开收缩且会无限循环报错 。索性就用 element Tree 组件 + border 边框 来制作 缩进图。这是G6效果这是 element 效果PS 正常情况下，文件目录缩进树 用图类 做出来的效果肯定会好一点。首先 element Tree树形组件 先引入<div id="dataset-label-visual
2021-02-02 19:02:31
3229
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人