react初步

一直有用vue和ng，那天正好有空花了大概两小时研究了下react。嗯，还是比较容易上手的。

三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载

1. react.js 是 React 的核心库

2. react-dom.js 是提供与 DOM 相关的功能

3. Browser.js 的作用是将 JSX 语法转为 JavaScript 语法

 

ReactDOM.render

- 模板转为 HTML 语言，并插入指定的 DOM 节点

 

 jsx语法

- js与html代码混写

- JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头）

 

组件

- React.createClass 方法就用于生成一个组件类

1. render方法，用于输出组件

2. PropTypes属性，就是用来验证组件实例的属性是否符合要求

3. getDefaultProps方法，设置组件属性的默认值

4. 状态机：getInitialState 方法，设置初始值。通过 this.state 属性读取。状态有改变就调用this.setState 方法就修改状态值，然后重新渲染

- 组件类的第一个字母必须大写

- 组件类只能包含一个顶层标签

- 特别的：this.props.children 属性。它表示组件的所有子节点。

1. 如果当前组件没有子节点，它就是 undefined

2. 如果有一个子节点，数据类型是 object

3. 如果有多个子节点，数据类型就是 array

 

 组件的生命周期

- 三个状态：

1. Mounting：已插入真实 DOM

2. Updating：正在被重新渲染

3. Unmounting：已移出真实 DOM

- 五种函数 （will为状态前，did为状态后）+两种特殊情况

1. componentWillMount()

2. componentDidMount()

3. componentWillUpdate(object nextProps, object nextState)

4. componentDidUpdate(object prevProps, object prevState)

5. componentWillUnmount()

6. componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

7. shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

 

 获取真实dom

- 有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性

 

只是一个简易版的入门，详细教程还是去看文档吧