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]來引用組件的實例
2. 回調函數
回調函數就是在dom節點或組件上掛載函數，函數的入參是dom節點或組件實例，達到的效果與字符串形式是一樣的，
都是獲取其引用。
回調函數的觸發時機：
- 組件渲染后，即componentDidMount后
- 組件卸載后，即componentWillMount后，此時，入參為null
- 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