2020-07-24 10:56发布
通常认为当 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 (
};
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 (
return
})}
export default App;
当APP的render里不设置key 或者key={index} 时,每次新挂载的节点都是0(其他节点能在willreceiveprops中接检测到改变),因为逆序之后,最后一个元素是0,而这个元素的key之前是没有的,所以要新增节点。要实现目标,需要通过在App的render中设置key={arr.length-index}(因为本例的数组简单,设key={item}也可以),告诉react对应的位置不需要重新挂载。
react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利用key来识别组件,他是一种身份标识,就像每个人有一个身份证来做辨识一样。每个key 对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建
key主要用在虚拟 DIff 算法,在新旧 nodes 对比时辨识 虚拟dom。如果不使用 key,react会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特。
不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。接下来,我们实现一个简单的实例了解路由拦截的基本流程。...
组件的生命主要包括3个阶段: 挂载、更新、卸载挂载: constructor()componentWillMount()render()componentDidMount()更新componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()卸载compon......
无论是大厂或者一般公司的招聘对框架的要求是熟悉或者至少掌握vue,react,angular中的一门,而且一般在大厂里每个团队的技术框架相对来说比较稳定,一般会挑选一门主要的技术框架,其它的作为辅助,除非有重大原因,否则一般不会轻易变更主要技术栈。...
react 按钮代码[removed][removed][removed][removed][removed][removed][removed]//在这里写react代码const element=Hello React;//function Square(props){ return( {props.value} );}ReactDOM.render(,d......
import React, { Component } from 'react'import ReactEcharts from 'echarts-for-react'import Background from '../../assets/img/background2.png'import Background3 from '../../...
前端常用的一个框架
我们一般使用React是是做SPA单页面应用,也就是数据影响视图,性能更优化向对于传统的MPA多页面应用。
创建更新查询:可使用更新查询在一次操作中更改多个行中的内容。创建删除查询:可以通过使用删除bai查询删除表中的所有行。
最多设置5个标签!
通常认为当 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 (
}
};
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对应的位置不需要重新挂载。
react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利用key来识别组件,他是一种身份标识,就像每个人有一个身份证来做辨识一样。每个key 对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建
key主要用在虚拟 DIff 算法,在新旧 nodes 对比时辨识 虚拟dom。如果不使用 key,react会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特。
相关问题推荐
不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。接下来,我们实现一个简单的实例了解路由拦截的基本流程。...
组件的生命主要包括3个阶段: 挂载、更新、卸载挂载: constructor()componentWillMount()render()componentDidMount()更新componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()卸载compon......
无论是大厂或者一般公司的招聘对框架的要求是熟悉或者至少掌握vue,react,angular中的一门,而且一般在大厂里每个团队的技术框架相对来说比较稳定,一般会挑选一门主要的技术框架,其它的作为辅助,除非有重大原因,否则一般不会轻易变更主要技术栈。...
react 按钮代码[removed][removed][removed][removed][removed][removed][removed]//在这里写react代码const element=Hello React;//function Square(props){ return( {props.value} );}ReactDOM.render(,d......
import React, { Component } from 'react'import ReactEcharts from 'echarts-for-react'import Background from '../../assets/img/background2.png'import Background3 from '../../...
前端常用的一个框架
我们一般使用React是是做SPA单页面应用,也就是数据影响视图,性能更优化向对于传统的MPA多页面应用。
创建更新查询:可使用更新查询在一次操作中更改多个行中的内容。创建删除查询:可以通过使用删除bai查询删除表中的所有行。