14 React Refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

 

 

class MyComponent extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  }
  render() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    );
  }
}
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

 

React元素:

　　React 元素是由一些属性（properties）构成的 JavaScript 简单对象.

        React 元素仅仅是 JavaScript 简单对象(plain old JavaScript objects)，用来描述组件的 HTML 应是怎样的结构，这个对象上不包含任何方法（Methods），仅仅只有数据。

React组件:

React 组件指代的是一个 React 组件类的实例

ReactDOM.render() 把一个 React 元素渲染成一个特定的 DOM 元素，与此同时，ReactDOM.render() 将返回一个 React 组件实例。

（在 React 中）从不需要你用 new 操作符创建 React 组件。相反的是，你将使用 ReactDOM.render() 把一个 React 元素渲染成一个特定的 DOM 元素，与此同时，ReactDOM.render() 将返回一个 React 组件实例。

从 ReactDOM.render() 返回的组件实例可以调用在 React 组件类中定义的方法。反过来想一下会让你明白，ReactDOM.render() 是 React 为你实例化一个组件的机制.

与 ReactDOM.render() 有关的最后一个有趣的点是，React 在 ReactDOM.render() 时对虚拟 DOM 执行高效的 diff 算法.

React 元素表示虚拟 DOM（元素），这意味着 ReactDOM.render() 接收一个虚拟 DOM（元素），将其渲染成一个真实 DOM 元素，返回（React 元素 type 指定的）组件实例.

组件支撑实例:

React 元素和 React 组件实例，这两个概念都是 DOM 之上的抽象层.

ReactDOM.render() 通过将 React 元素渲染到现有的 DOM 元素中来生成一个组件实例.

组件实例不是真实 DOM 节点。然而，访问与组件实例关联的底层 DOM 节点实际上很简单 - 我们使用 ReactDOM.findDOMNode()，并将组件实例作为其参数传递。那么这与“组件支撑实例”术语有什么关系呢？让我们一脸懵逼的是，React 在其文档的各处将引用的真实 DOM 节点称之为组件支撑实例。

React 在其文档的各处将引用的真实 DOM 节点称之为组件支撑实例。