剑仙6

2020年3月22日

摘要：熟悉一下基于React的新项目。按照以往，我的步骤都是： git clone xxx npm install npm run dev 这时，JJ给我来了下面一段 git clone xxx yarn yarn start “咦，yarn是什么鬼？难道npm更高级的替代品？为什么要替代npm？难道有什阅读全文

posted @ 2020-03-22 11:31 剑仙6 阅读(329) 评论(0) 推荐(0) 编辑

Semver语义化版本号

摘要：最近Github 10周年在朋友圈里沸沸扬扬刷屏，小编在工作中却惊讶的发现不少同事对版本号中的beta和rc没有概念，使用npm install package@next时，也不清楚next代表的含义。于是，决定写一篇文章科普一下由 Github 起草的Semver(语义化版本)的相关知识。实际案阅读全文

posted @ 2020-03-22 11:22 剑仙6 阅读(158) 评论(0) 推荐(0) 编辑

2020年3月20日

自定义Hooks函数（案例：获取窗口大小）

摘要：重点： 1、封装自定义Hooks函数，一定要用use开头，这样才能区分出什么是组件，什么是自定义函数2、useCallback为缓存方法，useMome为缓存状态/属性，两者都是优化性能其实自定义Hooks函数和用Hooks创建组件很相似，跟我们平时用JavaScript写函数几乎一模一样，可能就阅读全文

posted @ 2020-03-20 22:29 剑仙6 阅读(786) 评论(0) 推荐(0) 编辑

介绍React.memo, useMemo 和 useCallback

摘要：什么是 React.memo ？ React.memo 和 React.PureComponent 类似， React.PureComponent 在类组件中使用，而React.memo 在函数组件中使用看下面两个例子，有两个计数器组件，两个计数器的数据都来源于父组件，第一个计数器通过点击按钮数字阅读全文

posted @ 2020-03-20 22:03 剑仙6 阅读(1068) 评论(0) 推荐(0) 编辑

useCallback优化React Hooks程序性能

摘要： useCallback 使用场景是：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新； import React, { useMemo, useCallback } from "react" let Counter = ({ value, 阅读全文

posted @ 2020-03-20 21:39 剑仙6 阅读(740) 评论(0) 推荐(0) 编辑

useMemo优化React Hooks程序性能，解决子组件重复执行问题

摘要：作用： useMemo主要用来解决使用React hooks产生的无用渲染的性能问题。缘由：使用function的形式来声明组件，失去了shouldCompnentUpdate（在组件更新之前）这个生命周期，主要进行状态对比，如果需要则进行改变。也就是说使用Hooks的useEffect（替代生阅读全文

posted @ 2020-03-20 17:45 剑仙6 阅读(4250) 评论(0) 推荐(1) 编辑

使用 useReducer 和 useCallback 解决 useEffect 依赖诚实与方法内置&外置问题

摘要：一、useEffect 依赖诚实问题的粗暴解决及带来的问题二、使用 useReducer 解决依赖诚实问题 1、声明一个 reducer 2、使用 useReducer 声明 state 和 dispatch 3、使用 dispatch 进行 state 的一些变更 4、效果: 5、依赖真的都诚实阅读全文

posted @ 2020-03-20 17:39 剑仙6 阅读(3024) 评论(0) 推荐(1) 编辑

createContext 和 useContext 结合使用实现方法共享（React Hook跨组件透传上下文与性能优化）

摘要：温馨提示：使用react-hooks进行正常开发时，需要把组件和createContext创建上下文步骤单独写出来，哪里需要就在哪里引入举个实际的例子：子组件中修改父组件的 state 一般的做法是将父组件的方法比如 setXXX 通过 props 的方式传给子组件，而一旦子组件多层级的话，就要阅读全文

posted @ 2020-03-20 10:03 剑仙6 阅读(2050) 评论(0) 推荐(0) 编辑

浅谈开发变量作用域---小坑

摘要：近期开发遇到个小问题，没有多加注意，查找时只能暂时用别的办法，闲暇之余看了下原来这么简单... ...，这里留个备录。 var x = 1; function fn(x){ console.log(x) }; fn() 输出结果为undefined，原因：局部变量x覆盖了全局变量。 var x = 阅读全文

posted @ 2020-03-20 08:58 剑仙6 阅读(96) 评论(0) 推荐(0) 编辑

2020年3月18日

优雅的在React项目中使用Redux

摘要：概念首先我们会用到哪些框架和工具呢？ React UI框架 Redux 状态管理工具，与React没有任何关系，其他UI框架也可以使用Redux react-redux React插件，作用：方便在React项目中使用Redux react-thunk 中间件，作用：支持异步action 目录结构阅读全文

posted @ 2020-03-18 16:36 剑仙6 阅读(238) 评论(0) 推荐(0) 编辑

公告