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 (
        

            

        
    )

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

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

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 ）。这样就可以确保在任何时间总是拿到正确的实例。

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