很多课程一上来就给大家如何配置环境、怎么写 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. Kotlin第一篇 Hello Kotlin以及简单介绍。
			
    首先需要一个编译器,我们使用Intellij IDE  https://www.jetbrains.com/idea/download/#section=windows 下载下来安装好. 那么我们就来 ...
    
			
    2. 
						
  2. linux影响上传文件大小的因素
			
    主要是从三个方面 ①.php代码方面(这个无需说明) ②.php.ini配置 max_execution_time = 600 ;每个PHP页面运行的最大时间值(秒),默认30秒max_input_t ...
    
			
    3. 
						
  3. [Django笔记] 从已有的数据库构建应用
			
    Django适合从零开始构建,所谓 'Green-field' 开发.那么当我需要基于已存在的数据库构建应用时怎么办呢? inspectdb # 扫描默认数据库 python manage.py in ...
    
			
    4. 
						
  4. 【bzoj1951】: [Sdoi2010]古代猪文 数论-中国剩余定理-Lucas定理
			
    [bzoj1951]: [Sdoi2010]古代猪文 因为999911659是个素数 欧拉定理得 然后指数上中国剩余定理 然后分别lucas定理就好了 注意G==P的时候的特判 /* http://w ...
    
			
    5. 
						
  5. poj1222(枚举or高斯消元解mod2方程组)
			
    题目链接: http://poj.org/problem?id=1222 题意: 有一个 5 * 6 的初始矩阵, 1 表示一个亮灯泡, 0 表示一个不亮的灯泡. 对 (i, j) 位置进行一次操作则 ...
    
			
    6. 
						
  6. git 增量打包
			
    git diff f506693 ccc253c3 --name-only | xargs tar -czvf update.tar.gz
    
			
    7. 
						
  7. Java 大数相乘、大数相加、大数相减
			
    思路来源:: https://blog.csdn.net/lichong_87/article/details/6860329 /** * @date 2018/6/22 * @description ...
    
			
    8. 
						
  8. Leetcode 91. Decode Ways 解码方法(动态规划，字符串处理)
			
    Leetcode 91. Decode Ways 解码方法(动态规划,字符串处理) 题目描述 一条报文包含字母A-Z,使用下面的字母-数字映射进行解码 'A' -> 1 'B' -> 2  ...
    
			
    9. 
						
  9. getsockname()和getpeername()
			
    对于server端: 以端口为通配符方式bind:对于服务器,bind(0,ip),则调用bind函数之后,就可以调用getsockname获取服务器得到的本地端口号 以ip地址为通配地址bind,只 ...
    
			
    10. 
						
  10. google ---gson字符串数组用GSON解析然后用逗号隔开拼接，去掉最后一个逗号
			
    public static void main(String[] args) { String ss= "[{\"type\":\"0\",\&quo ...
    
			
    11.