1. 概述
1.1. 概述
颠覆式前端UI开发框架。相对Angular，Angular作为一个MVVM框架，显得过重，不适合对性能要求比较高的栈，其UI组件的封装相对复杂，不利于重用，而React却另辟蹊径地解决了这些问题。 React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
1.2. 特点
1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可以与已知的库或框架很好地配合。
1.3. HTML模板
使用 React 的网页源码，结构大致如下:
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
需要注意的是，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
1.4. JSX语法
JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX， 当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。
- JSX是什么？
JSX是一种像下面这样的语法：
const element = <h1>Hello, world!</h1>;
它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。本质上，JSX为我们提供了创建React元素方法（React.createElement(component, props, ...children)）的语法糖（syntactic sugar）。上面的代码实质上等价于：
var element = React.createElement(
"h1",
null,
"Hello, world!"
);
1.4.1 基本语法
1）自定义组件名首字母大写；元素名即组件名，首字母需要大写。首字母小写时React会以为这是HTML的标准标签，因此自定义的组件名需要首字母大写，否则会报错。
2）嵌套；在render函数中return返回的只能包含一个顶层标签，否则也会报错。如：
[图片上传失败...(image-60cba4-1532938934761)]
3）求值表达式；JSX基本语法规则，遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用JS规则解析。
4）驼峰命名
5）htmlFor,className;添加组件属性，需要注意，class属性需要写成className，for属性需要写成htmlFor,因为class和for是JS保留字 .组件的属性可以在组件类的this.props对象上获取，比如name属性可以通过this.props.name读取。
6）JSX允许直接在模板插入JS变量。如果这个变量是一个数组，则会展开这个数组的所有成员
[图片上传失败...(image-c36e5e-1532938934761)]
- 在JSX中插入用户输入是安全的，默认情况下ReactDOM会在渲染前，转义JSX中的任意值，渲染前，所有的值都被转化为字符串形式，这能预防XSS攻击。
1.4.2注释
注释可以添加在两个部分:
1）子节点中,子节点中时，添加多行注释需要用{/**/}大括号包起来。不能添加单行注释
2）属性中；多行注释直接/**/注释，单行注释用//，并且需要换行
1.4.3条件判断的写法
- 使用三元表达式
2）使用变量
3）直接调用函数
4）使用逻辑运算符
1.4.4函数表达式
image.png
image.png
利用即时执行函数，即时执行函数有两种形式：示例中的括号在外面的形式，这种返回的直接是函数运行后的值；括号在里面的形式，运行后先拿到了函数的引用，然后传入参数（this）运行函数得到返回值。
1.4.5false处理
1）被渲染成 id="false"，id值为字符串false:
ReactDOM.render(<div id={false} />, mountNode);
2）input value 的值将会是 "false" 字符串
ReactDOM.render(<input value={false} />, mountNode);
3）没有子节点
ReactDOM.render(<div>{false}</div>, mountNode);
2. 组件
2.
2.1. 组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
image.png
上面代码中，变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。
image.png
上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。
添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
2.2. 组件的生命周期
组件的生命周期分成三个状态：
1）Mounting：已插入真实 DOM
2）Updating：正在被重新渲染
3）Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
1）componentWillMount()
2）componentDidMount()
3）componentWillUpdate(object nextProps, object nextState)
4）componentDidUpdate(object prevProps, object prevState)
5）componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
1）componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
2）shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
2.3. 组件数据来源
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI
image.png
在这里，componentDidMount是一个在组件被渲染的时候React自动调用的方法。动态更新的关键点是调用this.setState()。我们把旧的评论数组替换成从服务器拿到的新的数组，然后UI自动更新。正是有了这种响应式，一个小的改变都会触发实时的更新。这里我们将使用简单的轮询，但是你可以简单地使用WebSockets或者其它技术。
网友评论