为什么DOM方法行为在函数中是不确定的,它在React中呈现元素？

Question

我只是试图用文件的方法,如getElementsByClassName,getElementsByTagName,getElementById,,互相安慰的输出.然而奇怪的是,只有getElementById不工作,它记录null.我用App和TagName h1尝试过className,效果很好.任何人都可以阐明这一点吗？这是代码沙箱[ https://codesandbox.io/s/813mnx1vq2 ].

下面是我App正在渲染的代码,

function App() {

  { console.log(document.getElementById('heading1')) }

  /*
  { console.log(document.getElementsByTagName("h1")) }
  // Output: HtmlCollection array which contains element with id=heading1
  */

  /*
  { console.log(document.getElementsByClassName("App")) }
  // Output: HtmlCollection array which contains div.App element
  */

  return (
    <div  className="App">
      <h1 id="heading1">Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen!</h2>

    </div>
  );

}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

PS编辑: NodeList何时生效,何时是静态的？.感谢Jonas.

Answer 1

从这些方法返回的有两种不同的数据结构,一种是a NodeList,另一种是一个节点.NodeLists的特殊之处在于它们是实时的,这意味着如果一个节点被添加到DOM,它也会被添加到NodeList中.在控制台中,您可以看到所记录内容的实时版本,因此您还可以看到DOM中尚未包含的元素,getElementsByTagName并且您没有得到任何结果getElementByID.

不过,使用React时根本不应该使用它们.