条件渲染
- if、&&、||、三元表达式
列表 & Keys
- 循环列表时需要给每一项加上独一无二的key;
- 提取出一个 ListItem 组件，你应该把 key 保存在数组中的这个 <ListItem /> 元素上，而不是放在 ListItem 组件中的 <li> 元素上;
- 元素的 key 在他的兄弟元素之间应该唯一;
- jsx的{}表达式中不能出现var,const,let等这种关键字。
组件API
-
设置状态：setState
参数格式
setState(object nextState[, function callback])参数说明
nextState，将要设置的新状态，该状态会和当前的state合并 callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。 合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。 -
替换状态：replaceState （将被弃用）
参数格式
replaceState(object nextState[, function callback])
参数说明
nextState，将要设置的新状态，该状态会替换当前的state。
callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。
replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。 -
设置属性：setProps
参数格式
setProps(object nextProps[, function callback])
参数说明
nextProps，将要设置的新属性，该状态会和当前的props合并
callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。
设置组件属性，并重新渲染组件。使用场景
props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。
更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。 -
替换属性：replaceProps
参数格式
replaceProps(object nextProps[, function callback])
参数说明
nextProps，将要设置的新属性，该属性会替换当前的props。
callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。
replaceProps()方法与setProps类似，但它会删除原有 props -
强制更新：forceUpdate
参数格式
forceUpdate([function callback])
参数说明
callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。
使用场景
forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。
forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()
一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用 -
获取DOM节点：findDOMNode
获取操作：
ReactDOM.findDOMNode(this.refs.counterDom)，日中refs挂载在真实DOM节点处，类似vue的this.$refs.XXX使用场景
可以用来操作DOM -
判断组件挂载状态：isMounted
注意
isMounted 的方法在 ES6 中已经废除。主要的原因是它经过实际使用与测试可能不足以检测组件是否挂载，尤其是对于有一些异步的程序情况，以及逻辑上造成混乱。现在用以下方法代替： componentDidMount() { this.mounted = true; } componentWillUnmount() { this.mounted = false; }
条件渲染
- 初始渲染页面在componentDidMount生命周期里使用
使用场景
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
React 表单与事件
- HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态;
- 在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新;
- 但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新;
- 在 React 中，不使用 selected 属性，而在根 select 标签上用 value 属性来表示选中项，
如 <select value={this.state.value} onChange={this.handleChange}></select>; - 处理多个表单：当你有处理多个 input 元素时，你可以通过给每个元素添加一个 name 属性，来让处理函数根据 event.target.name 的值来选择做什么
- 当你需要从子组件中更新父组件的 state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上
父组件：
class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello React!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: 'React'}) } render() { var value = this.state.value; return <div> <Content myDataProp = {value} updateStateProp = {this.handleChange}></Content> </div>; } }子组件
render() { return <div> <button onClick = {this.props.updateStateProp}>点我</button> <h4>{this.props.myDataProp}</h4> </div> }
