React.js 小书 Lesson27 - 实战分析:评论功能(六)

2017-11-10
阅读 5 分钟
3k
React.js 小书 Lesson27 - 实战分析:评论功能(六) 本文作者:胡子大哈本文原文:[链接] 转载请注明出处,保留原文链接以及作者信息 在线阅读:[链接] {%raw%} 删除评论 现在发布评论,评论不会消失,评论越来越多并不是什么好事。所以我们给评论组件加上删除评论的功能,这样就可以删除不想要的评论了。修改 src/Comm...

React.js 小书 Lesson26 - 实战分析:评论功能(五)

2017-11-10
阅读 3 分钟
2.3k
同样地,可以通过类似于用户名持久化的方式对评论列表内容进行持久化,让用户发布的评论在刷新页面以后依然可以存在。修改 src/CommentApp.js:

React.js 小书 Lesson25 - 实战分析:评论功能(四)

2017-11-10
阅读 4 分钟
2.3k
目前为止,第二阶段知识已经基本介绍完,我们已经具备了项目上手实战必备的 React.js 知识,现在可以把这些知识应用起来。接下来是实战环节,我们会继续上一阶段的例子,把评论功能做得更加复杂一点。

React.js 小书 Lesson24 - PropTypes 和组件参数验证

2017-11-10
阅读 3 分钟
1.9k
我们来了到了一个非常尴尬的章节,很多初学的朋友可能对这一章的知识点不屑一顾,觉得用不用对程序功能也没什么影响。但其实这一章节的知识在你构建多人协作、大型的应用程序的时候也是非常重要的,不可忽视。

React.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性

2017-11-10
阅读 2 分钟
1.9k
React.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性 本文作者:胡子大哈本文原文:[链接] 转载请注明出处,保留原文链接以及作者信息 在线阅读:[链接] {% raw %}这一节我们来补充两个之前没有提到的属性,但是在 React.js 组件开发中也非常常用,但是它们也很简单。 dangerouslySetHTML 出于安全考虑的原因(X...

React.js 小书 Lesson22 - props.children 和容器类组件

2017-11-10
阅读 3 分钟
2k
React.js 小书 Lesson22 - props.children 和容器类组件 本文作者:胡子大哈本文原文:[链接] 转载请注明出处,保留原文链接以及作者信息 在线阅读:[链接] 有一类组件,充当了容器的作用,它定义了一种外层结构形式,然后你可以往里面塞任意的内容。这种结构在实际当中非常常见,例如这种带卡片组件: 组件本身是一个不...

React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

2017-11-10
阅读 2 分钟
2k
在 React.js 当中你基本不需要和 DOM 直接打交道。React.js 提供了一些列的 on* 方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListener 的 DOM API;以前我们通过手动 DOM 操作进行页面更新(例如借助 jQuery),而在 React.js 当中可以直接通过 setState 的方式重新渲染组件,渲染的时候可以把...

React.js 小书 Lesson20 - 更新阶段的组件生命周期

2017-11-10
阅读 1 分钟
2.1k
从之前的章节我们了解到,组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。这是一个从无到有的过程,React.js 提供一些生命周期函数可以给我们在这个过程中做一些操作。

React.js 小书 Lesson19 - 挂载阶段的组件生命周期(二)

2017-11-10
阅读 3 分钟
2k
这一节我们来讨论一下对于一个组件来说,constructor 、componentWillMount、componentDidMount、componentWillUnmount 这几个方法在一个组件的出生到死亡的过程里面起了什么样的作用。

React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)

2017-11-10
阅读 4 分钟
3.3k
React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一) 本文作者:胡子大哈本文原文:[链接] 转载请注明出处,保留原文链接以及作者信息 在线阅读:[链接] 我们在讲解 JSX 的章节中提到,下面的代码: {代码...} 会编译成: {代码...} 其实我们把 Header 组件传给了 React.createElement 函数,又把函数返回结果传给了...

React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

2017-11-10
阅读 3 分钟
1.9k
上一个评论功能的案例中,可能会有些同学会对一个地方感到疑惑: CommentList 中显示的评论列表数据为什么要通过父组件 CommentApp 用 props 传进来?为什么不直接存放在 CommentList 的 state 当中?例如这样做也是可以的:

React.js 小书 Lesson16 - 实战分析:评论功能(三)

2017-11-10
阅读 5 分钟
2.5k
React.js 小书 Lesson16 - 实战分析:评论功能(三) 本文作者:胡子大哈本文原文:[链接] 转载请注明出处,保留原文链接以及作者信息 在线阅读:[链接] 接下来的代码比较顺理成章了。修改 CommentList 可以让它可以显示评论列表: {代码...} 这里的代码没有什么新鲜的内容,只不过是建立了一个 comments 的数组来存放一...

React.js 小书 Lesson15 - 实战分析:评论功能(二)

2017-11-10
阅读 5 分钟
1.6k
React.js 小书 Lesson15 - 实战分析:评论功能(二) 本文作者:胡子大哈本文原文:[链接] 转载请注明出处,保留原文链接以及作者信息 在线阅读:[链接] 上一节我们构建了基本的代码框架,现在开始完善其他的内容。 处理用户输入 我们从 ComponentInput 组件开始,学习 React.js 是如何处理用户输入的。首先修改 Compone...

React.js 小书 Lesson14 - 实战分析:评论功能(一)

2017-11-10
阅读 4 分钟
3.3k
课程到这里大家已经掌握了 React.js 的基础知识和组件的基本写法了。现在可以把我们所学到的内容应用于实战当中。这里给大家提供一个实战的案例:一个评论功能。效果如下:

React.js 小书 Lesson13 - 渲染列表数据

2017-11-10
阅读 5 分钟
2.3k
React.js 小书 Lesson13 - 渲染列表数据 本文作者:胡子大哈本文原文:[链接] 转载请注明出处,保留原文链接以及作者信息 在线阅读:[链接] 列表数据在前端非常常见,我们经常要处理这种类型的数据,例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。 React.js 当然也允许我们处理列表...

React.js 小书 Lesson12 - state vs props

2017-11-10
阅读 2 分钟
1.6k
React.js 小书 Lesson12 - state vs props 本文作者:胡子大哈本文原文:[链接] 转载请注明出处,保留原文链接以及作者信息 在线阅读:[链接] 我们来一个关于 state 和 props 的总结。 state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修...

React.js 小书 Lesson11 - 配置组件的 props

2017-11-10
阅读 5 分钟
2.1k
组件是相互独立、可复用的单元,一个组件可能在不同地方被用到。但是在不同的场景下对这个组件的需求可能会根据情况有所不同,例如一个点赞按钮组件,在我这里需要它显示的文本是“点赞”和“取消”,当别的同事拿过去用的时候,却需要它显示“赞”和“已赞”。如何让组件能适应不同场景下的需求,我们就要让组件具有一定的“可配...

React.js 小书 Lesson10 - 组件的 state 和 setState

2017-11-10
阅读 4 分钟
2.3k
我们前面提到过,一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态,就像一个点赞按钮,可以有“已点赞”和“未点赞”状态,并且可以在这两种状态之间进行切换。React.js 的 state 就是用来存储这种可变化的状态的。

React.js 小书 Lesson9 - 事件监听

2017-11-10
阅读 3 分钟
2.5k
在 React.js 里面监听事件是很容易的事情,你只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性,例如我们现在要给 Title 加上点击的事件监听:

React.js 小书 Lesson8 - 组件的组合、嵌套和组件树

2017-11-10
阅读 2 分钟
1.6k
继续拓展前面的例子,现在我们已经有了 Header 组件了。假设我们现在构建一个新的组件叫 Title,它专门负责显示标题。你可以在 Header 里面使用 Title组件:

React.js 小书 Lesson7 - 组件的 render 方法

2017-11-10
阅读 4 分钟
2k
React.js 中一切皆组件,用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候,一般都需要继承 React.js 的 Component(还有别的编写组件的方式我们后续会提到)。一个组件类必须要实现一个 render 方法,这个 render 方法必须要返回一个 JSX 元素。但这里要注意的是,必须要用一个外层的 JSX 元素...

React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息

2017-11-10
阅读 4 分钟
2.4k
React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息 本文作者:胡子大哈本文原文:[链接] 转载请注明出处,保留原文链接以及作者信息 在线阅读:[链接] 这一节我们通过一个简单的例子讲解 React.js 描述页面 UI 的方式。把 src/index.js 中的代码改成: {代码...} 我们在文件头部从 react 的包当中引入了 React 和 React.js...

React.js 小书 Lesson5 - React.js 基本环境安装

2017-11-10
阅读 2 分钟
2.4k
React.js 单独使用基本上是不可能的事情。不要指望着类似于 jQuery 下载放到 <head /> 标签就开始使用。使用 React.js 不管在开发阶段生产阶段都需要一堆工具和库辅助,编译阶段你需要借助 Babel;需要 Redux 等第三方的状态管理工具来组织代码;如果你要写单页面应用那么你需要 React-router。这就是所谓的“React...

React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类

2017-11-10
阅读 4 分钟
2.1k
React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类 本文作者:胡子大哈本文原文:[链接] 转载请注明出处,保留原文链接以及作者信息 在线阅读:[链接] 为了让代码更灵活,可以写更多的组件,我们把这种模式抽象出来,放到一个 Component 类当中: {代码...} 这个是一个组件父类 Component,所有的组件都可以...

React.js 小书 Lesson3 - 前端组件化(二):优化 DOM 操作

2017-11-10
阅读 3 分钟
4k
看看上一节前端组件化(一):从一个简单的例子讲起我们的代码,仔细留意一下 changeLikeText 函数,这个函数包含了 DOM 操作,现在看起来比较简单,那是因为现在只有 isLiked 一个状态。由于数据状态改变会导致需要我们去更新页面的内容,所以假想一下,如果你的组件依赖了很多状态,那么你的组件基本全部都是 DOM 操作。

React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起

2017-11-10
阅读 4 分钟
4.6k
React.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话,那么 React 的组件就相当于 MVC 里面的 View。如果你不熟悉也没关系,你可以简单地理解为,React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。

如何在非 React 项目中使用 Redux

2017-06-28
阅读 7 分钟
5.7k
本文作者:胡子大哈 原文链接:[链接] 转载请注明出处,保留原文链接和作者信息。 目录 1、前言 2、单纯使用 Redux 的问题 2.1、问题 1:代码冗余 2.2、问题2:不必要的渲染 3、React-redux 都干了什么 4、构建自己项目中的 “Provider” 和 “connect” 4.1、包装渲染函数 4.2、避免没有必要的渲染 5、总结 6、练习 1、前言...

ES6:spread syntax —— JavaScript 将元素应用于数组和函数的优雅方法

2017-05-12
阅读 3 分钟
4.5k
编译:胡子大哈 翻译原文:[链接] 英文连接:ES6: The spread syntax — A concise way of applying elements to arrays and functions in JavaScript 转载请注明出处,保留原文链接以及作者信息 上一篇文章中,我介绍了一些关于 ES6 解构方法的新特性。 本文中我们一起来看一下另外一个 JavaScript 新增语法 —— spread s...

ES6:解构——JavaScript 从数组和对象中提取数据的优雅方法

2017-04-24
阅读 3 分钟
29.9k
本文编译:胡子大哈 翻译原文:[链接] 英文连接:ES6: Destructuring — an elegant way of extracting data from arrays and objects in JavaScript 转载请注明出处,保留原文链接以及作者信息 ES6 有很多新特性,它很大程度上提升了 JavaScript 的编程体验,并且也告诉外界,JavaScript 依旧强势。 其中一个新特性是其...

手把手教你用 JavaScript 实现一个简单的国际象棋 AI

2017-04-21
阅读 5 分钟
15k
本文作者: Lauri Hartikka 编译:胡子大哈 翻译原文:[链接] 英文连接:A step-by-step guide to building a simple chess AI 转载请注明出处,保留原文链接以及作者信息 首先让我们先看几个对开发简单国际象棋 AI 很有帮助的概念: 移动生成 局面评估 极大极小算法 α-β 剪枝 每一步中我们都会对经过时间检验的国际象棋...