很多课程一上来就给大家如何配置环境、怎么写 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. hadoop学习记录--hdfs文件上传过程源码解析
			
    本节并不大算为大家讲接什么是hadoop,或者hadoop的基础知识因为这些知识在网上有很多详细的介绍,在这里想说的是关于hdfs的相关内容.或许大家都知道hdfs是hadoop底层存储模块,专门用于 ...
    
			
    2. 
						
  2. ssh 免密码远程登录
			
    背景: 公司有两台服务器A与B,经常会碰到代码中的配置文件不一致的情况...............,为了反面让两台服务器配置统一,所以需要写个shell脚本,用到的linux命令主要是scp 1.在 ...
    
			
    3. 
						
  3. Glib学习笔记（三）
			
    你将学到什么 如何实现Object的方法 Object的方法 Object的public方法 在头文件声明一个函数,然后在源文件中实现函数即可 /* declaration in the header ...
    
			
    4. 
						
  4. UWP &WP8.1 依赖属性和用户控件 依赖属性简单使用 uwp添加UserControl
			
    上面说 附加属性.这章节说依赖属性. 所谓依赖属性.白话讲就是添加一个公开的属性. 同样,依赖属性的用法和附加属性的用法差不多. 依赖属性是具有一个get,set的属性,以及反调函数. 首先是声明依赖 ...
    
			
    5. 
						
  5. Linux开机自动挂载文件fstab介绍
			
    这个文件描述系统中各种文件系统的信息.一般而言,应用程序仅读取这个文件,而不对它进行写操作.对它的维护是系统管理员的工作. [root@localhost mnt]# cat /etc/fstab # ...
    
			
    6. 
						
  6. H5教程（二），CSS入门（一）选择器
			
    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
    
			
    7. 
						
  7. MobaXterm替换cmder
			
    Windows上命令行工具cmder确实很好用,其扩展功能呢,比系统自带强大几倍.后来在使用MobaXterm,官网https://mobaxterm.mobatek.net/免费版本功能足够强大,支 ...
    
			
    8. 
						
  8. 用rc.local工具开机自启动
			
    对于一些程序来说,无法直接开机自启动.那么我们可以利用开机自启动来执行一些命令,达到开机自启动的效果!!! 下面用tomcat来举个例子 tomcat启动的命令一般是./startup.sh 那么我们 ...
    
			
    9. 
						
  9. git学习--远程分支删除
			
    查看远程分支 git branch -r  使用下面两条命令来删除远程分支 git branch -r -d origin/branch-name git push origin :branch-na ...
    
			
    10. 
						
  10. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_IL和验证
			
    1.IL 基于栈——所有指令压入一个执行栈,并从栈弹出结果. 2.IL 指令无类型——指令会判断栈中操作数的类型,并执行恰当的操作. 3.IL 最大优势——应用程序的健壮性和安全性. 将 IL 编译成 ...
    
			
    11.