• React 的组件的 key

    2018-07-06 15:44:29
    react key概述key的作用react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的。简单来说,react利用key来识别组件,...

    react key概述

    key的作用

    react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给react自己用的。

    简单来说,react利用key来识别组件,它是一种身份标识标识,就像我们的身份证用来辨识一个人一样。每个key对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建。例如下面代码:

    //this.state.users内容
    this.state = {
     users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
     ....//省略
    }
    render()
     return(
      <div>
        <h3>用户列表</h3>
        {this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
      </div>
     )
    );

    上面代码在dom渲染挂载后,用户列表只有张三李四两个用户,王五并没有展示处理,主要是因为react根据key认为李四王五是同一个组件,导致第一个被渲染,后续的会被丢弃掉。

    这样,有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件。

    • key相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新。

    • key值不同,则react先销毁该组件(有状态组件的componentWillUnmount会执行),然后重新创建该组件。

    另外需要指明的是:

    key不是用来提升react的性能的,不过用好key对性能是有帮组的。

    应该知道React使用virtual dom来比较UI状态的变化,如果DOM中的某一节点更新时重新渲染,一样的话就不渲染。key属性的作用就在与解决渲染List的这种难题,简单来说,例如你有一个List:

    <li>Orange</li> <li>Banana</li>

    如果想更新成

    <li>Apple</li> <li>Orange</li>

    那dom比较算法就可以有多种选择,例如销毁两个,生成两个新的代替,或者销毁banana,在orange前插入apple等等,当list多的时候情况就比较复杂,所以React为了使得Dom比较算法最快,需要你提供给每一个list元素一个特殊的key,这样就容易比较前后两个大型的List了,帮助React如何移动、替代、销毁、插入节点,例如

    let List = this.props.fruits.map((fruit) => {
                return <FruitList key={fruit.id}
                                  name={fruit.name}
                        />
             });
     
    return (
        <div>
            {List}
        </div>

    展开全文
  • React map遍历点击获取key值 在使用react的时候不免需要遍历循环出dom,这时候可以通过点击过去产生的的每个dom的标识来操作 首先准备一个需要遍历循环的集合,可以是键值对,也可以是数组, const fromIndex=...

    React map遍历点击获取key值

    在使用react的时候不免需要遍历循环出dom,这时候可以通过点击过去产生的的每个dom的标识来操作

    首先准备一个需要遍历循环的集合,可以是键值对,也可以是数组,

     const fromIndex=[1, 2, 3, 4, 5];

    JSX允许在大括号中嵌入任何表达式,因此可以 内联 map() 结果

    所以新建一个对象,作为map结果的载体以便插入jsx

    const fromList=fromIndex.map(
                    (number)=>
                    <div key={number.toString()}
                         className={index.fromItem+" "+universal.rowCenter}
                         onClick={(e)=>{this.changeFrom(e,number.toString())}}
                    >
                {number}
            </div>);

    插入jsx

         return(
                <div className={universal.columnCenter+" "+index.leftNavigation}>
                    <div className={index.fromList+" "+universal.columnCenter} >
                        {fromList}
                    </div>
                </div>
            )

    键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识
    所以一定要记得加上key

    然后在遍历的时候加上点击事件,同时将key值传入就行了
    ES6写法

      changeFrom(e,a){
            console.log(e.target,a);
        }
    onClick={(e)=>{this.changeFrom(e,number.toString())

    效果
    这里写图片描述

    完整的组件代码

    class LeftNavigation extends React.Component{
        constructor(props){
            super(props);
            // 这个绑定是必要的,使`this`在回调中起作用
            this.changeFrom = this.changeFrom.bind(this);
        }
        changeFrom(e,a){
            console.log(e.target,a);
        }
        render(){
            const fromIndex=[1, 2, 3, 4, 5];
            const fromList=fromIndex.map(
                    (number)=>
                    <div key={number.toString()}
                         className={index.fromItem+" "+universal.rowCenter}
                         onClick={(e)=>{this.changeFrom(e,number.toString())}}
                    >
                {number}
            </div>);
            return(
                <div className={universal.columnCenter+" "+index.leftNavigation}>
                    <div className={index.fromList+" "+universal.columnCenter} >
                        {fromList}
                    </div>
                </div>
            )
        }
    }
    展开全文
  • react 中的key 属性是一个特殊的属性,它的出现不适给开发者用的,(列如你为一个组件设置key 之后,也无法获取这个组件的key值, )而是给react 自己用的。 简单说,react利用key来识别组件,他是一种身份标识,就...

    key概念
    react 中的key 属性是一个特殊的属性,它的出现不适给开发者用的,(列如你为一个组件设置key 之后,也无法获取这个组件的key值, )而是给react 自己用的。
    简单说,react利用key来识别组件,他是一种身份标识,就像每个人有一个身份证来做辨识一样。每个key 对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建。

    key的使用场景
    在项目开发中,key属性的使用场景最多的还是由数组动态创建的子组件情况,需要为每个子组件添加唯一的key属性值,那有的人会自然而然想到,key 和动态渲染的子元素获取的index的值很接近,是不是我们可以直接使用index值 赋值给key呢?
    列如:

    {dataList.map((item,index)=>{
            return <div style={mystyle} key={index}>{item.name}</div>
            })
    }
    

    在尝试后我们发现报错没了,渲染也没问题。但是这里我们强烈不推荐使用数组的index 值来作为key。
    如果数据更新仅仅是数组重新排序或在其中间位置插入新元素,那么所有元素都将重新渲染。
    例如:
    本来index=2 的元素向前移动后,那该元素的key 不也同样发生了改变,那这样改变,key 就没有任何存在的意义了,既然是作为身份证一样的存在,那就不容有失,当然,在你用key值创建子组件的时候,若数组的内容只是作为纯展示,而不涉及到数组的动态变更,其实是可以使用index 作为key的,

    key的值必须保证唯一且稳定
    我们在与key值打过几次交到以后,感觉key值就类似于数据库中的主键id一样,有且唯一。

    this.state = {
     users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
     ....//省略
    }
    render()
     return(
      <div>
        <h3>用户列表</h3>
        {this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
      </div>
     )
    );
    

    注意以上范例中,动态渲染的数据中,key以数据的id来定,而李四王五的id相同而导致key 相同,最后的渲染结果为张三和李四,王五并没有展示出来。主要是因为react 根据key认为李四王五是同一个组件(他们两个的key值相同),导致第一个被渲染,后续的会被丢弃掉。

    这样有了key属性后,就可以与组件建立一种对应关系,react 根据key来决定是销毁重新创建组件还是更新组件。

    并且,key也要保证值得稳定性,例如:

    {dataList.map((item,index)=>{
            return <div style={mystyle} key={Math.random()}>{item.name}</div>
            })
    }
    

    尤其如以上范例中所示,key的值以Math.random() 随机生成而定,这使得数组元素中的每项都重新销毁然后重新创建,有一定的性能开销;另外可能导致一些意想不到的问题出现。
    所以key 的中必须保证其唯一和稳定性。

    展开全文
  • React获取DOM方法

    2018-07-09 11:16:17
    js 常规dom操作方式,通过id获取dom2.react原生函数findDOMNode获取dom3.通过ref来定位一个组件,切记ref要全局唯一(类似id)import React, { Component } from 'react';import ReactDOM from 'react-dom'; class ...
    展开全文
  • reactkey值的理解

    2019-10-04 16:36:47
    react利用key来识别组件,它是一种身份标识标识,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件...
    react利用key来识别组件,它是一种身份标识标识,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建
    有了key属性后,就可以与组件建立了一种对应关系,react根据key来决定是销毁重新创建组件还是更新组件。
    key相同,若组件属性有所变化,则react只更新组件对应的属性;没有变化则不更新。
    key值不同,则react先销毁该组件(有状态组件的componentWillUnmount会执行),然后重新创建该组件(有状态组件的constructor和componentWillUnmount都会执行)

    转载于:https://www.cnblogs.com/lijinxiao/p/11440789.html

    展开全文
  • reactkey和value

    2019-09-26 17:15:23
    {0:213456787654321} 1:取key // 查询数据的方法 searchData = values => { for (var i in values) { if (i != 'keyword') { } } 2,取value …keyword
  • React获取表单元素,设置表单元素(select,input,checkbox,textarea): 限制性约束 (value(通过react实现mv 方式绑定的值)) 非限制性约束(defaultvalue 相当于原生的value) 小案例 输出结果: ...
  • You can no longer access this.props.ref and this.props.key from inside the Component instance itself. So you need to use a different name for those props.
  • React 组件的key

    2018-07-06 14:57:48
    转载:https://blog.csdn.net/code_for_free/article/details/50514259一,概要在同系列的上一篇博客React修炼之路(一)里,我第一次接触组件key这个概念,因为不理解key的用处及不清楚React组件的更新机制而遇到...
  • react获取state的值并且修改分为两种情况: 在视图层处理: //在 state 中饭设置初始值 state={ name:'', age:'' } //通过 控制一个事件触发然后setState 去设置 setName=()=&gt;{ this.setState({ ...
  • React获取api数据并渲染 1:进入当前项目安装axios 命令:npm install axios 引入:const axios = require('axios'); 2:安装路由 命令:npm install react-router-dom 引入:import { Link } from ...
  • 在开发react程序时我们经常会遇到这样的警告,然后就会想到:哦!循环子组件忘记加key了~ 出于方便,有时候会不假思索的使用循环的索引作为key,但是这样真的好吗?什么样的值才是key的最佳选择? 为了弄明白,本文...
  • react获取输入框的值: 需要用到数据的双向绑定,Vue有v-module,react就需要使用event.target来更新react的状态, 1.初始化:this.state={“username”:""} 2.给输入框加入onchange事件 {this.state.username...
  • React中的key与index

    2020-03-13 13:40:48
    React中的key与index 描述 在react 开发过程中,遇到循环渲染一个列表组件的时候,往往会给渲染的子组件添加一个key属性,来提高性能,这里涉及两个问题, 第一个是为什么添加key属性。 第二个是怎么添加key属性。 ...
  • react学习之key与表单

    2019-05-24 19:53:41
    react学习之key与表单 1.keyreact的数组中,你必须要保证下面的这点,那就是你们数组的每一项都必须有个key值,因为键帮助React识别哪些项已经更改、添加或删除。数组内的元素必须有键,以确保元素有一个稳定的...
  • react获取children的ref

    2020-05-15 10:20:27
    作为容器组件,接收来自props中的children并进行布局分配是常规需求,但如何获取children的ref呢。 其实可以使用React.cloneElement()来实现该需求, 这里以单节点为例: const child = React.Children.only(this....
  • <inputref="title"/><buttononClick={this.addData}>增加</button> addData=()=>{ alert(this.refs.title.value); }
  • react-key的作用

    2019-07-15 00:09:48
    React 元素可以具有一个特殊的属性 key,这个属性不是给用户自己用的,而是给 React 自己用的。如果我们动态地创建 React 元素,而且 React 元素内包含数量或顺序不确定的子元素时,我们就需要提供 key 这个特殊的...
  • React获取数据

    2019-08-13 08:04:55
    React初学者经常从不需要获取数据的应用开始。他们经常面临一个计数器,任务列表获取井字棋游戏应用。这是很好的,因为在开始学习React的时候,数据获取在你的应用中添加了另一层复杂度。 然而,有些时候你想要从...
1 2 3 4 5 ... 20
收藏数 34,953
精华内容 13,981