随笔分类 - teach
摘要：近期开发遇到个小问题，没有多加注意，查找时只能暂时用别的办法，闲暇之余看了下原来这么简单... ...，这里留个备录。 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）。 简单来说，一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。这么说肯定比较抽象，我们把它掰开来看： 函数的返回结果只依赖于它的参数。 函数执行过程里面没有副作用。 函数
阅读全文
摘要：纯函数是函数式编程的基础，需要重点理解。纯函数的作用，可以看《JavaScript函数式编程之为什么要函数式编程（非严谨技术层面的扯淡）》。 纯函数的概念： 纯函数是这样一种函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。 他的重点在于“相同的输入，永远会得到相同的输出”，后面
阅读全文
摘要：如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。 var sum = (num1, num2) => { return num1 + num2; } 箭头函数返回对象，由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。
阅读全文
摘要：JavaScript在ES6语法中新增了箭头函数，相较于传统函数，箭头函数不仅更加简洁，而且在this方面进行了改进。this作为JavaScript中比较诡异的存在，许多文章对于this的解释也不尽相同，本篇文章试图厘清JS中函数与this的关系。 一、JS中函数的写法 1.常规函数的写法 在ES
阅读全文
摘要：React动画通常有三种方法实现从易到难为： 1、transition（CSS3自带） 2、animation（CSS3自带） 3、react-transition-group动画库（需要引入插件） react生态圈十分庞大，类似于动画库有很多，这里我们介绍一款react-transition-gr
阅读全文
摘要：一、transition（CSS3自带） 1、用法示例： 1 2 3 4 .hide{ /*过渡动画效果*/ opacity: 1; transition: all 1s ease-in; } 含义：透明度在1s内从0渐变为1 2、transition其他参数 建议参考（http://www.run
阅读全文
摘要：除了常见的mock.js，最近发现一款新的前端模拟数据工具easy-mock。 官网：https://www.easy-mock.com/ 登录成功后点击右下角+号，进行项目创建 输入项目名等相关信息，创建项目 创建接口 写入数据，创建接口 创建接口完毕后，复制链接 替换接口，然后将state置空
阅读全文
摘要：本节介绍下React+Axios实现远程数据请求 这里注意：axios是一个独立程序，本质就是对AJAX的封装，可以和很多框架结合使用。 （1）安装依赖 >npm i axios --save （2）引入使用 建议在componentDidMount生命周期函数里进行数据请求，这里我们结合json-
阅读全文
浙公网安备 33010602011771号