很多课程一上来就给大家如何配置环境、怎么写 React.js 组件。但是本课程还是希望大家对问题的根源有一个更加深入的了解，其实很多的库、框架都是解决类似的问题。只有我们对这些库、框架解决的问题有深入的了解和思考以后，我们才能得心应手地使用它们，并且有新的框架出来也不会太过迷茫；因为其实它们解决都是同一个问题。

这两节课我们来探讨一下是什么样的问题导致了我们需要前端页面进行组件化，前端页面的组件化需要解决什么样的问题。后续课程我们再来看看 React.js 是怎么解决这些问题的。

所以这几节所讲的内容将和 React.js 的内容没有太大的关系，但是如果你能顺利了解这几节的内容，那么后面哪些对新手来说很复杂的概念对你来说就是非常自然的事。

一个简单的点赞功能

我们会从一个简单的点赞功能讲起。 假设现在我们需要实现一个点赞、取消点赞的功能。

如果你对前端稍微有一点了解，你就顺手拈来：

HTML:

  <body>

    <div class='wrapper'>

      <button class='like-btn'>

        <span class='like-text'>点赞</span>

        <span>												


											
React.js 小书 Lesson2 - 前端组件化（一）：从一个简单的例子讲起的更多相关文章
	

    
								
  1. React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson4 转载请注明出处,保留原文链接和作者信息. 为了让代码更灵活,可以写更多的组件,我们把这种模 ...
    
		
    2. 
						
  2. React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson3 转载请注明出处,保留原文链接和作者信息. 看看上一节我们的代码,仔细留意一下 change ...
    
		
    3. 
						
  3. React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson17 转载请注明出处,保留原文链接和作者信息. 上一个评论功能的案例中,可能会有些同学会对一个 ...
    
		
    4. 
						
  4. React.js 小书 Lesson11 - 配置组件的 props
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson11 转载请注明出处,保留原文链接和作者信息. 组件是相互独立.可复用的单元,一个组件可能在不 ...
    
		
    5. 
						
  5. React.js 小书介绍
		
    React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...
    
		
    6. 
						
  6. React.js 小书 Lesson24 - PropTypes 和组件参数验证
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...
    
		
    7. 
						
  7. React.js 小书 Lesson22 - props.children 和容器类组件
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...
    
		
    8. 
						
  8. React.js 小书 Lesson20 - 更新阶段的组件生命周期
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...
    
		
    9. 
						
  9. React.js 小书 Lesson19 - 挂载阶段的组件生命周期（二）
		
    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. sql 简单的定义变量 声明  输出
			
    --定义变量 声明 变量名 数据类型 varchar默认长度为1 --char 当字符不够时 用空格代替 declare @a char(10) --字符串用单引号 set @a ='abcdef'  ...
    
			
    2. 
						
  2. ASP.NET MVC 视图层-生成链接相关(Html.ActionLink,Url.Action)
			
    1. @Html.ActionLink()  参考 也是使用在chtml模板中,返回参数中指定controller.指定action的所生成的超链接标签<a>标签html文本.如果没有指定 ...
    
			
    3. 
						
  3. Docker 的优势
			
    下面我们主要从Docker对业务架构和生产实践的角度来分析. 随着业务规模的逐渐扩大,产品复杂度也随着增加,企业需要解决快速迭代.高可靠和高可用等问题,一个自然的选择是服务化的拆分,把一个单体架构拆分 ...
    
			
    4. 
						
  4. Java整体之JavaEE
			
    思维导图 (Xmind)链接:http://pan.baidu.com/s/1pKTOTRH 密码:oq7f <iframe src="http://www.xmind.net/emb ...
    
			
    5. 
						
  5. Ceph配置文件查看修改方式
			
    1.     修改ceph配置文件的方式有三种:(其中包含临时和永久生效) 1)      修改所有或者指定的进程 2)      修改当前服务器进程 3)      修改配置文件 Note:在线修改 ...
    
			
    6. 
						
  6. ipad中icon与launchimage的size
			
    图标(AppIcon)与启动图(LaunchImage)是开发iOS应用程序必不可少的内容,但是在网络上对于这部分的内容讲解的并不详细,所以花些时间写了这篇文章,希望有需要的朋友可以随时查看 想知道A ...
    
			
    7. 
						
  7. 数据结构28：广义表及M元多项式
			
    广义表,又称为列表.记作: LS = (a1,a2,…,an) ;( LS 为广义表的名称, an 表示广义表中的数据). 广义表可以看作是线性表的推广.两者区别是:线性表中的数据元素只能表示单个数据 ...
    
			
    8. 
						
  8. mybatis组合实体查询
			
    mybatis组合实体查询 <resultMap id="wxIndexMap" type="com.o2o.common.model.wxuntity.WxInd ...
    
			
    9. 
						
  9. BestCoder Round #66 1002
			
    GTW likes gt  Accepts: 75  Submissions: 261  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 1 ...
    
			
    10. 
						
  10. ORM模型简介
			
    ORM模型简介 1>什么是ORM? ORM,即 Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在操作具体的  ...
    
			
    11.