react中的key的作用

2020-07-24 10:56发布

4条回答
kitidog2016
1楼 · 2020-10-06 09:24.采纳回答

通常认为当 React 元素内包含数量或顺序不确定的子元素时,需要提供 key 属性来定位元素是否已经存在。在实际使用中可以认为 key是一个接口,用来对哪些元素新建,哪些元素删除。

比如现有一个List,每个组件新增时需要用ID向后端发起请求(函数应该放在didmount里),当前id数组的状态是[0,1],如何在原来的基础上变成[2,3,0]呢,可以有以下几种方法:

 

1,删除原来的数组,再添加3个元素,分别设为2,3,0。不需要使用key来标识元素是否存在,这很明显是低效的,而且这会带来副作用(生命周期里init,didmount,willumount都会调用),,

 

2,直接在后面添加一个元素,值分别设为2,3,0.没有key,用数组下标,最后一个元素0是新增的,需要调用组件的(init,didmount),didmount里接收的是0并向后端发请求

 

3,按值查找,对0保持不变,删除1,新增2,3,这符合我们想要的逻辑,但是我们还没有告诉react值是什么,List里可能是一个复杂的组件,所以react提供了一个key,让我们自己设置这个元素什么时候需要重新挂载。

 

下面看其中一个应用场景

点击界面上的按钮add item,在下面的列表增加一个一条记录,记录挂载时在控制台输出自身的ID,数据的数组是按时间正序,视图按时间逆序显示

import React, { Component } from 'react';

class Item extends Component {
  componentDidMount(){
    console.log(this.props.text);
  }
  render(){
    return (

  • {this.props.text}
  • )
      }

    };

     

    class App extends Component {
      constructor (){
        super()
        this.state={arr:[0,1]};
        this.addItem=this.addItem.bind(this)
      }
      addItem(){
        var arr=this.state.arr.slice(0);
        arr.push(arr.length);
        this.setState({arr:arr});
      }
      render() {
        var arr=this.state.arr.slice(0);
        arr.reverse();
        return (
         


         
           

              {arr.map((item,index)=>{

                return

              })}
             


         

        );
      }
    }

    export default App;

     

    当APP的render里不设置key 或者key={index} 时,每次新挂载的节点都是0(其他节点能在willreceiveprops中接检测到改变),因为逆序之后,最后一个元素是0,而这个元素的key之前是没有的,所以要新增节点。要实现目标,需要通过在App的render中设置key={arr.length-index}(因为本例的数组简单,设key={item}也可以),告诉react对应的位置不需要重新挂载。


    Dillion
    2楼 · 2020-07-24 18:32

    react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利用key来识别组件,他是一种身份标识,就像每个人有一个身份证来做辨识一样。每个key 对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建

    答题小王子-super
    3楼 · 2020-08-14 19:41

    key主要用在虚拟 DIff 算法,在新旧 nodes 对比时辨识 虚拟dom。如果不使用 key,react会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

    猜不到结尾
    4楼 · 2021-01-12 09:27

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特。

    相关问题推荐

    • 回答 10

      不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。接下来,我们实现一个简单的实例了解路由拦截的基本流程。...

    • react组件生命周期?2020-06-11 20:09
      回答 8

      组件的生命主要包括3个阶段: 挂载、更新、卸载挂载:     constructor()componentWillMount()render()componentDidMount()更新componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()卸载compon......

    • 回答 6

      无论是大厂或者一般公司的招聘对框架的要求是熟悉或者至少掌握vue,react,angular中的一门,而且一般在大厂里每个团队的技术框架相对来说比较稳定,一般会挑选一门主要的技术框架,其它的作为辅助,除非有重大原因,否则一般不会轻易变更主要技术栈。...

    • 前端react 按钮的处理2021-03-23 09:47
      回答 5

      react 按钮代码[removed][removed][removed][removed][removed][removed][removed]//在这里写react代码const element=Hello React;//function Square(props){   return(         {props.value}          );}ReactDOM.render(,d......

    • 回答 5

      import React, { Component } from 'react'import ReactEcharts from 'echarts-for-react'import Background from '../../assets/img/background2.png'import Background3 from '../../...

    • 回答 3

      前端常用的一个框架

    • 回答 2

      我们一般使用React是是做SPA单页面应用,也就是数据影响视图,性能更优化向对于传统的MPA多页面应用。

    • 回答 1

      创建更新查询:可使用更新查询在一次操作中更改多个行中的内容。创建删除查询:可以通过使用删除bai查询删除表中的所有行。

    没有解决我的问题,去提问