摘要：
访问者模式：表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。 这个描述比较晦涩，啥是对象结构，它的各元素又是啥。 我们先来看下访问者模式的类图： 这个例子是一个关于企业用户和个人用户的例子，概念中的各元素在这里指的就是他俩，对象结构指的是上图 阅读全文
摘要：
解释器模式：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。 关于解释器模式，听起来很陌生，其实我们大部分人都用过，比如正则表达式，以及一些任务调度都支持的Cron表达式。 举例： Cron表达式（5 * 10-22 * * ? 从早上10点到晚上十点 阅读全文
摘要：
备忘录模式：在不破坏封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态。这样，以后就可将该对象恢复到原先保存的状态。 备忘录模式概念有几个关键词：不破坏封装性、捕获内部状态、保存在对象之外、恢复原先保存的状态。 我们先来设想一个场景：我们假设有一个流程程序，顺序是开始→流程1→流程2 阅读全文
摘要：
状态模式：允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类。 在开始讲状态模式之前，我们先来看一句话：“方法如果过长其实极有可能是有坏味道了”——MartinFowler《重构》，这是MartinFowler对Long Method的看法。 现在我们来看一个场景：用户投票功能， 阅读全文
摘要：
桥接模式的定义：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 我们来想象一下一种场景：现在要开发一个消息发送模块，一开始的需求就是很简单的有了消息给相关人员发送SMS短信通知和Email邮件通知。这很简单，我们实现的类图如下： 接下来很快来了新需求，要增加发送加急消息的功能，并且要向客户端 阅读全文
摘要：
现在我们有三个 Dumb 组件，一个控制评论的 reducer。我们还缺什么？需要有人去 LocalStorage 加载数据，去控制新增、删除评论，去把数据保存到 LocalStorage 里面。之前这些逻辑我们都是零散地放在各个组件里面的（主要是 CommentApp 组件），那是因为当时我们还没 阅读全文
摘要：
接下可以重构组件部分的内容了。先回顾一下之前我们是怎么划分组件的： 组件树： 这样划分方式当然是没错的。但是在组件的实现上有些问题，我们之前并没有太多地考虑复用性问题。所以现在可以看看 comment-app2 的 CommentInput 组件，你会发现它里面有一些 LocalStorage 操作 阅读全文
摘要：
从本节开始，我们开始用 Redux、React-redux 来重构第二阶段的评论功能。产品需求跟之前一样，但是会用 Redux、React-redux 来帮助管理应用状态，而不是“状态提升”。让整个应用更加接近真实的工程。 大家可以在第二阶段的代码上进行修改 comment-app2（非高阶组件版本 阅读全文
摘要：
大家已经知道，只会接受 props 并且渲染确定结果的组件我们把它叫做 Dumb 组件，这种组件只关心一件事情 —— 根据 props 进行渲染。 Dumb 组件最好不要依赖除了 React.js 和 Dumb 组件以外的内容。它们不要依赖 Redux 不要依赖 React-redux。这样的组件的 阅读全文
摘要：
现在 make-react-redux 工程代码中的 Redux 和 React-redux 都是我们自己写的，现在让我们来使用真正的官方版本的 Redux 和 React-redux。 在工程目录下使用 npm 安装 Redux 和 React-redux 模块： 把 src/ 目录下 Heade 阅读全文
摘要：
到这里大家已经掌握了 React-redux 的基本用法和概念，并且自己动手实现了一个 React-redux，我们回顾一下这几节都干了什么事情。 React.js 除了状态提升以外并没有更好的办法帮我们解决组件之间共享状态的问题，而使用 context 全局变量让程序不可预测。通过 Redux 的 阅读全文
摘要：
我们要把 context 相关的代码从所有业务组件中清除出去，现在的代码里面还有一个地方是被污染的。那就是 src/index.js 里面的 Index： 其实它要用 context 就是因为要把 store 存放到里面，好让子组件 connect 的时候能够取到 store。我们可以额外构建一个组 阅读全文
摘要：
在重构 ThemeSwitch 的时候我们发现，ThemeSwitch 除了需要 store 里面的数据以外，还需要 store 来 dispatch： 目前版本的 connect 是达不到这个效果的，我们需要改进它。 想一下，既然可以通过给 connect 函数传入 mapStateToProps 阅读全文
摘要：
我们来观察一下刚写下的这几个组件，可以轻易地发现它们有两个重大的问题： 对于第一个问题，我们在 高阶组件 的章节说过，可以把一些可复用的逻辑放在高阶组件当中，高阶组件包装的新组件和原来组件之间通过 props 传递信息，减少代码的重复程度。 对于第二个问题，我们得弄清楚一件事情，到底什么样的组件才叫 阅读全文
摘要：
既然要把 store 和 context 结合起来，我们就先构建 store。在 src/index.js 加入之前创建的 createStore 函数，并且构建一个 themeReducer 来生成一个 store： themeReducer 定义了一个表示主题色的状态 themeColor，并且 阅读全文
摘要：
可以看到 Redux 并不复杂，它那些看起来匪夷所思的设定其实都是为了解决特定的问题而存在的，我们把问题想清楚以后就不难理解它的那些奇怪的设定了。这节开始我们来看看如何把 Redux 和 React.js 结合起来，你会发现其实它们也并不复杂。 回顾一下，我们在 前端应用状态管理 —— 状态提升 中 阅读全文
摘要：
不知不觉地，到这里大家不仅仅已经掌握了 Redux，而且还自己动手写了一个 Redux。我们从一个非常原始的代码开始，不停地在发现问题、解决问题、优化代码的过程中进行推演，最后把 Redux 模式自己总结出来了。这就是所谓的 Redux 模式，我们再来回顾一下这几节我们到底干了什么事情。 我们从一个 阅读全文
摘要：
经过了这么多节的优化，我们有了一个很通用的 createStore： 它的使用方式是： 我们再优化一下，其实 appState 和 stateChanger 可以合并到一起去： stateChanger 现在既充当了获取初始化数据的功能，也充当了生成更新数据的功能。如果有传入 state 就生成更新 阅读全文
摘要：
接下来两节某些地方可能会稍微有一点点抽象，但是我会尽可能用简单的方式进行讲解。如果你觉得理解起来有点困难，可以把这几节多读多理解几遍，其实我们一路走来都是符合“逻辑”的，都是发现问题、思考问题、优化代码的过程。所以最好能够用心留意、思考我们每一个提出来的问题。 细心的朋友可以发现，其实我们之前的例子 阅读全文
摘要：
我们接下来会继续优化我们的 createStore 的模式，让它使我们的应用程序获得更好的性能。 但在开始之前，我们先用一节的课程来介绍一下一个函数式编程里面非常重要的概念 —— 纯函数（Pure Function）。 简单来说，一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们 阅读全文
摘要：
上一节 的我们有了 appState 和 dispatch： 现在我们把它们集中到一个地方，给这个地方起个名字叫做 store，然后构建一个函数 createStore，用来专门生产这种 state 和 dispatch 的集合，这样别的 App 也可以用这种模式了： createStore 接受两 阅读全文
摘要：
从这节起我们开始学习 Redux，一种新型的前端“架构模式”。经常和 React.js 一并提出，你要用 React.js 基本都要伴随着 Redux 和 React.js 结合的库 React-redux。 要注意的是，Redux 和 React-redux 并不是同一个东西。Redux 是一种架 阅读全文
摘要：
这一节我们来介绍一个你可能永远用不上的 React.js 特性 —— context。但是了解它对于了解接下来要讲解的 React-redux 很有好处，所以大家可以简单了解一下它的概念和作用。 在过去很长一段时间里面，React.js 的 context 一直被视为一个不稳定的、危险的、可能会被去 阅读全文
摘要：
有时候人们很喜欢造一些名字很吓人的名词，让人一听这个名词就觉得自己不可能学会，从而让人望而却步。但是其实这些名词背后所代表的东西其实很简单。 我不能说高阶组件就是这么一个东西。但是它是一个概念上很简单，但却非常常用、实用的东西，被大量 React.js 相关的第三方库频繁地使用。在前端的业务开发当中 阅读全文
摘要：
删除评论 现在发布评论，评论不会消失，评论越来越多并不是什么好事。所以我们给评论组件加上删除评论的功能，这样就可以删除不想要的评论了。修改 src/Comment.js 的 render 方法，新增一个删除按钮： 我们在后面加了一个删除按钮，因为 index.css 定义了样式，所以鼠标放到特定的评 阅读全文
摘要：
持久化评论 同样地，可以通过类似于用户名持久化的方式对评论列表内容进行持久化，让用户发布的评论在刷新页面以后依然可以存在。修改 src/CommentApp.js： 我们增加了 _loadComments 和 _saveComments 分别用于加载和保存评论列表数据。用户每次提交评论都会把评论列表 阅读全文
摘要：
目前为止，第二阶段知识已经基本介绍完，我们已经具备了项目上手实战必备的 React.js 知识，现在可以把这些知识应用起来。接下来是实战环节，我们会继续上一阶段的例子，把评论功能做得更加复杂一点。 我们在上一阶段的评论功能基础上加上以下功能需求： 在线演示地址。 大家可以在原来的第一阶段代码的基础上 阅读全文
摘要：
我们来了到了一个非常尴尬的章节，很多初学的朋友可能对这一章的知识点不屑一顾，觉得用不用对程序功能也没什么影响。但其实这一章节的知识在你构建多人协作、大型的应用程序的时候也是非常重要的，不可忽视。 都说 JavaScript 是一门灵活的语言 —— 这就是像是说“你是个好人”一样，凡事都有背后没有说出 阅读全文
摘要：
这一节我们来补充两个之前没有提到的属性，但是在 React.js 组件开发中也非常常用，但是它们也很简单。 dangerouslySetHTML 出于安全考虑的原因（XSS 攻击），在 React.js 当中所有的表达式插入的内容都会被自动转义，就相当于 jQuery 里面的 text(…) 函数一 阅读全文
摘要：
有一类组件，充当了容器的作用，它定义了一种外层结构形式，然后你可以往里面塞任意的内容。这种结构在实际当中非常常见，例如这种带卡片组件： 组件本身是一个不带任何内容的方形的容器，我可以在用这个组件的时候给它传入任意内容： 基于我们目前的知识储备，可以迅速写出这样的代码： 我们通过给 Card 组件传入 阅读全文
摘要：
在 React.js 当中你基本不需要和 DOM 直接打交道。React.js 提供了一系列的 on*方法帮助我们进行事件监听，所以 React.js 当中不需要直接调用 addEventListener的 DOM API；以前我们通过手动 DOM 操作进行页面更新（例如借助 jQuery），而在 阅读全文
摘要：
从之前的章节我们了解到，组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。这是一个从无到有的过程，React.js 提供一些生命周期函数可以给我们在这个过程中做一些操作。 除了挂载阶段，还有一种“更新阶段”。说白了就是 setState 导致 React.js 重新渲染组件并且把组 阅读全文
摘要：
这一节我们来讨论一下对于一个组件来说，constructor 、componentWillMount、componentDidMount、componentWillUnmount 这几个方法在一个组件的出生到死亡的过程里面起了什么样的作用。 一般来说，所有关于组件自身的状态的初始化工作都会放在 co 阅读全文
摘要：
我们在讲解 JSX 的章节中提到，下面的代码： 会编译成： 其实我们把 Header 组件传给了 React.createElement 函数，又把函数返回结果传给了 ReactDOM.render。我们可以简单猜想一下它们会干什么事情： 上面过程其实很简单，看代码就能理解。 我们把 React.j 阅读全文
摘要：
上一个评论功能的案例中，可能会有些同学会对一个地方感到疑惑： CommentList 中显示的评论列表数据为什么要通过父组件 CommentApp 用 props 传进来？为什么不直接存放在 CommentList 的 state 当中？例如这样做也是可以的： 如果把这个 comments 放到 C 阅读全文
摘要：
接下来的代码比较顺理成章了。修改 CommentList 可以让它可以显示评论列表： 这里的代码没有什么新鲜的内容，只不过是建立了一个 comments 的数组来存放一些测试数据的内容，方便我们后续测试。然后把 comments 的数据渲染到页面上，这跟我们之前讲解的章节的内容一样——使用 map 阅读全文
摘要：
上一节我们构建了基本的代码框架，现在开始完善其他的内容。 处理用户输入 我们从 ComponentInput 组件开始，学习 React.js 是如何处理用户输入的。首先修改 ComponentInput.js，完善 ComponentInput 的 render 函数中的 HTML 结构： 在浏览 阅读全文
摘要：
课程到这里大家已经掌握了 React.js 的基础知识和组件的基本写法了。现在可以把我们所学到的内容应用于实战当中。这里给大家提供一个实战的案例：一个评论功能。效果如下： 在线演示地址 接下来会带大家一起来学习如何分析、编写这个功能。在这个过程中会补充一些之前没有提及的知识点，虽然这些知识点之前没有 阅读全文
摘要：
列表数据在前端非常常见，我们经常要处理这种类型的数据，例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。 React.js 当然也允许我们处理列表数据，但在使用 React.js 处理列表数据的时候，需要掌握一些规则。我们这一节会专门讨论这方面的知识。 渲染存放 JSX 阅读全文
摘要：
我们来一个关于 state 和 props 的总结。 state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.s 阅读全文