【一起来学React】- Refs学习（一）

在dom中我们获取一个节点元素只需要getElementById即可，那么在react中该怎么做呢

定义
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 组件

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

文本处理（input等文本框处理的的时候）
动画（页面渲染后某个元素需要动画）
其他的DOM操作（其他的DOM操作）
能不用就别用
现在都数据驱动了，所以应该避免直接操作DOM。因为DOM确实费性能，就算是有虚拟DOM也不例外
--------------------- 
作者：Fakin 
来源：CSDN 
原文：https://blog.csdn.net/Fakin/article/details/86477363 
版权声明：本文为博主原创文章，转载请附上博文链接！