很多课程一上来就给大家如何配置环境、怎么写 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. Spring Boot 学习系列（02）—使用热部署，提升开发效
			
    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 开发调试很简单 热部署的使用非常简单,但能极大的提高我们的开发效率,像传统的web应用,我们修改后需要重新编 ...
    
			
    2. 
						
  2. scikit-learn 机器学习库
			
    一 介绍 scikit-learn是Python的一个开源机器学习模块,它建立在NumPy,SciPy和matplotlib模块之上.值得一提的是,scikit-learn最先是由David Cour ...
    
			
    3. 
						
  3. VB6加载MSCOMCTL.OCX出现“不能加载''”错误的处理方法汇总
			
    自从我安装卸载几次OFFICE和WPS后,VB6就出现了这样的问题. 然后在网上收集各种解决办法: 1.第一种:工程文件引用可能有问题,跟本机的相关组件版本不一致. 用记事本打开VBP文件找到这一行: ...
    
			
    4. 
						
  4. List集合分页
			
    原文链接:https://www.cnblogs.com/haiyangsvs/p/6210852.html import java.util.Arrays; import java.util.Col ...
    
			
    5. 
						
  5. 基本css拼图形
			
    关闭按钮: <em class="close"></em> .close { width: 16px; height: 16px; text-align:  ...
    
			
    6. 
						
  6. 「产品经理全连接系列1」Epic/Feature/Story/Task/Bug到底是什么
			
    大家好,我是华为云的产品经理 恒少: 作为布道师和产品经理,出差各地接触客户是常态,经常和华为云的客户交流.布道.技术沙龙,但是线下交流,覆盖的用户总还是少数. 我希望可以借线上的平台,和用户持续交流 ...
    
			
    7. 
						
  7. 安装gitlab-runner
			
    # 下载 $sudo wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/lat ...
    
			
    8. 
						
  8. 【学习笔记】jQuery的基础学习
			
    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
    
			
    9. 
						
  9. P2264 情书
			
    传送门 正常会想到字典树 然鹅数据怎么小直接map也能过 然后就写map暴力匹配了 毫无思维难度,毫无代码难度 注意逗号算单词分隔符,如果有句号就算另一句 同一句的单词重复出现只计算一次贡献 再开个m ...
    
			
    10. 
						
  10. Linux内核硬件访问技术
			
    ① 驱动程序控制设备,主要是通过访问设备内的寄存器来达到控制目的.因此我们讨论如何访问硬件,就成了如何访问这些寄存器. ② 在Linux系统中,无论是内核程序还是应用程序,都只能使用虚拟地址,而芯片手 ...
    
			
    11.