react使用知识总结（持续更新）

1. key

react凡是动态创建的元素必须要有的标志，并且所有元素的key唯一，在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。
并且可以跟踪元素添加、修改、移除的状态。

2. 创建key

不要使用循环中index作为元素的key，第一会产生与其它循环创建的组件重复的key，第二点是因为这个key是用来做virtual Dom diff的，上面的做法相当于用了一个随机键，那么不论有没有相同的项，更新都会重新渲染。

3. componentDidMount方法中是执行ajax的最好位置

React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到 componentWillMount 的触发次数。对于 componentWillMount 这个生命周期函数的调用次数会变得不确定，React 可能会多次频繁调用 componentWillMount。如果我们将 AJAX 请求放到 componentWillMount 函数中，那么显而易见其会被触发多次，自然也就不是好的选择。
如果我们将 AJAX 请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了setState函数将数据添加到组件状态中，对于未挂载的组件则会报错。而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题。

4.为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的 map？

5.使用componentshouldupdate

列表中setState改变列表一个列表元素的props，列表update，整个列表每个元素都会update，性能会很差。
解决办法是在每个列表元素的componentshouldupdate里做判断，如果props没变，就不update了。

6.setState是异步的

this.setState()会调用render方法，但并不会立即改变state的值，state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋值state并不会出发更新，因为没有调用render函数。

7.清理监听函数

组件卸载之前，加在dom元素上的监听事件，和定时器需要手动清除，因为这些并不在react的控制范围内，必须手动清除。
指的是在this.refs.xxx这种真实dom上addEventListener这样添加的监听事件，在组件卸载的时候要手动清除(removeEventListener)，react组件上的onClick这种不用管，react已经处理好。

8.constructor中使用super

class类继承react的component组件，constructor中必须调用super，因为子类必须用super继承component的this，否则实例化的时候会报错。

9.render函数中 return的元素必须要有一个根元素

   return (
        <div class="root">
            <div></div>
        </div>
    )

10.tr不能作为table的直接子元素

需要在tr外面加上tbody或者thead

<table>
       <thead>
           <tr>
                <td></td>
           </tr>
       </thead>
</table>

11.this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

12.React Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

<input ref="myInput" />
//绑定实例后 可以通过refs获取
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();