dianyingtan8093-CSDN博客

转载实战分析：评论功能（九）

现在我们有三个 Dumb 组件，一个控制评论的 reducer。我们还缺什么？需要有人去 LocalStorage 加载数据，去控制新增、删除评论，去把数据保存到 LocalStorage 里面。之前这些逻辑我们都是零散地放在各个组件里面的（主要是CommentApp组件），那是因为当时我们还没对 Dumb 和 Smart 组件类型划分的认知，状态和视图之间也没有这么泾渭分明。而...

2018-04-16 14:49:00 244

转载实战分析：评论功能（八）

接下可以重构组件部分的内容了。先回顾一下之前我们是怎么划分组件的：组件树：这样划分方式当然是没错的。但是在组件的实现上有些问题，我们之前并没有太多地考虑复用性问题。所以现在可以看看comment-app2的CommentInput组件，你会发现它里面有一些 LocalStorage 操作：... _loadUsername () { ...

2018-04-16 14:45:00 182

转载实战分析：评论功能（七）

从本节开始，我们开始用 Redux、React-redux 来重构第二阶段的评论功能。产品需求跟之前一样，但是会用 Redux、React-redux 来帮助管理应用状态，而不是“状态提升”。让整个应用更加接近真实的工程。大家可以在第二阶段的代码上进行修改comment-app2（非高阶组件版本）。如果已经忘了第二阶段评论功能的同学可以先简单回顾一下它的功能需求，实战分析：评论功能...

2018-04-16 14:42:00 148

转载 Smart 组件 vs Dumb 组件

大家已经知道，只会接受props并且渲染确定结果的组件我们把它叫做 Dumb 组件，这种组件只关心一件事情 —— 根据props进行渲染。Dumb 组件最好不要依赖除了 React.js 和 Dumb 组件以外的内容。它们不要依赖 Redux 不要依赖 React-redux。这样的组件的可复用性是最好的，其他人可以安心地使用而不用怕会引入什么奇奇怪怪的东西。当我们拿到一...

2018-04-16 14:34:00 339

转载使用真正的 Redux 和 React-redux

现在make-react-redux工程代码中的 Redux 和 React-redux 都是我们自己写的，现在让我们来使用真正的官方版本的 Redux 和 React-redux。在工程目录下使用 npm 安装 Redux 和 React-redux 模块：npm install redux react-redux --save把src/目录下Header...

2018-04-13 16:04:00 72

转载动手实现 React-redux（六）：React-redux 总结

到这里大家已经掌握了 React-redux 的基本用法和概念，并且自己动手实现了一个 React-redux，我们回顾一下这几节都干了什么事情。React.js 除了状态提升以外并没有更好的办法帮我们解决组件之间共享状态的问题，而使用 context 全局变量让程序不可预测。通过 Redux 的章节，我们知道 store 里面的内容是不可以随意修改的，而是通过 dispatch 才...

2018-04-13 15:50:00 66

转载动手实现 React-redux（五）：Provider

我们要把 context 相关的代码从所有业务组件中清除出去，现在的代码里面还有一个地方是被污染的。那就是src/index.js里面的Index：...class Index extends Component { static childContextTypes = { store: PropTypes.object } getChi...

2018-04-13 15:43:00 117

转载动手实现 React-redux（四）：mapDispatchToProps

在重构ThemeSwitch的时候我们发现，ThemeSwitch除了需要store里面的数据以外，还需要store来dispatch：... // dispatch action 去改变颜色 handleSwitchColor (color) { const { store } = this.context store.dispa...

2018-04-13 15:24:00 256

转载动手实现 React-redux（三）：connect 和 mapStateToProps

我们来观察一下刚写下的这几个组件，可以轻易地发现它们有两个重大的问题：有大量重复的逻辑：它们基本的逻辑都是，取出 context，取出里面的 store，然后用里面的状态设置自己的状态，这些代码逻辑其实都是相同的。对 context 依赖性过强：这些组件都要依赖 context 来取数据，使得这个组件复用性基本为零。想一下，如果别人需要用到里面的ThemeSwitch组件...

2018-04-13 14:45:00 127

转载动手实现 React-redux（二）：结合 context 和 store

既然要把 store 和 context 结合起来，我们就先构建 store。在src/index.js加入之前创建的createStore函数，并且构建一个themeReducer来生成一个store：import React, { Component } from 'react'import PropTypes from 'prop-types'impo...

2018-04-13 14:29:00 247

转载动手实现 React-redux（一）：初始化工程

可以看到 Redux 并不复杂，它那些看起来匪夷所思的设定其实都是为了解决特定的问题而存在的，我们把问题想清楚以后就不难理解它的那些奇怪的设定了。这节开始我们来看看如何把 Redux 和 React.js 结合起来，你会发现其实它们也并不复杂。回顾一下，我们在前端应用状态管理 —— 状态提升中提过，前端中应用的状态存在的问题：一个状态可能被多个组件依赖或者影响，而 React.j...

2018-04-13 14:15:00 132

转载动手实现 Redux（六）：Redux 总结

不知不觉地，到这里大家不仅仅已经掌握了 Redux，而且还自己动手写了一个 Redux。我们从一个非常原始的代码开始，不停地在发现问题、解决问题、优化代码的过程中进行推演，最后把 Redux 模式自己总结出来了。这就是所谓的 Redux 模式，我们再来回顾一下这几节我们到底干了什么事情。我们从一个简单的例子的代码中发现了共享的状态如果可以被任意修改的话，那么程序的行为将非常不可预料，...

2018-04-13 14:07:00 69

转载动手实现 Redux（五）：不要问为什么的 reducer

经过了这么多节的优化，我们有了一个很通用的createStore：function createStore (state, stateChanger) { const listeners = [] const subscribe = (listener) => listeners.push(listener) const getState = () =&...

2018-04-13 13:42:00 60

转载动手实现 Redux（四）：共享结构的对象提高性能

接下来两节某些地方可能会稍微有一点点抽象，但是我会尽可能用简单的方式进行讲解。如果你觉得理解起来有点困难，可以把这几节多读多理解几遍，其实我们一路走来都是符合“逻辑”的，都是发现问题、思考问题、优化代码的过程。所以最好能够用心留意、思考我们每一个提出来的问题。细心的朋友可以发现，其实我们之前的例子当中是有比较严重的性能问题的。我们在每个渲染函数的开头打一些 Log 看看：fu...

2018-04-13 10:42:00 99

转载动手实现 Redux（三）：纯函数（Pure Function）简介

我们接下来会继续优化我们的createStore的模式，让它使我们的应用程序获得更好的性能。但在开始之前，我们先用一节的课程来介绍一下一个函数式编程里面非常重要的概念 —— 纯函数（Pure Function）。简单来说，一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。这么说肯定比较抽象，我们把它掰开来看：函数的返回结果只...

2018-04-12 16:58:00 236

转载动手实现 Redux（二）：抽离 store 和监控数据变化

上一节的我们有了appState和dispatch：let appState = { title: { text: 'React.js 小书', color: 'red', }, content: { text: 'React.js 小书内容', color: 'blue' }}function ...

2018-04-12 16:39:00 759

转载动手实现 Redux（一）：优雅地修改共享状态

从这节起我们开始学习 Redux，一种新型的前端“架构模式”。经常和 React.js 一并提出，你要用 React.js 基本都要伴随着 Redux 和 React.js 结合的库 React-redux。要注意的是，Redux 和 React-redux 并不是同一个东西。Redux 是一种架构模式（Flux 架构的一种变种），它不关注你到底用什么库，你可以把它应用到 React...

2018-04-12 16:12:00 137

转载 React.js 的 context

这一节我们来介绍一个你可能永远用不上的 React.js 特性 —— context。但是了解它对于了解接下来要讲解的 React-redux 很有好处，所以大家可以简单了解一下它的概念和作用。在过去很长一段时间里面，React.js 的 context 一直被视为一个不稳定的、危险的、可能会被去掉的特性而不被官网文档所记载。但是全世界的第三方库都在用使用这个特性，直到了 React...

2018-04-12 11:10:00 108

转载高阶组件（Higher-Order Components）

有时候人们很喜欢造一些名字很吓人的名词，让人一听这个名词就觉得自己不可能学会，从而让人望而却步。但是其实这些名词背后所代表的东西其实很简单。我不能说高阶组件就是这么一个东西。但是它是一个概念上很简单，但却非常常用、实用的东西，被大量 React.js 相关的第三方库频繁地使用。在前端的业务开发当中，你不掌握高阶组件其实也可以完成项目的开发，但是如果你能够灵活地使用高阶组件，可以让你代...

2018-04-12 11:06:00 197

转载实战分析：评论功能（六）

删除评论现在发布评论，评论不会消失，评论越来越多并不是什么好事。所以我们给评论组件加上删除评论的功能，这样就可以删除不想要的评论了。修改src/Comment.js的render方法，新增一个删除按钮：... render () { const { comment } = this.props return ( <div ...

2018-04-11 17:20:00 113

转载实战分析：评论功能（五）

持久化评论同样地，可以通过类似于用户名持久化的方式对评论列表内容进行持久化，让用户发布的评论在刷新页面以后依然可以存在。修改src/CommentApp.js：class CommentApp extends Component { constructor () { super() this.state = { comments: [...

2018-04-11 17:15:00 133

转载实战分析：评论功能（四）

目前为止，第二阶段知识已经基本介绍完，我们已经具备了项目上手实战必备的 React.js 知识，现在可以把这些知识应用起来。接下来是实战环节，我们会继续上一阶段的例子，把评论功能做得更加复杂一点。我们在上一阶段的评论功能基础上加上以下功能需求：页面加载完成自动聚焦到评论输入框。把用户名持久化，存放到浏览器的 LocalStorage 中。页面加载时会把用户名加载出来显示到...

2018-04-11 17:12:00 93

转载 PropTypes 和组件参数验证

我们来了到了一个非常尴尬的章节，很多初学的朋友可能对这一章的知识点不屑一顾，觉得用不用对程序功能也没什么影响。但其实这一章节的知识在你构建多人协作、大型的应用程序的时候也是非常重要的，不可忽视。都说 JavaScript 是一门灵活的语言 —— 这就是像是说“你是个好人”一样，凡事都有背后没有说出来的话。JavaScript 的灵活性体现在弱类型、高阶函数等语言特性上。而语言的弱类型...

2018-04-11 17:07:00 118

转载 dangerouslySetHTML 和 style 属性

这一节我们来补充两个之前没有提到的属性，但是在 React.js 组件开发中也非常常用，但是它们也很简单。dangerouslySetHTML出于安全考虑的原因（XSS 攻击），在 React.js 当中所有的表达式插入的内容都会被自动转义，就相当于 jQuery 里面的text(…)函数一样，任何的 HTML 格式都会被转义掉：class Editor extend...

2018-04-11 17:03:00 126

转载 props.children 和容器类组件

有一类组件，充当了容器的作用，它定义了一种外层结构形式，然后你可以往里面塞任意的内容。这种结构在实际当中非常常见，例如这种带卡片组件：组件本身是一个不带任何内容的方形的容器，我可以在用这个组件的时候给它传入任意内容：基于我们目前的知识储备，可以迅速写出这样的代码：class Card extends Component { render () { ...

2018-04-11 16:57:00 95

转载 ref 和 React.js 中的 DOM 操作

在 React.js 当中你基本不需要和 DOM 直接打交道。React.js 提供了一系列的on*方法帮助我们进行事件监听，所以 React.js 当中不需要直接调用addEventListener的 DOM API；以前我们通过手动 DOM 操作进行页面更新（例如借助 jQuery），而在 React.js 当中可以直接通过setState的方式重新渲染组件，渲染的时候可以把...

2018-04-11 16:54:00 52

转载更新阶段的组件生命周期

从之前的章节我们了解到，组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。这是一个从无到有的过程，React.js 提供一些生命周期函数可以给我们在这个过程中做一些操作。除了挂载阶段，还有一种“更新阶段”。说白了就是setState导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程，这是一个组件的变化过程。而 React.js 也提...

2018-04-11 16:51:00 137

转载挂载阶段的组件生命周期（二）

这一节我们来讨论一下对于一个组件来说，constructor、componentWillMount、componentDidMount、componentWillUnmount这几个方法在一个组件的出生到死亡的过程里面起了什么样的作用。一般来说，所有关于组件自身的状态的初始化工作都会放在constructor里面去做。你会发现本书所有组件的state的初始化工作都是放在...

2018-04-11 16:49:00 89

转载挂载阶段的组件生命周期（一）

我们在讲解 JSX 的章节中提到，下面的代码：ReactDOM.render( <Header />, document.getElementById('root'))会编译成：ReactDOM.render( React.createElement(Header, null), document.getElementBy...

2018-04-11 16:45:00 410

转载前端应用状态管理 —— 状态提升

上一个评论功能的案例中，可能会有些同学会对一个地方感到疑惑：CommentList中显示的评论列表数据为什么要通过父组件CommentApp用props传进来？为什么不直接存放在CommentList的state当中？例如这样做也是可以的：class CommentList extends Component { constructor () { ...

2018-04-11 16:20:00 109

转载实战分析：评论功能（三）

接下来的代码比较顺理成章了。修改CommentList可以让它可以显示评论列表：// CommentList.jsimport React, { Component } from 'react'class CommentList extends Component { render() { const comments = [ {us...

2018-04-11 16:16:00 87

转载实战分析：评论功能（二）

上一节我们构建了基本的代码框架，现在开始完善其他的内容。处理用户输入我们从ComponentInput组件开始，学习 React.js 是如何处理用户输入的。首先修改ComponentInput.js，完善ComponentInput的render函数中的 HTML 结构：import React, { Component } from 'react'...

2018-04-11 16:10:00 85

转载实战分析：评论功能（一）

课程到这里大家已经掌握了 React.js 的基础知识和组件的基本写法了。现在可以把我们所学到的内容应用于实战当中。这里给大家提供一个实战的案例：一个评论功能。效果如下：在线演示地址接下来会带大家一起来学习如何分析、编写这个功能。在这个过程中会补充一些之前没有提及的知识点，虽然这些知识点之前没有单独拿出来讲解，但是这些知识点也很关键。组件划分React.js 中...

2018-04-11 16:04:00 138

转载渲染列表数据

列表数据在前端非常常见，我们经常要处理这种类型的数据，例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。React.js 当然也允许我们处理列表数据，但在使用 React.js 处理列表数据的时候，需要掌握一些规则。我们这一节会专门讨论这方面的知识。渲染存放 JSX 元素的数组假设现在我们有这么一个用户列表数据，存放在一个数组当中：con...

2018-04-11 15:57:00 107

转载 state vs props

我们来一个关于state和props的总结。state的主要作用是用于组件保存、控制、修改自己的可变状态。state在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为state是一个局部的、只能被组件自身控制的数据源。state中状态可以通过this.setState方法进行更新，setState会导致组件的重新渲染。props的主...

2018-04-11 15:51:00 49

转载配置组件的 props

组件是相互独立、可复用的单元，一个组件可能在不同地方被用到。但是在不同的场景下对这个组件的需求可能会根据情况有所不同，例如一个点赞按钮组件，在我这里需要它显示的文本是“点赞”和“取消”，当别的同事拿过去用的时候，却需要它显示“赞”和“已赞”。如何让组件能适应不同场景下的需求，我们就要让组件具有一定的“可配置”性。React.js 的props就可以帮助我们达到这个效果。每个组件都...

2018-04-11 15:48:00 61

转载组件的 state 和 setState

state我们前面提到过，一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态，就像一个点赞按钮，可以有“已点赞”和“未点赞”状态，并且可以在这两种状态之间进行切换。React.js 的state就是用来存储这种可变化的状态的。我们还是拿点赞按钮做例子，它具有已点赞和未点赞两种状态。那么就可以把这个状态存储在 state 中。修改src/in...

2018-04-11 15:38:00 80

转载事件监听

在 React.js 里面监听事件是很容易的事情，你只需要给需要监听事件的元素加上属性类似于onClick、onKeyDown这样的属性，例如我们现在要给Title加上点击的事件监听：class Title extends Component { handleClickOnTitle () { console.log('Click on title.')...

2018-04-11 14:55:00 67

转载组件的组合、嵌套和组件树

继续拓展前面的例子，现在我们已经有了Header组件了。假设我们现在构建一个新的组件叫Title，它专门负责显示标题。你可以在Header里面使用Title组件：class Title extends Component { render () { return ( <h1>React 小书</h1> )...

2018-04-11 14:45:00 109

转载组件的 render 方法

React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候，一般都需要继承 React.js 的Component（还有别的编写组件的方式我们后续会提到）。一个组件类必须要实现一个render方法，这个render方法必须要返回一个 JSX 元素。但这里要注意的是，必须要用一个外层的 JSX 元素把所有内...

2018-04-11 14:02:00 339

空空如也

空空如也