随笔分类 - react
摘要：最近Github 10周年在朋友圈里沸沸扬扬刷屏，小编在工作中却惊讶的发现不少同事对版本号中的beta和rc没有概念，使用npm install package@next时，也不清楚next代表的含义。于是，决定写一篇文章科普一下由 Github 起草的Semver(语义化版本)的相关知识。 实际案
阅读全文
摘要：重点： 1、封装自定义Hooks函数，一定要用use开头，这样才能区分出什么是组件，什么是自定义函数2、useCallback为缓存方法，useMome为缓存状态/属性，两者都是优化性能 其实自定义Hooks函数和用Hooks创建组件很相似，跟我们平时用JavaScript写函数几乎一模一样，可能就
阅读全文
摘要：什么是 React.memo ？ React.memo 和 React.PureComponent 类似， React.PureComponent 在类组件中使用，而React.memo 在函数组件中使用 看下面两个例子，有两个计数器组件，两个计数器的数据都来源于父组件，第一个计数器通过点击按钮数字
阅读全文
摘要：useCallback 使用场景是：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新； import React, { useMemo, useCallback } from "react" let Counter = ({ value,
阅读全文
摘要：作用： useMemo主要用来解决使用React hooks产生的无用渲染的性能问题。 缘由： 使用function的形式来声明组件，失去了shouldCompnentUpdate（在组件更新之前）这个生命周期，主要进行状态对比，如果需要则进行改变。也就是说使用Hooks的useEffect（替代生
阅读全文
摘要：一、useEffect 依赖诚实问题的粗暴解决及带来的问题 二、使用 useReducer 解决依赖诚实问题 1、声明一个 reducer 2、使用 useReducer 声明 state 和 dispatch 3、使用 dispatch 进行 state 的一些变更 4、效果: 5、依赖真的都诚实
阅读全文
摘要：温馨提示： 使用react-hooks进行正常开发时，需要把组件和createContext创建上下文步骤单独写出来，哪里需要就在哪里引入 举个实际的例子：子组件中修改父组件的 state 一般的做法是将父组件的方法比如 setXXX 通过 props 的方式传给子组件，而一旦子组件多层级的话，就要
阅读全文
摘要：近期开发遇到个小问题，没有多加注意，查找时只能暂时用别的办法，闲暇之余看了下原来这么简单... ...，这里留个备录。 var x = 1; function fn(x){ console.log(x) }; fn() 输出结果为undefined，原因：局部变量x覆盖了全局变量。 var x =
阅读全文
摘要：概念 首先我们会用到哪些框架和工具呢？ React UI框架 Redux 状态管理工具，与React没有任何关系，其他UI框架也可以使用Redux react-redux React插件，作用：方便在React项目中使用Redux react-thunk 中间件，作用：支持异步action 目录结构
阅读全文
摘要：（1）无状态组件 无状态组件(Stateless Component)是最基础的组件形式，由于没有状态的影响所以就是纯静态展示的作用。一般来说，各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性（props）加上一个渲染函数（render）。由于不涉及到状态的更
阅读全文
摘要：react-router-v4，我称之为“第四代react-router”，react-router和react-router-dom的区别是什么呢？ 为什么有时候我们看到如下的写法： 写法1: import {Swtich, Route, Router, HashHistory, Link} fr
阅读全文
摘要：本文记录下react开发里常，Visual Studio Code开发集成环境常用的插件，简单截图如下，具体作用自己下载后对应详情界面会有介绍 （1）大体列表 （2）禁用列表 （3）推荐列表 （4）已启用列表 .
阅读全文
摘要：本节主要针对之前的ToDoList代码做下优化 （1）删除无用构造器 （2）解构赋值优化this.props取值 优化如下 注意位置： 解构赋值语法定义的局部变量要写在render内部 （3）无状态UI组件抽离 将当前组件的render内部抽离出来 无状态组件的优点： 1、大大提高了组件渲染性能 2
阅读全文
摘要：接着之前的react-redux完善ToDoList案例，实现点击按钮，添加列表项功能 （1）添加按钮响应事件 （2）编写映射关系 （3）编写reducer.js进行state的业务逻辑处理 测试如下，此时便完成了列表数据的添加操作 .
阅读全文
摘要：目前为止的ToDoList案例已经可以正常展示，但是还不能修改编辑，如下所示 此时控制台报错提示，缺少onChange响应事件，所以接下来编写响应事件，改变state状态值。 （1）通常做法 之前的做法都是绑定具体方法进行调用，如下所示，绑定handleInput方法，当输入值时进行输出打印 接下来
阅读全文
摘要：本节主要介绍react-redux的两个知识点：1、提供器Provider；2、Connect连接器。 （1）提供器provider 被Provider包裹的组件，可以直接获取store仓库的状态值，用法如下 只要被Provider包裹的组件都可以方便获取store （2）连接器Connect 提供
阅读全文
摘要：（1）初始化项目 安装完毕后，删除src下其他文件，留下index.js入口文件，如下所示 接下来首先安装redux和react-redux依赖（因为react-redux依赖redux，是在redux基础上建立起来的） >npm i redux react-redux --save 接下来编写跟组
阅读全文
摘要：（1）前言 （2）安装 首先安装相关依赖 >npm i redux-saga --save （3）配置 接下来开始进行编写配置，文件位置src/store/index.js。先将之前的redux中间件redux-thunk做下备份，然后开始配置redux-saga中间件 redux-saga中间件相
阅读全文
摘要：（1）概念图+简介 中间件相当于在Action到Reducer的中间放置了一个函数，常用场景：项目日志、创建奔溃报告、调用异步接口等等。 例如之前常用案例ToDoList里的Redux结合axios异步获取数据 实际开发里，一般会将异步调用放到Redux中间件Redux-thunk来完成。 Redu
阅读全文
摘要：介绍一下一个函数式编程里面非常重要的概念 —— 纯函数（Pure Function）。 简单来说，一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。这么说肯定比较抽象，我们把它掰开来看： 函数的返回结果只依赖于它的参数。 函数执行过程里面没有副作用。 函数
阅读全文
浙公网安备 33010602011771号