vue中：key 和react 中key={} 的作用，以及ref的特性？

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
   }
   }
   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.youkuaiyun.com/liangklfang/article/details/72858295
https://blog.youkuaiyun.com/liwusen/article/details/80009968

转载于:https://www.cnblogs.com/panax/p/10561765.html