Refs

一、The ref callback attribute

ref：reference，父组件引用子组件

组件并不是真实的 DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性.

1.1 refs.[refName]

this.refs.[refName] 返回真实的 DOM 节点。需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。

class MyComponent extends React.Component{

        handleClick(event){

            this.refs.myInput.focus();

        }

        render(){

            return (

                <div>

                    <input type="text" ref="myInput" />

                    <button onClick={this.handleClick}>Focus on me</button>

                </div>

            )

        }

    }

    React.render(<MyComponent/>,document.body)

1.2 ref为函数

ref 属性可以是一个回调函数，而不是一个名字。这个回调函数在组件安装后立即执行。被引用的组件作为一个参数传递，且回调函数可以立即使用这个组件，或保存供以后使用(或实现这两种行为)。比如下面这段代码，ref回调储存DOM节点的引用。

class CustomTextInput extends React.Component {

  constructor(props) {

    super(props);

    this.focus = this.focus.bind(this);

  }

  focus() {

    // Explicitly focus the text input using the raw DOM API

    this.textInput.focus();

  }

  render() {

    // Use the `ref` callback to store a reference to the text input DOM

    // element in this.textInput.

    return (

      <div>

        <input

          type="text"

          ref={(input) => { this.textInput = input; }} />

        <input

          type="button"

          value="Focus the text input"

          onClick={this.focus}

        />

      </div>

    );

  }

}

React将在组件mounts时调用ref回调，输入DOM元素；在组件unmount时调用ref回调，输入null。一种常见的模式是利用ref回调来访问DOM元素。如果你现在使用的是this.refs.myrefName来访问ref，建议采用上面这种回调函数的形式。

当ref属性用在一个自定义组件上，ref回调接受这个组件的mounted实例作为参数。比如，如果我们想包裹上面的CustomTextInput组件来模拟他mount后立即被单击

class AutoFocusTextInput extends React.Component {

  componentDidMount() {

    this.textInput.focus();

  }

  render() {

    return (

      <CustomTextInput

        ref={(input) => { this.textInput = input; }} />

    );

  }

}

你可能不会在函数组件上使用ref属性，因为函数组件没有实例，然而你可以在函数组件的render 函数中使用ref属性。

function CustomTextInput(props) {

  // textInput must be declared here so the ref callback can refer to it

  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时，想想是否可以用state代替。最适合设置state的地方是在层级中较高的位置设置。

巴特西

Refs

一、The ref callback attribute

1.1 refs.[refName]

1.2 ref为函数

二、不要滥用refs

最新文章

热门文章