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 节点称之为组件支撑实例。