Question

https://facebook.github.io/react/docs/more-about-refs.html

这里我对React JS中的ref有所了解。但仍然不清楚为什么使用ref代替State。

Answer 1

Refs通常用于访问DOM元素，通常用于设置或获取html属性，如Width，Height等。您也可以使用它来获取值，例如从文本字段中获取。 States定义组件的属性，这些属性可以通过您执行的不同操作进行更改。

Answer 2

给你举个例子。假设您要将Material Design Lite（MDL）集成到React应用程序中。为了将MDL正确挂钩到React组件，它需要直接访问底层DOM元素。这可能是使用refs的有效用例。

import React from 'react';

class Button extends React.Component {

  componentDidMount() {
    window.componentHandler.upgradeElement(this.node);
  }

  componentWillUnmount() {
    window.componentHandler.downgradeElements(this.node);
  }

  render() {
    return (
      <button
        ref={node => { this.node = node; }}
        className="mdl-button mdl-js-button mdl-js-ripple-effect"
      >
        {this.props.children}
      </button>
    );
  } 

}

export default Button;

ReactJS中的Ref和State差异

2 个答案: