React心得之降龙十八掌：第一式-亢龙有悔（初步认识React的几个概念）

引言

亢龙有悔（乾卦上九）《彖》曰：“‘亢龙，有悔’，盈不可久也。”

• 丐帮绝技之一，威力寻常。快速出招攻击单个目标，可造成大量伤害。亢龙有悔虽然是一个瞬发技能，但却会做出释放技能的引导作用，耗费一定的时间。
• 我们初步认识React时，就像学习第一式一下，做到瞬发致人，因人、因地、因景，绝不可拘泥于此，学好第一式之后，接下来便可亢龙，持久。

1-React的基本认识

1.是Facebook开源的一个js库
2. 一个用来动态构建用户界面的js库
3. React的特点

• Declarative(声明式编码)
• Component-Based(组件化编码)
• Learn Once, Write Anywhere(支持客户端与服务器渲染)
• 高效
• 单向数据流

4. React高效的原因

• 虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数)
• 高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)

2-为什么要学习React

• 看到网上有好多的人说React比Vue难说，学好了Vue不用学习React了，其实，关于前端框架来说，当然是在这个竞争日益激烈的社会上，多一门手艺，就多一门混迹江湖，仗剑天涯的保证对吧。
• 其实简单的说就是赚钱，学好了React可以多赚钱，简单粗暴
• 那么到底什么React呢，上面的基本认识已经说了，其实React本质上只关心两件事：
  • 更新DOM
  • 响应事件
• React自身是不处理Ajax、路由和数据存储，也不规定数据管理的方式，它既不是MVC框架，也不是MVVM框架，如果你非要问它是什么，它真的就是那种…那种少见的那种，它很想MVC里的V，但是又不全是，它的精简直接允许你可以集成到各种各样的系统中，总之，它真的很好用。
• 状态数据每次改变时，需要重新渲染整个页面，这样就会导致页面加载非常慢，这个其实就是DOM的读取和更新的性能的问题，但是React使用虚拟DOM，实现了一个独立强大的渲染系统，这就导致了React在对于DOM的操作上只更新不读取。

React工作状态：

• React以渲染函数为基础。这些函数读入当前的状态，将其转换为目标页面上的一个虚拟表现。只要React被告知状态有变化，他就会重新运行这些函数，计算出页面的一个新的虚拟表现，接着自动把结果转换成必要的DOM更新来反映新的表现。
• 这种方式看上去应该比通常的JavaScript方案——按需要更新每一个元素——要慢，但是React确实是这么做的：它使用了非常高效的算法，计算出虚拟页面当前版本和新版间的差异，基于这些差异对DOM进行必要的最少更新。React赢就赢在了最小化了重绘，并且避免了不必要的DOM操作，这两点都是公认的性能瓶颈。

3-React的基本使用

1. 导入相关js库文件(react.js, react-dom.js, babel.min.js)
2. 编码:

   <div id="container"></div>
   	<script type="text/babel">
   		var aa = 123#  #
   		var bb = 'test'
   		ReactDOM.render(<h1 id={bb}>{aa}</h1>, containerDOM)
   	</script>
   

4-JSX的理解和使用

1. 理解

• 全称: JavaScript XML
• react定义的一种类似于XML的JS扩展语法: XML+JS
• 作用: 用来创建react虚拟DOM(元素)对象

2. 编码相关

• js中直接可以套标签, 但标签要套js需要放在{}中
• 在解析显示js数组时, 会自动遍历显示
• 把数据的数组转换为标签的数组:

  var liArr = dataArr.map(function(item, index){
  			return <li key={index}>{item}</li>
  		})
  

3. 注意:

• 标签必须有结束
• 标签的class属性必须改为className属性
• 标签的style属性值必须为: {{color:‘red’, width:12}}

5-几个重要概念理解

模块与组件

1. 模块:

• 理解: 向外提供特定功能的js程序, 一般就是一个js文件
• 为什么: js代码更多更复杂
• 作用: 复用js, 简化js的编写, 提高js运行效率

2. 组件:

• 理解: 用来实现特定界面功能效果的代码集合(html/css/js/img)
• 为什么: 一个界面的功能太复杂了
• 作用: 复用编码, 简化项目界面编码, 提高运行效率

模块化与组件化

1. 模块化:
   当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
2. 组件化:
   当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

---

总结

要么庸俗，要么孤独——叔本华

好好学React、多赚钱…(未完待续)

『传送门』☛React心得之降龙十八掌：第二式-飞龙在天（ React组件化开发及相关概念）