04 2018 档案

摘要:现在我们有三个 Dumb 组件,一个控制评论的 reducer。我们还缺什么?需要有人去 LocalStorage 加载数据,去控制新增、删除评论,去把数据保存到 LocalStorage 里面。之前这些逻辑我们都是零散地放在各个组件里面的(主要是 CommentApp 组件),那是因为当时我们还没 阅读全文
posted @ 2018-04-16 14:49 何塞穆里尼奥 阅读(297) 评论(0) 推荐(0) 编辑
摘要:接下可以重构组件部分的内容了。先回顾一下之前我们是怎么划分组件的: 组件树: 这样划分方式当然是没错的。但是在组件的实现上有些问题,我们之前并没有太多地考虑复用性问题。所以现在可以看看 comment-app2 的 CommentInput 组件,你会发现它里面有一些 LocalStorage 操作 阅读全文
posted @ 2018-04-16 14:45 何塞穆里尼奥 阅读(287) 评论(0) 推荐(0) 编辑
摘要:从本节开始,我们开始用 Redux、React-redux 来重构第二阶段的评论功能。产品需求跟之前一样,但是会用 Redux、React-redux 来帮助管理应用状态,而不是“状态提升”。让整个应用更加接近真实的工程。 大家可以在第二阶段的代码上进行修改 comment-app2(非高阶组件版本 阅读全文
posted @ 2018-04-16 14:42 何塞穆里尼奥 阅读(344) 评论(0) 推荐(0) 编辑
摘要:大家已经知道,只会接受 props 并且渲染确定结果的组件我们把它叫做 Dumb 组件,这种组件只关心一件事情 —— 根据 props 进行渲染。 Dumb 组件最好不要依赖除了 React.js 和 Dumb 组件以外的内容。它们不要依赖 Redux 不要依赖 React-redux。这样的组件的 阅读全文
posted @ 2018-04-16 14:34 何塞穆里尼奥 阅读(592) 评论(0) 推荐(0) 编辑
摘要:现在 make-react-redux 工程代码中的 Redux 和 React-redux 都是我们自己写的,现在让我们来使用真正的官方版本的 Redux 和 React-redux。 在工程目录下使用 npm 安装 Redux 和 React-redux 模块: 把 src/ 目录下 Heade 阅读全文
posted @ 2018-04-13 16:04 何塞穆里尼奥 阅读(464) 评论(0) 推荐(0) 编辑
摘要:到这里大家已经掌握了 React-redux 的基本用法和概念,并且自己动手实现了一个 React-redux,我们回顾一下这几节都干了什么事情。 React.js 除了状态提升以外并没有更好的办法帮我们解决组件之间共享状态的问题,而使用 context 全局变量让程序不可预测。通过 Redux 的 阅读全文
posted @ 2018-04-13 15:50 何塞穆里尼奥 阅读(417) 评论(0) 推荐(0) 编辑
摘要:我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的。那就是 src/index.js 里面的 Index: 其实它要用 context 就是因为要把 store 存放到里面,好让子组件 connect 的时候能够取到 store。我们可以额外构建一个组 阅读全文
posted @ 2018-04-13 15:43 何塞穆里尼奥 阅读(635) 评论(0) 推荐(0) 编辑
摘要:在重构 ThemeSwitch 的时候我们发现,ThemeSwitch 除了需要 store 里面的数据以外,还需要 store 来 dispatch: 目前版本的 connect 是达不到这个效果的,我们需要改进它。 想一下,既然可以通过给 connect 函数传入 mapStateToProps 阅读全文
posted @ 2018-04-13 15:24 何塞穆里尼奥 阅读(10646) 评论(0) 推荐(0) 编辑
摘要:我们来观察一下刚写下的这几个组件,可以轻易地发现它们有两个重大的问题: 对于第一个问题,我们在 高阶组件 的章节说过,可以把一些可复用的逻辑放在高阶组件当中,高阶组件包装的新组件和原来组件之间通过 props 传递信息,减少代码的重复程度。 对于第二个问题,我们得弄清楚一件事情,到底什么样的组件才叫 阅读全文
posted @ 2018-04-13 14:45 何塞穆里尼奥 阅读(5775) 评论(0) 推荐(2) 编辑
摘要:既然要把 store 和 context 结合起来,我们就先构建 store。在 src/index.js 加入之前创建的 createStore 函数,并且构建一个 themeReducer 来生成一个 store: themeReducer 定义了一个表示主题色的状态 themeColor,并且 阅读全文
posted @ 2018-04-13 14:29 何塞穆里尼奥 阅读(1256) 评论(0) 推荐(0) 编辑
摘要:可以看到 Redux 并不复杂,它那些看起来匪夷所思的设定其实都是为了解决特定的问题而存在的,我们把问题想清楚以后就不难理解它的那些奇怪的设定了。这节开始我们来看看如何把 Redux 和 React.js 结合起来,你会发现其实它们也并不复杂。 回顾一下,我们在 前端应用状态管理 —— 状态提升 中 阅读全文
posted @ 2018-04-13 14:15 何塞穆里尼奥 阅读(891) 评论(2) 推荐(0) 编辑
摘要:不知不觉地,到这里大家不仅仅已经掌握了 Redux,而且还自己动手写了一个 Redux。我们从一个非常原始的代码开始,不停地在发现问题、解决问题、优化代码的过程中进行推演,最后把 Redux 模式自己总结出来了。这就是所谓的 Redux 模式,我们再来回顾一下这几节我们到底干了什么事情。 我们从一个 阅读全文
posted @ 2018-04-13 14:07 何塞穆里尼奥 阅读(365) 评论(1) 推荐(1) 编辑
摘要:经过了这么多节的优化,我们有了一个很通用的 createStore: 它的使用方式是: 我们再优化一下,其实 appState 和 stateChanger 可以合并到一起去: stateChanger 现在既充当了获取初始化数据的功能,也充当了生成更新数据的功能。如果有传入 state 就生成更新 阅读全文
posted @ 2018-04-13 13:42 何塞穆里尼奥 阅读(390) 评论(0) 推荐(1) 编辑
摘要:接下来两节某些地方可能会稍微有一点点抽象,但是我会尽可能用简单的方式进行讲解。如果你觉得理解起来有点困难,可以把这几节多读多理解几遍,其实我们一路走来都是符合“逻辑”的,都是发现问题、思考问题、优化代码的过程。所以最好能够用心留意、思考我们每一个提出来的问题。 细心的朋友可以发现,其实我们之前的例子 阅读全文
posted @ 2018-04-13 10:42 何塞穆里尼奥 阅读(354) 评论(0) 推荐(2) 编辑
摘要:我们接下来会继续优化我们的 createStore 的模式,让它使我们的应用程序获得更好的性能。 但在开始之前,我们先用一节的课程来介绍一下一个函数式编程里面非常重要的概念 —— 纯函数(Pure Function)。 简单来说,一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们 阅读全文
posted @ 2018-04-12 16:58 何塞穆里尼奥 阅读(348) 评论(0) 推荐(0) 编辑
摘要:上一节 的我们有了 appState 和 dispatch: 现在我们把它们集中到一个地方,给这个地方起个名字叫做 store,然后构建一个函数 createStore,用来专门生产这种 state 和 dispatch 的集合,这样别的 App 也可以用这种模式了: createStore 接受两 阅读全文
posted @ 2018-04-12 16:39 何塞穆里尼奥 阅读(671) 评论(0) 推荐(1) 编辑
摘要:从这节起我们开始学习 Redux,一种新型的前端“架构模式”。经常和 React.js 一并提出,你要用 React.js 基本都要伴随着 Redux 和 React.js 结合的库 React-redux。 要注意的是,Redux 和 React-redux 并不是同一个东西。Redux 是一种架 阅读全文
posted @ 2018-04-12 16:12 何塞穆里尼奥 阅读(595) 评论(2) 推荐(1) 编辑
摘要:这一节我们来介绍一个你可能永远用不上的 React.js 特性 —— context。但是了解它对于了解接下来要讲解的 React-redux 很有好处,所以大家可以简单了解一下它的概念和作用。 在过去很长一段时间里面,React.js 的 context 一直被视为一个不稳定的、危险的、可能会被去 阅读全文
posted @ 2018-04-12 11:10 何塞穆里尼奥 阅读(389) 评论(0) 推荐(0) 编辑
摘要:有时候人们很喜欢造一些名字很吓人的名词,让人一听这个名词就觉得自己不可能学会,从而让人望而却步。但是其实这些名词背后所代表的东西其实很简单。 我不能说高阶组件就是这么一个东西。但是它是一个概念上很简单,但却非常常用、实用的东西,被大量 React.js 相关的第三方库频繁地使用。在前端的业务开发当中 阅读全文
posted @ 2018-04-12 11:06 何塞穆里尼奥 阅读(747) 评论(0) 推荐(0) 编辑
摘要:删除评论 现在发布评论,评论不会消失,评论越来越多并不是什么好事。所以我们给评论组件加上删除评论的功能,这样就可以删除不想要的评论了。修改 src/Comment.js 的 render 方法,新增一个删除按钮: 我们在后面加了一个删除按钮,因为 index.css 定义了样式,所以鼠标放到特定的评 阅读全文
posted @ 2018-04-11 17:20 何塞穆里尼奥 阅读(346) 评论(0) 推荐(0) 编辑
摘要:持久化评论 同样地,可以通过类似于用户名持久化的方式对评论列表内容进行持久化,让用户发布的评论在刷新页面以后依然可以存在。修改 src/CommentApp.js: 我们增加了 _loadComments 和 _saveComments 分别用于加载和保存评论列表数据。用户每次提交评论都会把评论列表 阅读全文
posted @ 2018-04-11 17:15 何塞穆里尼奥 阅读(296) 评论(0) 推荐(0) 编辑
摘要:目前为止,第二阶段知识已经基本介绍完,我们已经具备了项目上手实战必备的 React.js 知识,现在可以把这些知识应用起来。接下来是实战环节,我们会继续上一阶段的例子,把评论功能做得更加复杂一点。 我们在上一阶段的评论功能基础上加上以下功能需求: 在线演示地址。 大家可以在原来的第一阶段代码的基础上 阅读全文
posted @ 2018-04-11 17:12 何塞穆里尼奥 阅读(240) 评论(0) 推荐(0) 编辑
摘要:我们来了到了一个非常尴尬的章节,很多初学的朋友可能对这一章的知识点不屑一顾,觉得用不用对程序功能也没什么影响。但其实这一章节的知识在你构建多人协作、大型的应用程序的时候也是非常重要的,不可忽视。 都说 JavaScript 是一门灵活的语言 —— 这就是像是说“你是个好人”一样,凡事都有背后没有说出 阅读全文
posted @ 2018-04-11 17:07 何塞穆里尼奥 阅读(260) 评论(0) 推荐(0) 编辑
摘要:这一节我们来补充两个之前没有提到的属性,但是在 React.js 组件开发中也非常常用,但是它们也很简单。 dangerouslySetHTML 出于安全考虑的原因(XSS 攻击),在 React.js 当中所有的表达式插入的内容都会被自动转义,就相当于 jQuery 里面的 text(…) 函数一 阅读全文
posted @ 2018-04-11 17:03 何塞穆里尼奥 阅读(2509) 评论(0) 推荐(0) 编辑
摘要:有一类组件,充当了容器的作用,它定义了一种外层结构形式,然后你可以往里面塞任意的内容。这种结构在实际当中非常常见,例如这种带卡片组件: 组件本身是一个不带任何内容的方形的容器,我可以在用这个组件的时候给它传入任意内容: 基于我们目前的知识储备,可以迅速写出这样的代码: 我们通过给 Card 组件传入 阅读全文
posted @ 2018-04-11 16:57 何塞穆里尼奥 阅读(286) 评论(0) 推荐(0) 编辑
摘要:在 React.js 当中你基本不需要和 DOM 直接打交道。React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListener的 DOM API;以前我们通过手动 DOM 操作进行页面更新(例如借助 jQuery),而在 阅读全文
posted @ 2018-04-11 16:54 何塞穆里尼奥 阅读(1256) 评论(0) 推荐(0) 编辑
摘要:从之前的章节我们了解到,组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。这是一个从无到有的过程,React.js 提供一些生命周期函数可以给我们在这个过程中做一些操作。 除了挂载阶段,还有一种“更新阶段”。说白了就是 setState 导致 React.js 重新渲染组件并且把组 阅读全文
posted @ 2018-04-11 16:51 何塞穆里尼奥 阅读(249) 评论(0) 推荐(0) 编辑
摘要:这一节我们来讨论一下对于一个组件来说,constructor 、componentWillMount、componentDidMount、componentWillUnmount 这几个方法在一个组件的出生到死亡的过程里面起了什么样的作用。 一般来说,所有关于组件自身的状态的初始化工作都会放在 co 阅读全文
posted @ 2018-04-11 16:49 何塞穆里尼奥 阅读(214) 评论(0) 推荐(0) 编辑
摘要:我们在讲解 JSX 的章节中提到,下面的代码: 会编译成: 其实我们把 Header 组件传给了 React.createElement 函数,又把函数返回结果传给了 ReactDOM.render。我们可以简单猜想一下它们会干什么事情: 上面过程其实很简单,看代码就能理解。 我们把 React.j 阅读全文
posted @ 2018-04-11 16:45 何塞穆里尼奥 阅读(324) 评论(0) 推荐(0) 编辑
摘要:上一个评论功能的案例中,可能会有些同学会对一个地方感到疑惑: CommentList 中显示的评论列表数据为什么要通过父组件 CommentApp 用 props 传进来?为什么不直接存放在 CommentList 的 state 当中?例如这样做也是可以的: 如果把这个 comments 放到 C 阅读全文
posted @ 2018-04-11 16:20 何塞穆里尼奥 阅读(315) 评论(0) 推荐(0) 编辑
摘要:接下来的代码比较顺理成章了。修改 CommentList 可以让它可以显示评论列表: 这里的代码没有什么新鲜的内容,只不过是建立了一个 comments 的数组来存放一些测试数据的内容,方便我们后续测试。然后把 comments 的数据渲染到页面上,这跟我们之前讲解的章节的内容一样——使用 map 阅读全文
posted @ 2018-04-11 16:16 何塞穆里尼奥 阅读(275) 评论(0) 推荐(0) 编辑
摘要:上一节我们构建了基本的代码框架,现在开始完善其他的内容。 处理用户输入 我们从 ComponentInput 组件开始,学习 React.js 是如何处理用户输入的。首先修改 ComponentInput.js,完善 ComponentInput 的 render 函数中的 HTML 结构: 在浏览 阅读全文
posted @ 2018-04-11 16:10 何塞穆里尼奥 阅读(292) 评论(0) 推荐(0) 编辑
摘要:课程到这里大家已经掌握了 React.js 的基础知识和组件的基本写法了。现在可以把我们所学到的内容应用于实战当中。这里给大家提供一个实战的案例:一个评论功能。效果如下: 在线演示地址 接下来会带大家一起来学习如何分析、编写这个功能。在这个过程中会补充一些之前没有提及的知识点,虽然这些知识点之前没有 阅读全文
posted @ 2018-04-11 16:04 何塞穆里尼奥 阅读(331) 评论(0) 推荐(0) 编辑
摘要:列表数据在前端非常常见,我们经常要处理这种类型的数据,例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。 React.js 当然也允许我们处理列表数据,但在使用 React.js 处理列表数据的时候,需要掌握一些规则。我们这一节会专门讨论这方面的知识。 渲染存放 JSX 阅读全文
posted @ 2018-04-11 15:57 何塞穆里尼奥 阅读(531) 评论(1) 推荐(0) 编辑
摘要:我们来一个关于 state 和 props 的总结。 state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.s 阅读全文
posted @ 2018-04-11 15:51 何塞穆里尼奥 阅读(219) 评论(1) 推荐(0) 编辑
摘要:组件是相互独立、可复用的单元,一个组件可能在不同地方被用到。但是在不同的场景下对这个组件的需求可能会根据情况有所不同,例如一个点赞按钮组件,在我这里需要它显示的文本是“点赞”和“取消”,当别的同事拿过去用的时候,却需要它显示“赞”和“已赞”。如何让组件能适应不同场景下的需求,我们就要让组件具有一定的 阅读全文
posted @ 2018-04-11 15:48 何塞穆里尼奥 阅读(332) 评论(1) 推荐(0) 编辑
摘要:state 我们前面提到过,一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态,就像一个点赞按钮,可以有“已点赞”和“未点赞”状态,并且可以在这两种状态之间进行切换。React.js 的 state 就是用来存储这种可变化的状态的。 我们还是拿点赞按钮做例子,它具有已点 阅读全文
posted @ 2018-04-11 15:38 何塞穆里尼奥 阅读(314) 评论(0) 推荐(0) 编辑
摘要:在 React.js 里面监听事件是很容易的事情,你只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性,例如我们现在要给 Title 加上点击的事件监听: 只需要给 h1 标签加上 onClick 的事件,onClick 紧跟着是一个表达式插入,这个表达式返回一 阅读全文
posted @ 2018-04-11 14:55 何塞穆里尼奥 阅读(297) 评论(2) 推荐(0) 编辑
摘要:继续拓展前面的例子,现在我们已经有了 Header 组件了。假设我们现在构建一个新的组件叫 Title,它专门负责显示标题。你可以在 Header 里面使用 Title组件: 我们可以直接在 Header 标签里面直接使用 Title 标签。就像是一个普通的标签一样。React.js 会在 <Tit 阅读全文
posted @ 2018-04-11 14:45 何塞穆里尼奥 阅读(702) 评论(0) 推荐(1) 编辑
摘要:React.js 中一切皆组件,用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候,一般都需要继承 React.js 的 Component(还有别的编写组件的方式我们后续会提到)。一个组件类必须要实现一个 render 方法,这个 render 方 阅读全文
posted @ 2018-04-11 14:02 何塞穆里尼奥 阅读(2021) 评论(0) 推荐(0) 编辑
摘要:这一节我们通过一个简单的例子讲解 React.js 描述页面 UI 的方式。把 src/index.js 中的代码改成: 我们在文件头部从 react 的包当中引入了 React 和 React.js 的组件父类 Component。记住,只要你要写 React.js 组件,那么就必须要引入这两个东 阅读全文
posted @ 2018-04-11 13:57 何塞穆里尼奥 阅读(332) 评论(0) 推荐(0) 编辑
摘要:安装 React.js React.js 单独使用基本上是不可能的事情。不要指望着类似于 jQuery 下载放到 <head /> 标签就开始使用。使用 React.js 不管在开发阶段生产阶段都需要一堆工具和库辅助,编译阶段你需要借助 Babel;需要 Redux 等第三方的状态管理工具来组织代码 阅读全文
posted @ 2018-04-11 13:51 何塞穆里尼奥 阅读(2852) 评论(0) 推荐(0) 编辑
摘要:为了让代码更灵活,可以写更多的组件,我们把这种模式抽象出来,放到一个 Component 类当中: 这个是一个组件父类 Component,所有的组件都可以继承这个父类来构建。它定义的两个方法,一个是我们已经很熟悉的 setState;一个是私有方法 _renderDOM。_renderDOM 方法 阅读全文
posted @ 2018-04-11 13:47 何塞穆里尼奥 阅读(506) 评论(0) 推荐(0) 编辑
摘要:看看上一节我们的代码,仔细留意一下 changeLikeText 函数,这个函数包含了 DOM 操作,现在看起来比较简单,那是因为现在只有 isLiked 一个状态。由于数据状态改变会导致需要我们去更新页面的内容,所以假想一下,如果你的组件依赖了很多状态,那么你的组件基本全部都是 DOM 操作。 一 阅读全文
posted @ 2018-04-11 13:42 何塞穆里尼奥 阅读(337) 评论(1) 推荐(0) 编辑
摘要:很多课程一上来就给大家如何配置环境、怎么写 React.js 组件。但是本课程还是希望大家对问题的根源有一个更加深入的了解,其实很多的库、框架都是解决类似的问题。只有我们对这些库、框架解决的问题有深入的了解和思考以后,我们才能得心应手地使用它们,并且有新的框架出来也不会太过迷茫————因为其实它们解 阅读全文
posted @ 2018-04-11 13:31 何塞穆里尼奥 阅读(463) 评论(1) 推荐(0) 编辑
摘要:React.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话,那么 React 的组件就相当于 MVC 里面的 View。如果你不熟悉也没关系,你可以简单地理解为,React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页 阅读全文
posted @ 2018-04-11 13:23 何塞穆里尼奥 阅读(904) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示