条件渲染

1. if、&&、||、三元表达式

列表 & Keys

1. 循环列表时需要给每一项加上独一无二的key;
2. 提取出一个 ListItem 组件，你应该把 key 保存在数组中的这个 <ListItem /> 元素上，而不是放在 ListItem 组件中的 <li> 元素上;
3. 元素的 key 在他的兄弟元素之间应该唯一;
4. jsx的{}表达式中不能出现var,const,let等这种关键字。

组件API

1. 设置状态：setState

   参数格式

    setState(object nextState[, function callback])
   

   参数说明

    nextState，将要设置的新状态，该状态会和当前的state合并
    callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
    合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。
   

2. 替换状态：replaceState （将被弃用）

   参数格式

   replaceState(object nextState[, function callback])

   参数说明

   nextState，将要设置的新状态，该状态会替换当前的state。
   callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。
   replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

3. 设置属性：setProps

   参数格式

   setProps(object nextProps[, function callback])

   参数说明

   nextProps，将要设置的新属性，该状态会和当前的props合并
   callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。
   设置组件属性，并重新渲染组件。

   使用场景

   props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。
   更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。

4. 替换属性：replaceProps

   参数格式

   replaceProps(object nextProps[, function callback])

   参数说明

   nextProps，将要设置的新属性，该属性会替换当前的props。
   callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。
   replaceProps()方法与setProps类似，但它会删除原有 props

5. 强制更新：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()调用

6. 获取DOM节点：findDOMNode

   获取操作：

    ReactDOM.findDOMNode(this.refs.counterDom)，日中refs挂载在真实DOM节点处，类似vue的this.$refs.XXX
   

   使用场景

    可以用来操作DOM
   

7. 判断组件挂载状态：isMounted

   注意

    isMounted 的方法在 ES6 中已经废除。主要的原因是它经过实际使用与测试可能不足以检测组件是否挂载，尤其是对于有一些异步的程序情况，以及逻辑上造成混乱。现在用以下方法代替：
    componentDidMount() {
        this.mounted = true;
    }
    componentWillUnmount() {
        this.mounted = false;
    }
   

条件渲染

1. 初始渲染页面在componentDidMount生命周期里使用

   使用场景

   React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
   当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

React 表单与事件

1. HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态;
2. 在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新;
3. 但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新;
4. 在 React 中，不使用 selected 属性，而在根 select 标签上用 value 属性来表示选中项，
   如 <select value={this.state.value} onChange={this.handleChange}></select>;
5. 处理多个表单：当你有处理多个 input 元素时，你可以通过给每个元素添加一个 name 属性，来让处理函数根据 event.target.name 的值来选择做什么
6. 当你需要从子组件中更新父组件的 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>
    }