redux

引言 2019 年开始，在使用React的时候，已经逐步从 Class 组件，过渡到函数组件了。虽然函数组件十分便捷，但是在使用函数组件的时候，还是有一些疑惑的地方，导致有时候会出现一些奇奇怪怪的问题。在这里，我想通过官网和博客文章以及自己的一些积累，整理下最佳实践，以备不时之需。 Hook 不会影响你对 React 概念的理解。 恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。 下面是一些官方列举的，提出并使用 hooks 的一些动机。 在组件之间复用状态逻辑很难 你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。 Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。 复杂组件变得难以理解 useEffect 我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在

上一篇文章 ，我介绍了 Redux 的基本做法：用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。 但是，一个关键问题没有解决：异步操作怎么办？Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。 怎么才能 Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件（middleware）。 一、中间件的概念 为了理解中间件，让我们站在框架作者的角度思考问题：如果要添加功能，你会在哪个环节添加？ （1）Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。 （2）View：与 State 一一对应，可以看作 State 的视觉层，也不合适承担其他功能。 （3）Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。 想来想去，只有发送 Action 的这个步骤，即 store.dispatch() 方法，可以添加功能。举例来说，要添加日志功能，把 Action 和 State 打印出来，可以对 store.dispatch 进行如下改造。 let next = store.dispatch; store.dispatch = function

​ dva是什么 dva 首先是一个基于 redux和 redux-saga的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router和 fetch，所以也可以理解为一个轻量级的应用框架。 dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装。dva 是 react 和 redux 的最佳实践。最核心的是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封装到一起。 特性 易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用更是降低为 0 API elm 概念，通过 reducers, effects 和 subscriptions 组织 model 插件机制，比如 dva-loading可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading 支持 HMR，基于 babel-plugin-dva-hmr实现 components、routes 和 models 的 HMR 安装 创建一个dva项目很简单，dva为我们提供了dva-cli，用来快速创建dva项目。 通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。 $ npm

轻松学 Redux-Saga 视频教程（16 个视频） 轻松学 Redux-Saga #1 课程简介与 Redux-Saga 介绍 「07:05」 轻松学 Redux-Saga #2 准备环境和安装 Redux 「04:52」 轻松学 Redux-Saga #3 Redux-Saga 的安装和输写第一个 Saga 「07:59」 轻松学 Redux-Saga #4 es6 的 generator part 1 介绍 「05:13」 轻松学 Redux-Saga #5 es6 的 generator part 2 next 方法传参数 「Pro」「05:06」 轻松学 Redux-Saga #6 es6 的 generator part 3 生成器的意义 「Pro」「07:16」 轻松学 Redux-Saga #7 es6 的 generator part 4 自动执行生成器 「Pro」「07:24」 轻松学 Redux-Saga #8 使用 Redux-Saga 处理异步事件 「Pro」「08:00」 轻松学 Redux-Saga #9 实例演练 takeEvery 和 takeLatest 的区别 「Pro」「04:50」 轻松学 Redux-Saga #10 call 方法 「Pro」「03:15」 轻松学 Redux-Saga #11 实例讲解发送 ajax 请求 「Pro」

本文是设计模式的第二篇文章，第一篇文章是 不知道怎么封装代码？看看这几种设计模式吧！ ，后面还会有 提高扩展性 ， 提高代码质量 的设计模式，点个关注不迷路，哈哈~ 想必大家都听说过 DRY 原则，其实就是 Don't repeat yourself(不要重复你自己) ，意思就是不要重复写一样的代码，换句话说就是要提高代码的复用性。那什么样的代码才算有好的复用性呢？ 对象可以重复利用。这个其实有点像我们关系型数据库的设计原则，数据表和关系表是分开的，数据表就是单纯的数据，没有跟其他表的关系，也没有业务逻辑，关系表才是存储具体的对应关系。当我们需要某个数据时，直接读这个表就行，而不用担心这个表会有其他的业务在里面。类似设计的还有redux，redux的store里面就是单纯的数据，并不对应具体的业务逻辑，业务如果需要改变数据需要发action才行。正是因为这种数据很单纯，所以我们需要的地方都可以拿来用，复用性非常高。所以我们设计数据或对象时，也要尽量让他可以复用。 重复代码少。如果你写的代码重复度很高的话，说明你代码的抽象度不够。很多时候我们重复代码的产生都是因为我们可能需要写一个跟已经存在的功能类似的功能，于是我们就把之前的代码拷贝过来，把其中两行代码改了完事。这样做虽然功能实现了，但是却制造了大量重复代码，本文要讲的几种设计模式就是用来解决这个问题的，提高代码的抽象度

es7的decorator修饰器 装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法。 decorator就是给类添加或修改类的变量与方法的。 装饰器是一种函数，写成 @ + 函数名 。它可以放在类和类方法的定义前面。 例 @frozen class Foo { @configurable(false) @enumerable(true) method() {} @throttle(500) expensiveMethod() {} } 上面代码一共使用了四个装饰器，一个用在类本身，另外三个用在类方法。它们不仅增加了代码的可读性，清晰地表达了意图，而且提供一种方便的手段，增加或修改类的功能。 1.修改类 @addType class human{} function addType(target){ target.age =27 ; target.name = hyh; target.sex = male; target.hight =178 ; console.log( '此对象被修改了' ) } console.log( new human()) 上面代码中， @addType 就是一个装饰器。它修改了 human 这个类的行为，为它加上了静态属性age name sex hight等等。 addType 函数的参数 target

一转眼已经毕业一年了这一年的工作经历真是有苦有甜，还是很坎坷的，还好所有的经验都整理了下来~ 分享给同一时期的伙伴们~ 大佬可以绕行🤣 css 盒子模型 标准模型和怪异模型(重点在于width的计算) BFC 1.BFC的作用 1.清楚浮动 2.防止相邻BFC元素出现边距重叠 复制代码 2.BFC的触发条件 如何隐藏一个元素，只通过css方式 1.display:none 2.opacity:0 3.visibility:hidden 复制代码 让一个元素水平居中（元素可能为定高或者不定高） <div class= 'parent' > <div class= 'children' ></div> </div> -- 定高：-- 1. 父级：position:relative 子级：position:absolute; top:0; bottom:0; right:0; left:0; margin: 0 auto; 2. 父级：position:relative 子级：position:absolute; top:50%; left:50%; margin-left:自身宽的一半； margin-top:自身高的一半； -- 不定高 -- 1.absolute + transform 2.flex 3.table display: table-cell; vertical

本文原文： Angular Architecture Patterns and Best Practices (that help to scale) 译者序 这是作为译者我想说的话，并非原文中的内容。 我猜此时此刻你心里的疑问一定是：为什么是 Angular，不是 React，不是 Vue，不是 Flux，不是 Redux ? 因为你已经对它们太熟悉了。 我个人作为开发者而言最希望是能够汲取到“圈外”的“营养”，这样才能给我的成长带来帮助。 我想对各位也是一样。 你不用担心因为不会 Angular 而看不懂这一些列文章，它们基本上谈论的是应用架构——关于设计、组织、抽象，很少会落到具体的实现，即使有，连蒙带猜也能推测出一二。这也能从侧面说明我衷心想推荐这些佳作的原因：通过大段大段的代码阐述很容易；难的是几乎不用代码来跨越语言的说明更高层次的东西，比如 Martin Fowler, Uncle Bob Martin 他们的文章就能如此。 我不评价框架的流行和好坏，我只是把一切呈现在各位的眼前。它们并非和 Flux，Vuex 大相径庭，反而你们会看到它们的影子，但更多的是不一样的东西。我在里面看到了更好的职责划分和抽象。 在文中我会以引用的格式和“译者注”开头穿插一些我的个人备注和带给我启发性的问题，你可以理解为文章的“评论音轨”，但其中问题我不会给予回答。你也可以忽略这些评论

React.StrictMode 一个很蛋疼的事情是在dev环境下, react 会自动在组件最外面包裹一个 React.StrictMode, 用于将组件渲染两次, 主要原因为react团队认为在react组件渲染时不应该有任何副作用被执行, 所以渲染两次可以帮助开发者更早的发现问题 build后可以看到每次就只执行一次了 使用条件 只能在顶层使用, 不能嵌套, 也不能在条件判断和循环中使用, 会直接报错 这是由于hook内部记录状态时使用的链表, 由于判断会打乱调用顺序, 循环不能保证每次调用的次数是一致的, 所以都是被禁止的 useState 在更新state时不会自动合并对象, 不像setState可以通过传递第二个参数来在状态更新之后做一些事情, 尽量使用多个小状态而不是一个大状态 简单计数器 import React, { useState } from "react"; import { inc, applyTo } from "ramda"; const B = () => { const [count, setCount] = useState(0); return ( <div> {count} <button onClick={() => applyTo(inc, setCount)}>inc</button> </div> ); }; export

李熠：【译文】【前端架构鉴赏 01】：Angular 架构模式与最佳实践 ​ zhuanlan.zhihu.com 原文 https:// blog.strongbrew.io/A-sc alable-angular2-architecture/ 序 这篇文章或许看上去仅和 Angular2 开发者相关，但我相信它也适用于其它的框架。这只是一份关于编写具有可拓展性和可维护性单页面应用的指南。需要指出的非常重要的是，这并不是达成目标的唯一方式，但是对我个人而言它们在不少的场景中都行之有效 编写可拓展性的单页面应用 许多开发者在编写大型的具有可拓展性和可维护性的单页面应用时都遇到困难。导致在开发早期就留下了技术债，修复 bug 时举步维艰，编写测试和创建复用代码时也踌躇不前 最大的一个挑战是：在一个拧巴的基础之上拓展现有逻辑和编写新的功能 对于那些能允许你用100种不同方式设计一个应用，没有结构和封装可言，一切东西都紧紧的耦合在一起的旧时框架，单页面应用是全新的概念 大部分时候在项目的开发的初始阶段都希望快速迭代。但是经过一些开发者，几轮功能迭代和重构之后，代码变得越来越难以维护。它开始看上去像意大利面了。虽然目前框架成熟了很多，但重要的是你编写的软件架构也要与时俱进 2016 年的单页面应用（甚至更早之前） 为了解释这篇文章谈到的架构，有必要回顾一下2016年的web应用长什么样子