React中Refs学习(一)

在dom中我们获取一个节点元素只需要getElementById即可,那么在react中该怎么做呢,打算分两篇来写,本篇只写一些基础的东西,下一篇是进阶,回调Refs、传递、在HOC中的应用等等

定义

Refs提供了一种访问DOM节点或在render方法中创建的React元素的方法。

这是官方的解释,那么这段话到底什么意思呢?意思是说通过Refs可以访问DOM节点或者创建react元素(注意是react元素,并不是dom)

如何使用

直接来一个代码示例

class Fakin extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    this.refs.myInput.focus();
  }
  render() {
    return (
        <div>
            <input type="text" ref="myInput" />
        </div>
    )
  }
}

是不是感觉和html中的id很像啊,其实个人认为在某种的程度上refs就是react中的id

函数式组件中的Refs

上面讲的是类组件中的Refs。函数式组件中的Refs与之有不同的地方,这里必须指出

  • 不能在函数式组件上使用 ref 属性
  • 只能在函数式组件内部使用ref
function Fakin() {
  return <input />;
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  render() {
    // 这将 *不会* 工作!
    return (
      <Fakin ref={this.textInput} />
    );
  }
}

函数式组件上无法使用 ref 属性

function Fakin(props) {
  // 这里必须声明 textInput,这样 ref 回调才可以引用它
  let textInput = null;

  function handleClick() {
    textInput.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={(input) => { textInput = input; }} />

      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );
}

函数式组件内部使用refs,refs必须指向一个 DOM 元素或者 class 组件

什么时候使用

根据个人经验,在reactrefs一般用于dom操作,虽然数据驱动的框架不建议我们直接操作dom,但是有时候无法避免必须得操作dom,比如动画等。

  • 文本处理(input等文本框处理的的时候)
  • 动画(页面渲染后某个元素需要动画)
  • 其他的DOM操作(其他的DOM操作)

能不用就别用

现在都数据驱动了,所以应该避免直接操作DOM。因为DOM确实费性能,就算是有虚拟DOM也不例外。