- react有一个特殊属性key
- 应用场景
- 根据数组动态创造，不确定数量，顺序的子节点时使用
- 需要对某一组件的更新操作强制替换成卸载重建操作
- 规则
- react比较更新前后元素的key值，如果相同则更新，不同则销毁重建
- 为什么其他组件不需要key
- 数组外的每个元素始终出现在React.createElement() 参数列表中的固定位置，这就是天然的key
- 在element diff中进行优化，通过添加key，可以进行移动操作
key辅助react调和过程
- 调和：react将Virtual DOM树转成真实dom树最少的操作称之为调和
- diff算法：diff算法就是调和的具体体现
- diff算法策略：
- 策略一：web中DOM节点跨层级的移动操作少，可以忽略
- 策略二：拥有相同类的两个组件会生成相似的树型结构
- 策略三：对于同一层级的一组子节点，可以通过唯一ID区分
- diff算法过程：
-
tree diff
- 只会对相同层级的DOM节点进行对比
- 如果有跨节点操作先create后delete（官方推荐不要有跨节点操作）
-
component diff
- 如果是同一组件，则继续进行tree diff
- 如果不是同一组件，则替换掉组件下的所有子节点
- 可以通过shouldComponentUpdate来判断组件是否需要diff分析
-
element diff
- 节点处于同一层级时，diff提供了3种操作
- 插入，删除，移动
-
允许开发者针对同一层级的同组子节点，添加唯一key进行区分。
- 进行diff差异化对比后，通过key发现新旧集合中的节点为相同节点，无需进行增删，只需移动。
- 移动策略：如果通过key判断出存在相同节点
if (child._mountIndex < lastIndex) { 进行移动 }
-
测试（存在key,不存在key,状态更改渲染区别）
- 情况一
- beforeState:list: [1,2,3,4]---afterState:list: ['a','b', 'c', 'd']
- 不存在key
{
this.state.list.map((item, index) => {
return <Button
size='long'
btnType='primary'
isRadius={false}
style={{width:'100%'}}
>{item}</Button>
})
}
export default class Button extends React.Component {
constructor (props) {
// debugger;
super (props);
}
clickhandle(e){
this.props.onClick(e.target);
}
componentWillMount () {
console.log('lm at componentWillMount')
}
componentWillReceiveProps () {
console.log('lm at componentWillReceiveProps')
}
componentWillUnmount () {
console.log('lm at componentWillUnmount')
}
...
- 根据我们上文描述的预期情况他们会以默认的数组顺序为key
- beforeKey[1,2,3,4]--afterKey[1,2,3,4]顺序数量都没变，那么没有移动删除增加操作，每个组件都不销毁，只会接受新props到componentWillReceiveProps周期
- 此时应该打印出四个
'lm at componentWillReceiveProps'
- 真实情况：
image.png
- 情况二
- beforeState:list: [1,2,3,4]---afterState:list: ['a','b', 'c', 'd']
- 存在key（但是就以index为key）
{
this.state.list.map((item, index) => {
return <Button
key={index}
size='long'
btnType='primary'
isRadius={false}
style={{width:'100%'}}
>{item}</Button>
})
}
-
预期情况：
- 应该和情况一相同，唯一区别是不会报warming了
-
真实情况：
image.png
-
情况三：
- beforeState:list: [1,2,3,4]---afterState:list: ['a','b', 'c', 'd']
- 存在key（unique）
{
this.state.list.map((item, index) => {
return <Button
key={item}
size='long'
btnType='primary'
isRadius={false}
style={{width:'100%'}}
>{item}</Button>
})
}
- 预期情况：
- 前后key值没有一个不同那么所有实例都会被卸载重建
- 真实情况：
image.png
- 情况四
- beforeState:list: [1,2,3,4]---afterState:list: [1,2, 'c', 'd']
- 存在key（unique）
- 预期情况：
- key为12的实例会执行接收参数改变的操作，key为3，4--‘c','d'的实例会销毁重建
- 真实情况
image.png
以上基本涵盖的大部分key的使用方式，和隐式key是什么值，所以在map时增加key时不要用index,最好为unique值
网友评论