摘要：
删除评论 现在发布评论，评论不会消失，评论越来越多并不是什么好事。所以我们给评论组件加上删除评论的功能，这样就可以删除不想要的评论了。修改 src/Comment.js 的 render 方法，新增一个删除按钮： 我们在后面加了一个删除按钮，因为 index.css 定义了样式，所以鼠标放到特定的评 阅读全文
posted @ 2018-04-11 17:20
何塞穆里尼奥
阅读(378)
评论(0)
推荐(0)
摘要：
持久化评论 同样地，可以通过类似于用户名持久化的方式对评论列表内容进行持久化，让用户发布的评论在刷新页面以后依然可以存在。修改 src/CommentApp.js： 我们增加了 _loadComments 和 _saveComments 分别用于加载和保存评论列表数据。用户每次提交评论都会把评论列表 阅读全文
posted @ 2018-04-11 17:15
何塞穆里尼奥
阅读(307)
评论(0)
推荐(0)
摘要：
目前为止，第二阶段知识已经基本介绍完，我们已经具备了项目上手实战必备的 React.js 知识，现在可以把这些知识应用起来。接下来是实战环节，我们会继续上一阶段的例子，把评论功能做得更加复杂一点。 我们在上一阶段的评论功能基础上加上以下功能需求： 在线演示地址。 大家可以在原来的第一阶段代码的基础上 阅读全文
posted @ 2018-04-11 17:12
何塞穆里尼奥
阅读(262)
评论(0)
推荐(0)
摘要：
我们来了到了一个非常尴尬的章节，很多初学的朋友可能对这一章的知识点不屑一顾，觉得用不用对程序功能也没什么影响。但其实这一章节的知识在你构建多人协作、大型的应用程序的时候也是非常重要的，不可忽视。 都说 JavaScript 是一门灵活的语言 —— 这就是像是说“你是个好人”一样，凡事都有背后没有说出 阅读全文
posted @ 2018-04-11 17:07
何塞穆里尼奥
阅读(280)
评论(0)
推荐(0)
摘要：
这一节我们来补充两个之前没有提到的属性，但是在 React.js 组件开发中也非常常用，但是它们也很简单。 dangerouslySetHTML 出于安全考虑的原因（XSS 攻击），在 React.js 当中所有的表达式插入的内容都会被自动转义，就相当于 jQuery 里面的 text(…) 函数一 阅读全文
posted @ 2018-04-11 17:03
何塞穆里尼奥
阅读(2599)
评论(0)
推荐(0)
摘要：
有一类组件，充当了容器的作用，它定义了一种外层结构形式，然后你可以往里面塞任意的内容。这种结构在实际当中非常常见，例如这种带卡片组件： 组件本身是一个不带任何内容的方形的容器，我可以在用这个组件的时候给它传入任意内容： 基于我们目前的知识储备，可以迅速写出这样的代码： 我们通过给 Card 组件传入 阅读全文
posted @ 2018-04-11 16:57
何塞穆里尼奥
阅读(320)
评论(0)
推荐(0)
摘要：
在 React.js 当中你基本不需要和 DOM 直接打交道。React.js 提供了一系列的 on*方法帮助我们进行事件监听，所以 React.js 当中不需要直接调用 addEventListener的 DOM API；以前我们通过手动 DOM 操作进行页面更新（例如借助 jQuery），而在 阅读全文
posted @ 2018-04-11 16:54
何塞穆里尼奥
阅读(1269)
评论(0)
推荐(0)
摘要：
从之前的章节我们了解到，组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。这是一个从无到有的过程，React.js 提供一些生命周期函数可以给我们在这个过程中做一些操作。 除了挂载阶段，还有一种“更新阶段”。说白了就是 setState 导致 React.js 重新渲染组件并且把组 阅读全文
posted @ 2018-04-11 16:51
何塞穆里尼奥
阅读(257)
评论(0)
推荐(0)
摘要：
这一节我们来讨论一下对于一个组件来说，constructor 、componentWillMount、componentDidMount、componentWillUnmount 这几个方法在一个组件的出生到死亡的过程里面起了什么样的作用。 一般来说，所有关于组件自身的状态的初始化工作都会放在 co 阅读全文
posted @ 2018-04-11 16:49
何塞穆里尼奥
阅读(224)
评论(0)
推荐(0)
摘要：
我们在讲解 JSX 的章节中提到，下面的代码： 会编译成： 其实我们把 Header 组件传给了 React.createElement 函数，又把函数返回结果传给了 ReactDOM.render。我们可以简单猜想一下它们会干什么事情： 上面过程其实很简单，看代码就能理解。 我们把 React.j 阅读全文
posted @ 2018-04-11 16:45
何塞穆里尼奥
阅读(333)
评论(0)
推荐(0)
摘要：
上一个评论功能的案例中，可能会有些同学会对一个地方感到疑惑： CommentList 中显示的评论列表数据为什么要通过父组件 CommentApp 用 props 传进来？为什么不直接存放在 CommentList 的 state 当中？例如这样做也是可以的： 如果把这个 comments 放到 C 阅读全文
posted @ 2018-04-11 16:20
何塞穆里尼奥
阅读(332)
评论(0)
推荐(0)
摘要：
接下来的代码比较顺理成章了。修改 CommentList 可以让它可以显示评论列表： 这里的代码没有什么新鲜的内容，只不过是建立了一个 comments 的数组来存放一些测试数据的内容，方便我们后续测试。然后把 comments 的数据渲染到页面上，这跟我们之前讲解的章节的内容一样——使用 map 阅读全文
posted @ 2018-04-11 16:16
何塞穆里尼奥
阅读(286)
评论(0)
推荐(0)
摘要：
上一节我们构建了基本的代码框架，现在开始完善其他的内容。 处理用户输入 我们从 ComponentInput 组件开始，学习 React.js 是如何处理用户输入的。首先修改 ComponentInput.js，完善 ComponentInput 的 render 函数中的 HTML 结构： 在浏览 阅读全文
posted @ 2018-04-11 16:10
何塞穆里尼奥
阅读(301)
评论(0)
推荐(0)
摘要：
课程到这里大家已经掌握了 React.js 的基础知识和组件的基本写法了。现在可以把我们所学到的内容应用于实战当中。这里给大家提供一个实战的案例：一个评论功能。效果如下： 在线演示地址 接下来会带大家一起来学习如何分析、编写这个功能。在这个过程中会补充一些之前没有提及的知识点，虽然这些知识点之前没有 阅读全文
posted @ 2018-04-11 16:04
何塞穆里尼奥
阅读(342)
评论(0)
推荐(0)
摘要：
列表数据在前端非常常见，我们经常要处理这种类型的数据，例如文章列表、评论列表、用户列表…一个前端工程师几乎每天都需要跟列表数据打交道。 React.js 当然也允许我们处理列表数据，但在使用 React.js 处理列表数据的时候，需要掌握一些规则。我们这一节会专门讨论这方面的知识。 渲染存放 JSX 阅读全文
posted @ 2018-04-11 15:57
何塞穆里尼奥
阅读(543)
评论(1)
推荐(0)
摘要：
我们来一个关于 state 和 props 的总结。 state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.s 阅读全文
posted @ 2018-04-11 15:51
何塞穆里尼奥
阅读(226)
评论(1)
推荐(0)
摘要：
组件是相互独立、可复用的单元，一个组件可能在不同地方被用到。但是在不同的场景下对这个组件的需求可能会根据情况有所不同，例如一个点赞按钮组件，在我这里需要它显示的文本是“点赞”和“取消”，当别的同事拿过去用的时候，却需要它显示“赞”和“已赞”。如何让组件能适应不同场景下的需求，我们就要让组件具有一定的 阅读全文
posted @ 2018-04-11 15:48
何塞穆里尼奥
阅读(347)
评论(1)
推荐(0)
摘要：
state 我们前面提到过，一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态，就像一个点赞按钮，可以有“已点赞”和“未点赞”状态，并且可以在这两种状态之间进行切换。React.js 的 state 就是用来存储这种可变化的状态的。 我们还是拿点赞按钮做例子，它具有已点 阅读全文
posted @ 2018-04-11 15:38
何塞穆里尼奥
阅读(336)
评论(0)
推荐(0)
摘要：
在 React.js 里面监听事件是很容易的事情，你只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性，例如我们现在要给 Title 加上点击的事件监听： 只需要给 h1 标签加上 onClick 的事件，onClick 紧跟着是一个表达式插入，这个表达式返回一 阅读全文
posted @ 2018-04-11 14:55
何塞穆里尼奥
阅读(317)
评论(2)
推荐(0)
摘要：
继续拓展前面的例子，现在我们已经有了 Header 组件了。假设我们现在构建一个新的组件叫 Title，它专门负责显示标题。你可以在 Header 里面使用 Title组件： 我们可以直接在 Header 标签里面直接使用 Title 标签。就像是一个普通的标签一样。React.js 会在 <Tit 阅读全文
posted @ 2018-04-11 14:45
何塞穆里尼奥
阅读(754)
评论(0)
推荐(1)
摘要：
React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候，一般都需要继承 React.js 的 Component（还有别的编写组件的方式我们后续会提到）。一个组件类必须要实现一个 render 方法，这个 render 方 阅读全文
posted @ 2018-04-11 14:02
何塞穆里尼奥
阅读(2047)
评论(0)
推荐(0)
摘要：
这一节我们通过一个简单的例子讲解 React.js 描述页面 UI 的方式。把 src/index.js 中的代码改成： 我们在文件头部从 react 的包当中引入了 React 和 React.js 的组件父类 Component。记住，只要你要写 React.js 组件，那么就必须要引入这两个东 阅读全文
posted @ 2018-04-11 13:57
何塞穆里尼奥
阅读(354)
评论(0)
推荐(0)
摘要：
安装 React.js React.js 单独使用基本上是不可能的事情。不要指望着类似于 jQuery 下载放到 <head /> 标签就开始使用。使用 React.js 不管在开发阶段生产阶段都需要一堆工具和库辅助，编译阶段你需要借助 Babel；需要 Redux 等第三方的状态管理工具来组织代码 阅读全文
posted @ 2018-04-11 13:51
何塞穆里尼奥
阅读(2885)
评论(0)
推荐(0)
摘要：
为了让代码更灵活，可以写更多的组件，我们把这种模式抽象出来，放到一个 Component 类当中： 这个是一个组件父类 Component，所有的组件都可以继承这个父类来构建。它定义的两个方法，一个是我们已经很熟悉的 setState；一个是私有方法 _renderDOM。_renderDOM 方法 阅读全文
posted @ 2018-04-11 13:47
何塞穆里尼奥
阅读(540)
评论(0)
推荐(0)
摘要：
看看上一节我们的代码，仔细留意一下 changeLikeText 函数，这个函数包含了 DOM 操作，现在看起来比较简单，那是因为现在只有 isLiked 一个状态。由于数据状态改变会导致需要我们去更新页面的内容，所以假想一下，如果你的组件依赖了很多状态，那么你的组件基本全部都是 DOM 操作。 一 阅读全文
posted @ 2018-04-11 13:42
何塞穆里尼奥
阅读(356)
评论(1)
推荐(0)
摘要：
很多课程一上来就给大家如何配置环境、怎么写 React.js 组件。但是本课程还是希望大家对问题的根源有一个更加深入的了解，其实很多的库、框架都是解决类似的问题。只有我们对这些库、框架解决的问题有深入的了解和思考以后，我们才能得心应手地使用它们，并且有新的框架出来也不会太过迷茫————因为其实它们解 阅读全文
posted @ 2018-04-11 13:31
何塞穆里尼奥
阅读(504)
评论(1)
推荐(0)
摘要：
React.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话，那么 React 的组件就相当于 MVC 里面的 View。如果你不熟悉也没关系，你可以简单地理解为，React.js 将帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页 阅读全文
posted @ 2018-04-11 13:23
何塞穆里尼奥
阅读(915)
评论(0)
推荐(0)
浙公网安备 33010602011771号