Question

ref和Key都用于指向元素。但这两者之间的基本区别是什么？

Answer 1

键

键React用于识别已更改的特定虚拟DOM元素。使用键的经典示例是列表。假设我们有一个对象数组：

水果= [{名称：“菠萝”，ID：1}，{名称：“香蕉”，ID：2}，{名称：“百香果”，ID：3}

如果要将该数组作为道具传递给FruitList组件，以便将水果列表呈现到页面上，我们将遍历水果数组，将每个水果呈现为一个列表项：

const FruitList = (props) =>{
  const fruits = props.fruits.map((fruit) =>
    <li>{fruit.name}</li>
  )
  return(
    <ul>
      {fruits}
    </ul>
  )
}

当阵列中的项目实际上没有唯一ID时，您可能还会遇到这种情况。如果呈现的项目没有稳定的ID，则可以将迭代器的索引用作键。

const FruitList = (props) =>{
  const fruits = props.fruits.map((fruit, index) =>
    <li key={index}>{fruit.name}</li>
  )
  return(
    <ul>
      {fruits}
    </ul>
  )
}

参考

类似于键，ref以属性的形式添加到元素中。根据React.js文档，使用引用的一些最佳情况是：管理焦点，文本选择或媒体播放，触发动画以及与第三方DOM库集成。

通常，道具是父组件与子组件交互的方式。但是，在某些情况下，您可能需要修改孩子而不用新的道具重新渲染它。正是在使用refs属性的时候。

以前，字符串和回调函数都可以作为传递给ref的值来使用，但是字符串现在被认为是旧式的，将来有可能不推荐使用。当将ref属性传递给HTML元素时，我们将该DOM元素作为参数传递给回调函数：

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusInput() {
    this.textInput.focus();
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusInput}
        />
      </div>
    );
  }
}

来源：https://medium.com/@nothingisfunny/keys-and-refs-in-react-fd954457fd75

reactjs中ref和key之间有什么区别？

1 个答案: