很多课程一上来就给大家如何配置环境、怎么写 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. ConnectionState详解
			
    ConnectionState有六个属性值ConnectionState.Broken;与数据源连接断开.只有在连接打开后才有可能发生这种情况.可以关闭处于这种状态下的连接,然后重新打开.Connec ...
    
			
    2. 
						
  2. Bat 多个执行操作选择
			
    Bat在日常编程中使用到会帮我们省去很多力气. @echo off Title DataBase Color 0A :caozuo echo. echo ═══════════════════════ ...
    
			
    3. 
						
  3. tomcat Linux安装
			
    tomcat依赖jdk软件包,所以先配置jdk. 配置完成后 将下载好的tomcat 解压至/usr/local tar -xvf apache-tomcat-7.0.70.tar.gz -C /us ...
    
			
    4. 
						
  4. tomcat - 认识
			
    tomcat - web应用服务器 环境:ubuntu测试 @shell命令(cd到tomcat目录下) 启动: ./bin  startup.sh 关闭:./bin  shutdown.sh @部署 ...
    
			
    5. 
						
  5. XCode9: iPhone is busy: Preparing debugger support for iPhone
			
    这个好像是等一阵子就可以了 参考链接
    
			
    6. 
						
  6. 读《JavaScript权威指南》笔记（五）
			
    1.getComputedStyle()方法的返回值是一个CSSStyleDeclaration对象,它代表了应用在指定元素(或伪对象)上的所有样式. 2.clip style="clip: ...
    
			
    7. 
						
  7. poj1681(枚举or高斯消元解mod2方程组)
			
    题目链接: http://poj.org/problem?id=1681 题意: 有一个包含 n * n 个方格的正方形, w 表示其所在位置为白色, y 表示其所在位置为黄色. 对 (i, j) 位 ...
    
			
    8. 
						
  8. LAMP之Apache
			
    Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.快速.可靠并且可通过简单的API扩充,将 ...
    
			
    9. 
						
  9. mysql 字段类型VARCHAR转换成DECIMAL
			
    在我们写代码的实际业务中,有时候实体类用的是String,数据库中自然是VARCHAR类型,但是如果这个实体的属性值放的是数字类型,你查询的时候又需要对它进行排序.sql怎么写呢. 别担心mysql提 ...
    
			
    10. 
						
  10. POJ1063 Flip and Shift
			
    题目来源:http://poj.org/problem?id=1063 题目大意: 有一种游戏如图所示.一个填满黑白球的转盘,它可以有两种操作,一种是将大转盘顺时针旋转,所有球的位置顺时针挪一位,另一 ...
    
			
    11.