vue中:key 和react 中key={}

为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性

一句话概括就是key的作用主要是为了高效的更新虚拟DOM

ref的特性

React的ref有3种用法:

  • 字符串(已废弃)
  • 回调函数
  • React.createRef() (React16.3提供)

1. 字符串

最早的ref用法。

1.dom节点上使用,通过this.refs[refName]来引用真实的dom节点

//this.refs['inputRef']来访问

2.类组件上使用,通过this.refs[refName]来引用组件的实例

//this.refs['comRef']来访问

2. 回调函数

回调函数就是在dom节点或组件上挂载函数,函数的入参是dom节点或组件实例,达到的效果与字符串形式是一样的,

都是获取其引用。

回调函数的触发时机:

  1. 组件渲染后,即componentDidMount后
  2. 组件卸载后,即componentWillMount后,此时,入参为null
  3. ref改变后

    1.dom节点上使用回调函数

    <input ref={(input) => {this.textInput = input;}} type="text" />

    2.类组件上使用

    <CustomInput ref={(input) => {this.textInput = input;}} />

    3.可用通过props跨级传递的方式来获取子孙级dom节点或组件实例

3.React.createRefclass Child extends React.Component{

constructor(props){
super(props);
this.myRef=React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <input ref={this.myRef}/>
}

}

4.React.forwardRef

同样是React 16.3版本后提供的,可以用来创建子组件,以传递ref。

//子组件(通过forwardRef方法创建)

const Child=React.forwardRef((props,ref)=>(



));

//父组件

class Father extends React.Component{

constructor(props){

super(props);

this.myRef=React.createRef();

}

componentDidMount(){

console.log(this.myRef.current);

}

render(){

return

}

}

//生成高阶组件

const logProps=logProps(Child);

//调用高阶组件

class Father extends React.Component{

constructor(props){

super(props);

this.myRef=React.createRef();

}

componentDidMount(){

console.log(this.myRef.current);

}

render(){

return

}

}

//HOC

function logProps(Component) {

class LogProps extends React.Component {

componentDidUpdate(prevProps) {

console.log('old props:', prevProps);

console.log('new props:', this.props);

}

render() {
const {forwardedRef, ...rest} = this.props; // Assign the custom prop "forwardedRef" as a ref
return <Component ref={forwardedRef} {...rest} />;
}

}

// Note the second param "ref" provided by React.forwardRef.

// We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"

// And it can then be attached to the Component.

return React.forwardRef((props, ref) => {

return <LogProps {...props} forwardedRef={ref} />;

});

}

//生成高阶组件

const logProps=logProps(Child);

//调用高阶组件

class Father extends React.Component{

constructor(props){

super(props);

this.myRef=React.createRef();

}

componentDidMount(){

console.log(this.myRef.current);

}

render(){

return

}

}

//HOC

function logProps(Component) {

class LogProps extends React.Component {

componentDidUpdate(prevProps) {

console.log('old props:', prevProps);

console.log('new props:', this.props);

}

render() {
const {forwardedRef, ...rest} = this.props; // Assign the custom prop "forwardedRef" as a ref
return <Component ref={forwardedRef} {...rest} />;
}

}

// Note the second param "ref" provided by React.forwardRef.

// We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"

// And it can then be attached to the Component.

return React.forwardRef((props, ref) => {

return <LogProps {...props} forwardedRef={ref} />;

});

}

整理的有点乱,详细参考:

https://blog.csdn.net/liangklfang/article/details/72858295

https://blog.csdn.net/liwusen/article/details/80009968

vue中:key 和react 中key={} 的作用,以及ref的特性?的更多相关文章

  1. React中的Keys

    前言 当你在React当中渲染列表项的时候,React会尝试存储对应每个单独项的相关信息,如果你的组件包含state状态数据,那么这些状态数据必须被排序. 当你想要更新这些列表项的时候,React必须 ...

  2. 从 Vue 的视角学 React(二)—— 基本语法

    基于 Vue.js 开发的时候,每个 vue 文件都是一个单独的组件,可以包含 HTML,JS,CSS 而 React 是以函数为基础,每个 function 就是一个组件.虽然 JSX 让 HTML ...

  3. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  4. React 中的key值

    在react中必须要有key值,key不是用来提升react的性能的,react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key p ...

  5. react中对于key值的理解

    1.key是用来帮助react识别哪些内容被更改.添加或者删除.key需要写在用数组渲染出来的元素内部,并且需要赋予其一个稳定的值.如果key值发生了变更,react则会触发UI的重渲染. 2.在相邻 ...

  6. React中key的必要性与使用

    React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视图.更新的过程是由数据驱动的,新 ...

  7. 第二章 Vue快速入门-- 18 v-for中key的使用注意事项

    注意:如果属性和方法还没定义直接使用的话,就会报   xxx is not defined 导致界面不能正常显示.我看视频教程里老师的可以直接使用,而且界面正常显示,可能是vue版本不同吗?还不清楚 ...

  8. 【react】---react中key值的作用

    一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...

  9. React中key的讲解

    通过阅读React的文档我们知道React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视 ...

随机推荐

  1. leetcode python翻转字符串里的单词

    # Leetcode 151 翻转字符串里的单词### 题目描述给定一个字符串,逐个翻转字符串中的每个单词. **示例1:** 输入: "the sky is blue" 输出: ...

  2. CTU OPEN 2017 Shooting Gallery /// 区间DP

    题目大意: 给定n 给定n个数 选定一个区间留下其他消去 要求区间两端的两个数一样 若成功留下一个区间 则在选定区间的基础上 继续进行上述操作 直到无法再选出这样的区间 求最多操作数 按区间长度由短到 ...

  3. Java-技术专区-问题专区-应该了解的基础技术点

    Java基础 Arrays.sort实现原理和Collection实现原理 foreach和while的区别(编译之后) 线程池的种类,区别和使用场景 分析线程池的实现原理和线程的调度过程 线程池如何 ...

  4. bootstrap学习(三)表单

    基本实例: from-group:可以是其内的标签排列更好 from-control:使标签宽度为100% <form> <div class="form-group&qu ...

  5. 为IIS服务器配置SSL,并设置为默认使用https协议访问网站

    要使网站支持https协议,需要SSL证书,我的服务器和域名都是在阿里云购买的,所以这里我演示阿里云获取SSL证书的方法 我先说下我的服务器环境:windows server 2012 + IIS8. ...

  6. 微信小程序の页面路由

    微信小程序的页面路由由平台已栈的形式管理. 微信小程序的页面为什么会如此特殊呢,因为可视区域始终只有一个页面. 一.小程序页面的路由方式 小程序页面有6种路由方式:初始化.打开新页面.页面重定向.页面 ...

  7. adb.exe端口被占用,起不来报错

    一.准备部署android功能调试时:报错 Please ensure that adb is correctly located at 'D:\ProgramFiles\eclipse_jee_ox ...

  8. Dubbox服务的提供方配置

    在src/main/resources下创建applicationContext-service.xml ,内容如下: <?xml version="1.0" encodin ...

  9. poj 3294 后缀数组+二分

    题目大意: 给定n个字符串,求出现在不小于k个字符串中的最长子串 基本思路: 二分长度,统计个数,一般套路,就是这个跟说好的不一样啊,我非得开2倍才不re,真他妈不爽,先二分找出长度,然后根据长度输出 ...

  10. 常见条码类型介绍(Code 39、Code 128、EAN-8、EAN-13、EAN-128、ISSN、TIF、TIF-14、UPC(A)、UPC(E))

    常见条码类型,如下: 1.Code 39 Code 39,又称为"Code 3 of 9",是非零售市场中最常用的格式,用于盘存和跟踪.Code 39码编码规则简单,误码率低.所能 ...