React.js 小书 Lesson15 - 实战分析：评论功能（二）

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson15 转载请注明出处,保留原文链接和作者信息. 上一节我们构建了基本的代码框架,现在开始完善其他的内容. 处理用户输入我们从 ComponentInput 组件开始,学习 React.js 是如何处理用户输入的.首先修改 ComponentInput.js,完善 ComponentInput 的 render 函数中的 HTML 结构: import React, { Component…

React.js 小书 Lesson25 - 实战分析：评论功能（四）

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本介绍完,我们已经具备了项目上手实战必备的 React.js 知识,现在可以把这些知识应用起来.接下来是实战环节,我们会继续上一阶段的例子,把评论功能做得更加复杂一点. 我们在上一阶段的评论功能基础上加上以下功能需求: 页面加载完成自动聚焦到评论输入框. 把用户名持久化,存放到浏览器的 LocalSt…

React.js 小书 Lesson16 - 实战分析：评论功能（三）

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson16 转载请注明出处,保留原文链接和作者信息. 接下来的代码比较顺理成章了.修改 CommentList 可以让它可以显示评论列表: // CommentList.js import React, { Component } from 'react' class CommentList extends Component { render() { const comments = [ {us…

React.js 小书 Lesson14 - 实战分析：评论功能（一）

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson14 转载请注明出处,保留原文链接和作者信息. 课程到这里大家已经掌握了 React.js 的基础知识和组件的基本写法了.现在可以把我们所学到的内容应用于实战当中.这里给大家提供一个实战的案例:一个评论功能.效果如下: 在线演示地址接下来会带大家一起来学习如何分析.编写这个功能.在这个过程中会补充一些之前没有提及的知识点,虽然这些知识点之前没有单独拿出来讲解,但是这些知识点也很关键. 组件…

React.js 小书 Lesson26 - 实战分析：评论功能（五）

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson26 转载请注明出处,保留原文链接和作者信息. (本文未审核) 持久化评论同样地,可以通过类似于用户名持久化的方式对评论列表内容进行持久化,让用户发布的评论在刷新页面以后依然可以存在.修改 src/CommentApp.js: class CommentApp extends Component { constructor () { super() this.state = { comme…

React.js 小书 Lesson27 - 实战分析：评论功能（六）

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson27 转载请注明出处,保留原文链接和作者信息. (本文未审核) 删除评论现在发布评论,评论不会消失,评论越来越多并不是什么好事.所以我们给评论组件加上删除评论的功能,这样就可以删除不想要的评论了.修改 src/Comment.js 的 render 方法,新增一个删除按钮: ... render () { const { comment } = this.props return ( <d…

React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson3 转载请注明出处,保留原文链接和作者信息. 看看上一节我们的代码,仔细留意一下 changeLikeText 函数,这个函数包含了 DOM 操作,现在看起来比较简单,那是因为现在只有 isLiked 一个状态.由于数据状态改变会导致需要我们去更新页面的内容,所以假想一下,如果你的组件依赖了很多状态,那么你的组件基本全部都是 DOM 操作. 一个组件的显示形态由多个状态决定的情况非常常见.代…

【React.js小书】动手实现 React-redux（五）：Provider - 方志

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

React.js 小书介绍

React.js 小书 Github 关于作者这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是把一些想法慢慢整理书写下来,做成一本开源.免费.专业.简单的入门级别的小书,提供给社区.希望能够帮助到更多 React.js 刚入门朋友. 由于水平有限,编写的过程难免会有诸多错误,也希望大家在看的过程中发现了问题,可以在 Github 上给该项目发 Pull Request.衷心希望可以有更多的人…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程.这是一个从无到有的过程,React.js 提供一些生命周期函数可以给我们在这个过程中做一些操作. 除了挂载阶段,还有一种“更新阶段”.说白了就是 setState 导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程,这是一个…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友可能对这一章的知识点不屑一顾,觉得用不用对程序功能也没什么影响.但其实这一章节的知识在你构建多人协作.大型的应用程序的时候也是非常重要的,不可忽视. 都说 JavaScript 是一门灵活的语言 —— 这就是像是说“你是个好人”一样,凡事都有背后没有说出来的话.JavaScript 的灵活性体现在弱…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson23 转载请注明出处,保留原文链接和作者信息. 这一节我们来补充两个之前没有提到的属性,但是在 React.js 组件开发中也非常常用,但是它们也很简单. dangerouslySetHTML 出于安全考虑的原因(XSS 攻击),在 React.js 当中所有的表达式插入的内容都会被自动转义,就相当于 jQuery 里面的 text(…) 函数一样,任何的 HTML 格式都会被转义掉: cl…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListener的 DOM API:以前我们通过手动 DOM 操作进行页面更新(例如借助 jQuery),而在 React.js 当中可以直接通过 setSt…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层结构形式,然后你可以往里面塞任意的内容.这种结构在实际当中非常常见,例如这种带卡片组件: 组件本身是一个不带任何内容的方形的容器,我可以在用这个组件的时候给它传入任意内容: 基于我们目前的知识储备,可以迅速写出这样的代码: class Card extends Component { render…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,constructor .componentWillMount.componentDidMount.componentWillUnmount 这几个方法在一个组件的出生到死亡的过程里面起了什么样的作用. 一般来说,所有关于组件自身的状态的初始化工作都会放在 constructor 里面去做.你会发现本书所有…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ReactDOM.render( <Header />, document.getElementById('root') ) 会编译成: ReactDOM.render( React.createElement(Header, null), document.getElementById('ro…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson17 转载请注明出处,保留原文链接和作者信息. 上一个评论功能的案例中,可能会有些同学会对一个地方感到疑惑: CommentList中显示的评论列表数据为什么要通过父组件 CommentApp 用 props 传进来?为什么不直接存放在 CommentList 的 state 当中?例如这样做也是可以的: class CommentList extends Component { const…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson13 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型的数据,例如文章列表.评论列表.用户列表…一个前端工程师几乎每天都需要跟列表数据打交道. React.js 当然也允许我们处理列表数据,但在使用 React.js 处理列表数据的时候,需要掌握一些规则.我们这一节会专门讨论这方面的知识. 渲染存放 JSX 元素的数组假设现在我们有这么一个用户列表数…

React.js 小书 Lesson12 - state vs props

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson12 转载请注明出处,保留原文链接和作者信息. 我们来一个关于 state 和 props 的总结. state 的主要作用是用于组件保存.控制.修改自己的可变状态.state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改.你可以认为 state 是一个局部的.只能被组件自身控制的数据源.state 中状态可以通过 this.setState 方法进行更新,setState…

React.js 小书 Lesson9 - 事件监听

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情,你只需要给需要监听事件的元素加上属性类似于 onClick.onKeyDown 这样的属性,例如我们现在要给 Title 加上点击的事件监听: class Title extends Component { handleClickOnTitle () { console.log('Click on…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson8 转载请注明出处,保留原文链接和作者信息. 继续拓展前面的例子,现在我们已经有了 Header 组件了.假设我们现在构建一个新的组件叫 Title,它专门负责显示标题.你可以在 Header 里面使用 Title组件: class Title extends Component { render () { return ( <h1>React 小书</h1> ) } } cl…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson6 转载请注明出处,保留原文链接和作者信息. 这一节我们通过一个简单的例子讲解 React.js 描述页面 UI 的方式.把 src/index.js中的代码改成: import React, { Component } from 'react' import ReactDOM from 'react-dom' import './index.css' class Header extend…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson7 转载请注明出处,保留原文链接和作者信息. React.js 中一切皆组件,用 React.js 写的其实就是 React.js 组件.我们在编写 React.js 组件的时候,一般都需要继承 React.js 的 Component(还有别的编写组件的方式我们后续会提到).一个组件类必须要实现一个 render 方法,这个 render方法必须要返回一个 JSX 元素.但这里要注意的是,…

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

作者:胡子大哈原文链接:http://huziketang.com/books/react/lesson5 转载请注明出处,保留原文链接和作者信息. 安装 React.js React.js 单独使用基本上是不可能的事情.不要指望着类似于 jQuery 下载放到 <head /> 标签就开始使用.使用 React.js 不管在开发阶段生产阶段都需要一堆工具和库辅助,编译阶段你需要借助 Babel:需要 Redux 等第三方的状态管理工具来组织代码:如果你要写单页面应用那么你需要 React-…

React.js小书总结

(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成了我们的页面. react.js 不是一个框架,它只是一个库.它只提供 UI (view)层面的解决方案.在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux.React-router 等来协助提供完整的解决方法. 组件化可以帮助我们解决前端结构的复用性问题,整个页面可以…