React学习笔记

1，认识react 的三个库：

1.1，react.js ：是 React 的核心库。

1.2，react-dom.js ：是提供与 DOM 相关的功能。

1.3，Browser.js： 其作用是将 JSX 语法转为 JavaScript 语法。

2，认识ReactDOM.render：

它是 React 的最基本方法，可将模板转为 HTML 语言，并插入指定的 DOM 节点。

3，JSX 的基本语法规则：

遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

4，封装组件：

组件类的第一个字母必须大写，否则会报错，比如HelloWorld不能写成helloWorld。另外，组件类只能包含一个顶层标签，否则也会报错。

5,组件类的PropTypes属性:

用来验证组件实例的属性是否符合要求，例如：

var OurTitle = React.createClass({  propTypes: {title: React.PropTypes.string.isRequired,  },  render: function() {     return <h1> {this.props.title} </h1>;   }});

上面的OurTitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。

6，React–DOM：

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。

7，state：

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。

8，组件的生命周期：

8.1，三个生命周期状态：

8.1.1，Mounting：已插入真实 DOM

8.1.2，Updating：正在被重新渲染

8.1.3，Unmounting：已移出真实 DOM

8.2，七种处理函数：

8.2.1，componentWillMount()

8.2.2，componentDidMount()

8.2.3，componentWillUpdate(object nextProps, object nextState)

8.2.4，componentDidUpdate(object prevProps, object prevState)

8.2.5，componentWillUnmount()

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

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

---

注：该笔记源于学习阮一峰React 入门实例教程