[React学习笔记]Refs

1.Ref的作用:

使用ref可以获取原生的DOM节点 或是 React元素的实例, ref可以更改不受控组件的状态.

一般情况下,父子组件间的通信交互使用的是props,但是特殊情况下,在数据流之外父组件想强制修改子组件的内容,这个内容是DOM元素或是React组件实例就可以使用refs.

但是,Refs不宜过多使用,最好还是遵守典型数据流的方式.用props 数据放在父级业务组件的好.

2.使用场景

使用场景官网已给出
https://zh-hans.reactjs.org/docs/refs-and-the-dom.html

管理焦点，文本选择或媒体播放。
触发强制动画。
集成第三方 DOM 库。

3.使用方法

创建 使用createRef()创建 再在元素中添加ref属性

class App extends React.Component {
  constructor(props) {
    super(props);
    this.domRef = React.createRef();
    this.reactRef = React.createRef();
  }

  render() {
    return (
      <div>
        <div
          ref={this.domRef}
          onClick={() => {
            console.log(this.domRef.current);
          }}
        >
          DOM 节点 click
        </div>
        <div>
        <TheComponent
          ref={this.reactRef}
          onClick={() => {
            console.log(this.reactRef.current);
          }}
        />
        <button
          onClick={() => {
            this.reactRef.current.changeColor();
            console.log(this.reactRef.current);
          }}
        >
          Click
        </button>
       </div>
   </div>
    );
  }
}

class TheComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: "black"
    };
  }
  changeColor = () => {
    this.setState({ color: "red" });
  };

  render() {
    return <span style={{ color: this.state.color }}>React 元素 </span>;
  }
}

点击第一个DOM节点 控住台会打出

这个ref.current指向的是现在所在的DOM节点

再点击按钮 控住台会打出 并且字体颜色发生改变

控制台显示的是ref.current的值,能看到这是个react组件的实例,有changeColor的方法
在父组件中调用changeColor的方法 字体颜色发生改变 如下

ps:之前迭代中接手上一个人写的代码,有个方法在子组件里 父组件要调用,用的是这种方法解决的
这个方法只适用类组件,函数组件因为没有实例 所以不适用 想使用可以用forwardRef 具体怎么用 的话…没实践过

回调Ref 设置refs的另一种方式

此种方式可以更精细地控制何时 refs 被设置和解除。
引用官网代码如下:

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;

    this.setTextInputRef = element => {
      this.textInput = element;
    };

    this.focusTextInput = () => {
      // 使用原生 DOM API 使 text 输入框获得焦点
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    // 组件挂载后，让文本框自动获得焦点
    this.focusTextInput();
  }

  render() {
    // 使用 `ref` 的回调函数将 text 输入框 DOM 节点的引用存储到 React
    // 实例上（比如 this.textInput）
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}
        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

使用回调函数将dom节点存储到textInput里,挂载时将调用回调函数传入dom元素,卸载时传入null.在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。