React是一个用于构建用户界面的Javascript库。
特点：声明式，组件化，移植性。
关键字：组件Component，状态组件props，应用state，第三方库。
JSX
JSX是JavaScript的语法扩展。
JSX用来声明React中的元素。
JSX中可疑使用JavaScript表达式，需要使用{}括起来。
JSX本身也是一种表达式，编译之后会生成JavaScript对象，所以可以在JavaScript语句中嵌入JSX。
JSX属性：
- 类似html标签的属性；
- 字符串类型的属性值用""包起来；
- 表达式类型的属性用{}包起来；
JSX标签可疑嵌套。
JSX可以防止XSS共计，因此可以在表达式中引用用户输入的内容；React DOM会在渲染之前把所有内容转换为字符串。
JSX代表Object，Babel转译器会把JSX转为一个React.createElement的调用。转换生成的内容称为React元素，React读取这些对象来构建DOM并保持数据一致。
JSX允许在大括号中嵌入任何的表达式。
元素渲染
元素是react的最小单位。
与浏览器的DOM不同，react元素实际上是普通的对象。
React DOM可以保证浏览器的DOM的数据内容与react的元素保持一致。
React的元素渲染是通过ReactDOM.render来实现的。
React的元素都是immutable的，不可变。元素被创建之后，无法改变其内容或者属性。
React仅仅会渲染文本节点中发生变化的内容。
组件
组件将界面划分为一些独立的，可以复用的部件。
组件从概念上来看像是一个函数，接受一些输入，输出React元素。
组件定义方式：
- 函数定义；
- 类定义，派生自React.Component；
自定义组件的话，react会把JSX属性作为单个对象传递给该组件，这个对象就是props。
组件的返回值仅能有一个根元素。
React中，props是只读的，所有的React组件都不能修改传入的props。
组件生命周期
State状态
状态类似属性。
但是状态是私有的，完全属于当前组件。
拥有状态的组件必须使用类的方式来定义。
如果需要存储不用作视觉输出的内容时，不要保存到props，也不要保存到state，可以直接保存在组件中。即：不是this.props.xxx，也不是this.state.xxx，而是this.xxx。
状态使用注意事项：
- 构造函数是唯一能够初始化this.state的地方。
- 不要直接更新状态，即不要this.state.xxx=ddd；而要调用this.setState；
- 状态更新可能是异步的；多个state更新可能被合并为一个。如果要依赖旧的状态做更新，那么setState方法的参数就传递一个函数而不是一个对象；这个函数的参数有两个，第一个是前一个状态，第二个是当下的props
- setState的状态合并是浅合并，也就是setState的参数仅会影响列出的属性，未列出的属性不会消亡；
数据自顶向下流动：
- 父组件或子组件都不知道某个组件是否有状态；而且也不会关心某个组件是用函数定义的还是类定义的；
- 组件可以选择将其状态作为属性传递给子组件；
- 可以在有状态组件中使用无状态组件；也可以在无状态组件中使用有状态组件；
Keys
Keys帮助react识别元素。
元素的key在和它的兄弟元素作对比的时候才有意义。
生成元素列表的时候，最好为每个元素都添加一个独一无二的key。
元素的key不需要全局唯一。
key会作为对React的提示，但是不会传递给组件，也就是通过props.key是拿不到key的。
表单
HTML的表单元素与其他的react组件不同，因为表单元素生来就保留一些内部状态。
提交表单时，HTML的默认行为是跳转到一个新的页面。
React中，一般会构造一个函数，该函数用来处理提交表单，同时可以访问表单数据。
标准方法：“受控组件”。
使用受控组件，每个状态的改变都有一个与之对应的处理函数。这样就可以直接修改或者验证用户输入。
<input>
html：<inuput type="text" name="name"/>
react：<input value={this.state.value} onChange={this.handleChange} />
<textarea>
html: <textarea>这里是一个textarea，通过子节点来定义文本内容</textarea>
react：<textarea value={this.state.value} onChange={this.handleChange} />
<select>
html：
<select>
<option value="a">a</option>
<option selected value="a">a</option>
<option value="a">a</option>
</select>
react：
<select value={this.state.value} onChange={this.handleChange}>
<option value="a">a</option>
<option value="a">a</option>
<option value="a">a</option>
</select>
file input是一个非受控组件，因为该标签的value属性是只读的。
状态提升
几个组件共用状态数据，这时候就可以把状态数据提升到父组件中进行管理。
应该在应用中保持自顶向下的数据流，而不是尝试在不同组件中同步状态。
State状态数据是私有的，仅组件自身可以操作。
react理念
- 把UI划分出组件层级；
- 用React创建一个静态版本；
- 定义UI状态的最小但是完整的表示；
- 确定State应该位于哪里；
- 添加反向数据流；