步步为营--深入研究react技术栈 系列一 (jsx、组件、数据流)

相关技术博客：

1、步步为营–深入研究react技术栈 系列一 (jsx、组件、数据流)
2、步步为营–深入研究react技术栈 系列二 (事件、组件性能优化)
更多系列文章持续更新中…

一、React简介

React 是一个用于构建用户界面的 JavaScript 库。把用户界面抽象成一个个的组件，通过引入jsx语法，复用组件更容易，同时保证组件结构清晰。

React 特点

1. 专注于视图层
   React不是完成的MVC/MVVM框架，很多人认为 React 是 MVC 中的 V（视图）

2. Vitual DOM
   React把真实的DOM树转换成js对象树，也就是Vitual DOM，通过对DOM的模拟，最大限度地减少与DOM的交互，因此更加高效。
   
   每次数据更新后，重新计算Vitual DOM，并和上一次生成的Vitual DOM做对比，对发生变化的部分批量更新。
   React也提供了直观的shouldComponentUpdate生命周期回调，来减少数据变化后不必要的Vitual DOM对比过程。

3. 函数编程
   React采用声明范式，可以轻松描述应用。充分利用函数式方法减少冗余代码，此外，本身就是简单函数，易于测试。函数式编程才是React精髓。

4. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单

5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6. 灵活 −React可以与已知的库或框架很好地配合。

二、JSX语法

React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

使用JSX

1. XML语法
   JSX是类XML语法的ECMAScript扩展，使用XML好处是标签可以任意嵌套，可以像写HTML一样清晰的看到DOM树状结构及其属性。

const list = () => {
   
	<div>
		<Title>这是标题</Title>
		<ul>
			<li>列表item</li>
			<li>列表item</li>
			<li>列表item</li>
		</ul>
	</div>
}

上面构造了一个list组件，注意事项：

• 定义标签时，只允许被一个标签包裹，例如：

const list = () => {
   
  	<Title>这是标题</Title>
  	<ul>
  		<li>列表item</li>
  		<li>列表item</li>
  		<li>列表item</li>
  	</ul>
}

这样就会报错了，原因是没有最外层包裹，无法转译成功。

• 标签一定要闭合
  当然，JSX报错机制很强大，如果有拼写错误会直接打印出来。

2. 元素类型
   在构建页面中有两种元素：DOM元素和组件元素，在JSX中会有对应，对应规则是标签的首字母是否是小写字母，小写首字母对应DOM元素，大写首字母对应组件元素。

3. 注释
   注释需要写在花括号中，实例如下：

const list = () => {
   
	<div>
		<Title>这是标题</Title>
		{
   /*注释...*/}
		<ul>
			<li>列表item</li>
			<li>列表item</li>