一、HTML 模板

 

　　script标签的type属性为text/babel,是因为React独有JSX语法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上type=”text/babel”

 

　　二、ReactDOM.render（）

 

　　ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

 

　　//将一个H1标题，插入到example节点

 

　　三、JSX 语法

 

　　可以直接将HTML语言写在JavaScript中，不加任何引号，允许HTML和JavaScript混写。

 

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

 

　　JSX允许直接在模板插入JavaScript变量，如果变量是一个数组，则会展开这个数组所有成员。

 

　　四、组件

 

　　React 允许将代码封装成组件，然后在网页中插入组件。所有组件都有自己的render方法，用于输出组件。

 

　　组件中可以加入属性，比如HelloMessage组件中加入了一个name属性。

 

　　组件类只能包含一个顶层标签，包含多个顶层标签会报错

 

　　包含了两个顶层的标签h1和p，所以会报错

 

　　五、this.props.children

 

　　this.props对象的属性与组件的属性一一对应，this.props.children属性，表示组件的所有子节点

 

　　NoteList组件有两个span子节点，都可以通过this.props.children读取

 

　　this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array。

 

　　可以使用React.Children来处理this.props.children,用React.Children.map来遍历子节点。

 

　　六、PropTypes

 

　　组件属性可以接受任意值，字符串，对象，函数等等。组件类的PropTypes属性，可以用来验证组件实例属性是否符合要求。

 

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

 

　　getDefaultProps方法可以用来设置组件属性的默认值

 

　　七、获取真实的DOM节点

 

　　组件并不是真实的DOM节点，而是内存中的一种数据结构，叫做虚拟DOM。只有当它插入到文档以后，才会变成真实的DOM.所有DOM的变动，都现在虚拟DOM上发生，然后再将实际发生变动的部分，反应在真实的DOM上，这样的算法叫做DOM diff，可以提高网页的性能表现。

 

　　组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

 

　　八、this.state

 

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

 

　　这是一个LikeButton组件，它的getInitialState用于定义初始状态，也就是一个对象，这个对象可以通过this.state属性读取。当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改后，自动调用this.render方法，再次渲染组件。

 

　　this.props 和 this.state 都用于描述组件的特性，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

 

　　九、表单

 

　　定义一个onChange事件的回到函数，通过event.target.value读取用户输入的值。