React学习笔记

用于构建用户界面（UI）的 JAVASCRIPT 库，React 拥有较高的性能，代码逻辑非常简单

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

可以直接使用 BootCDN 的 React CDN 库，地址如下：

实际上线的时候，应该将它放到服务器完成。

 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><!-- React 的核心库 -->
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script><!-- Babel 内嵌了对 JSX 的支持 -->

JSX: HTML 语言直接写在 JavaScript 语言之中，不加任何引号

替代常规的 JavaScript，执行更快，编译过程能发现错误， 编写模板更加简单快速。

ReactDOM.render ：用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

React.createClass 用于生成一个组件类，然后像插入普通 HTML 标签一样，在网页中插入这个组件。

组件类的第一个字母必须大写，否则会报错
组件类只能包含一个顶层标签，否则也会报错。

所有组件类都必须有自己的 render 方法，用于输出组件
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性
<Hello name='world'>就是 Hello 组件加入一个 name 属性，值为world
组件的属性可以在组件类的 this.props 对象上获取，

添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，
for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

this.props.children 属性。它表示组件的所有子节点。this.props.children 的值有三种可能。React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

this.state:

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