使用参考文献

Question

Ref的目的是取代document.getElementById吗？

一旦我应用了react，就不应该使用document.getElementById来访问DOM来获取数据了？

我发现一些文章说我们可以应用this.refs来访问DOM

   <input  ref="test" value="option" id="option4"/>

   console.log(this.refs.test);

但是它只能在组件中的方法中运行，如果我想在控制台(developer Tools)中显示输入值，怎么办？

Answer 1

这在某种程度上是正确的，因为react使用其虚拟的dom和diffing算法来观察变化并在dom中进行反映。如果使用直接api访问dom。react无法在其虚拟区域中访问它。

这就是为什么它们有一个惟一的id、或键，就像在DOM中一样，可以将元素(组件)作为节点进行操作。

如果您在npm包中使用的确认警报组件中看到，它们将创建一个元素并使用ReactDOM将其呈现为一个元素。烤面包机一旦完成，就不会直接从DOM中移除。

首先，通过使用api findDomNode at https://reactjs.org/docs/react-dom.html#finddomnode从https://reactjs.org/docs/react-dom.html#finddomnode中找到它。

然后使用unmountComponentAtNode.卸载它。https://reactjs.org/docs/react-dom.html#unmountcomponentatnode

例如：https://github.com/GA-MO/react-confirm-alert/blob/master/src/index.js

因此，refs用于克服直接的DOM操作和影响或影响反应呈现过程的更改。