很多课程一上来就给大家如何配置环境、怎么写 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. JavaScript prototype原型链介绍
			
    javascript 是一种基于原型的编程 (prototype based programming) 的语言, 而与我们通常的基于类编程 (class based programming) 有很大的 ...
    
			
    2. 
						
  2. win10系统遇到的问题解决
			
      1.win10 计算器提示:需要新应用打开此calculator 运行calc,会出现需要新应用打开此Calculator,打开应用商店,找到计算器,仍然可以被使用,我怀疑是我自己在清理PC的注册 ...
    
			
    3. 
						
  3. 【转，整理】C# 非托管代码
			
    .Net Framework 是由彼此独立又相关的两部分组成:CLR 和 类库, CLR是它为我们提供的服务,类库是它实现的功能..NET的大部分特性----垃圾收集,版本控制,线程管理等,都使用了C ...
    
			
    4. 
						
  4. JavaScript之入门篇（二）
			
    终于学到后面的语法部分了,感觉这门语言基础部分和当初学习VB的时候感觉一样一样的,章节目录让我不禁又想到了VB课本.由于怕学过了,过段时间忘了,于是,大概总结一下. 数据类型部分 ① Typeof操作 ...
    
			
    5. 
						
  5. linux下redis的安装与django-redis使用方法
			
    Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set( ...
    
			
    6. 
						
  6. apache2.4.X虚拟主机配置
			
    1,用记事本打开apache目录下httpd文件(如:D:\wamp\bin\apache\apache2.2.8\conf),找到如下模块       # Virtual hosts     #In ...
    
			
    7. 
						
  7. 洛谷4316 绿豆蛙的归宿(DAG递推/概率dp)
			
    题目大意: 给定一个DAG,求起点到终点的路径长度期望 根据题意可以知道每一条边都有一定概率被走到 那么\(\displaystyle\begin{aligned} Ans = \sum_{e \in ...
    
			
    8. 
						
  8. ArcGIS Engine 添加SDE数据库
			
    public void AddSDELayer(bool ChkSdeLinkModle){  //定义一个属性   IPropertySet propset = new PropertySetCla ...
    
			
    9. 
						
  9. Android----获取包名和sh1
			
    第一种:使用java的一个工具---keytool工具(jdk目录下) SHA1叫安全哈希算法用于签名 keytool -list -v -keystore 签名证书所在位置path 第二种:通过An ...
    
			
    10. 
						
  10. for循环删除list中多个元素出现的误区
			
    错误的做法是: for(int i= 0;i<list.size();i++) 因为在你删除元素的同时list.size()也在变小,这样就会照成越界. 正确做法:因为要删除list里面的多个的 ...
    
			
    11.