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();