javascript - 下面几段 React 代码有什么区别？

Question

第一个:-

ReactDOM.render((
  <Provider store={store}>
    <App />
  </Provider>
),document.getElementById('root'));

第二个:-

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>,
  document.querySelector(".container")
);

我想知道的是，执行 document.querySelector(".container") 和 document.getElementById('root') 的具体区别是什么> ?

Answer 1

document.getElementById('root') 使用 id root 从您的 HTML 获取 DOM 元素，而 document.querySelector(".container") 使用 class container

从 HTML 中获取第一个元素

根据 MDN 文档:

document.querySelector()

Returns the first Element within the document that matches the specified selector, or group of selectors, or null if no matches are found.

document.getElementById()

Returns a reference to the element by its ID; the ID is a string which can be used to uniquely identify the element, found in the HTML id attribute.

所以，

在第一种情况中，您的 React 应用程序将在具有 id root 的 DOM 元素中呈现，而在第二种情况中，它将呈现在第一个具有 container

类的 DOM 元素