标签：row htm def 必须 属性 语法 调用 一个 状态机
一、React基础
1.React模板
凡是使用JSX的地方，要加上type="text/babel"。引用三个库react.js是React的核心库，react-dom.js提供与DOM相关的功能，Brower.js将JSK语法转为JavaScipt语法。
2.ReactDOM.render()方法
用于将模板转为HTML语言，并插入指定的DOM节点。
jsx语法：js和html混着写，js代码写在花括号内。
二、组件与状态机
1.组件
React可以像插入HTML标签一样，将组件插入到网页中。React.createClass方法用于生成一个组件类。
2.this.props对象
props是组件的标签属性和子节点构成的集合
children是组件标签的所有子节点，对于子节点的渲染，reacty用this.props.children，当前组件没有子节点，它是undefined，如果有一个子节点，它是object，如果多个子节点，数据类型就是array；我们可以用React.Children.map来遍历子节点，而不用担心this.props.children的数据类型。
3.propType
组件的属性可以接受任意值，字符串、对象、函数等都可以，组件类的PropType属性，就是用来验证组件实例的属性是否符合要求。
getDefaultProps方法可以设置组件属性的默认值。但是这个方法必须要return出的obj。
4.获取真实的DOM
组件并不是真实的DOM节点，而是存在于内存中的一种数据结构，叫做虚拟DOM。只有当它插入文档以后，才会变成真实的DOM。
从组件获取真实DOM节点，用ref属性。
第一步：将别获取元素加上ref属性并赋值；
第二步：通过控制台输出this.refs；
用this.refs.[refname]来获取真实的DOM节点。
5.this.state对象
React将组件看成一个状态机，一开始有一个初始状态，然后用户互动，导致状态发生变化，从而触发重新渲染。
区别：this.props表示一旦定义无法改变的特性，this.state是会随用户的互动而变化的特性。
getInitialState方法用于定义初始状态，可以通过this,state属性读取。this.setState方法修改状态值。
三、表单与生命周期
1.表单
用户在表单填入内容，属于用户和组件的互动，不能用this.props读取。
文本输入框的值，不能用this.props.value读取，而是要定义一个onChange事件的回调函数，通过even.target这个事件源的value属性读取用户输入的值（event,target,value），textarea元素，select元素，radio元素都属于这种情况。
2.组件的生命周期
react组件的生命周期分为三个部分：
Mounting：已插入真实DOM
Updating：正在被重新渲染
UN某难听：已移出真实DOM
两种处理函数：will函数在进入状态之前调用，did函数在进入状态之后调用。
componentDidMount（）已插入真实的DOM后执行的函数。
3.ajax
组件的数据来源，通常是通过Ajax请求从服务器获取，可以使用componentDidMount方法设置ajax请求，等到请求成功，再用this.setState方法重新渲染UI。
标签：row htm def 必须 属性 语法 调用 一个 状态机
原文地址：https://www.cnblogs.com/qing9/p/9393432.html
