No react, o elemento é a menor unidade de construção, um objeto, não um elemento DOM, pode ser definido no código usando jsx, e a sintaxe é "const element =..." O elemento não pode ser alterado após ser criado. quiser alterar o DOM, você só pode criar um novo elemento.
O ambiente operacional deste tutorial: sistema Windows 10, react versão 17.0.1, computador Dell G3.
Elemento
1.Element é a menor unidade de construção em reação. É um objeto, não um DOM, e o custo de criação é relativamente baixo.
(1) Normalmente usamos JSX para definir um Elemento no código:
elemento const = <h1>Olá, mundo</h1>;(2) Use ReactDOM.render para renderizar
ReactDOM.render(elemento, document.getElementById('root') );2. Depois que um Elemento é criado, ele não pode ser alterado. É como um quadro de um filme. Se você deseja alterar a exibição do DOM, você só pode criar um novo Elemento.
3. O React comparará os dois elementos antes e depois e atualizará apenas o conteúdo que precisa ser atualizado.
Amplie seu conhecimento:
DOM virtual
1. O React não constrói elementos DOM diretamente, mas cria objetos semelhantes à estrutura DOM. Então o DOM real é renderizado com base nesta estrutura, que é React DOM.
2. Quando houver uma alteração, crie um novo objeto, compare-o com a estrutura anterior e registre a diferença entre os dois. Você pode observar o algoritmo diff aqui.
3. O DOM é então atualizado com base nas diferenças registradas.
Elemento React
1. 'DOM' virtual;
2. A essência é um objeto imutável;
atributo type: se for uma string como 'h1', representa um nó DOM, e seu atributo props é para os atributos do nó DOM. Se o atributo type for um componente que representa.
função ou classe, representa um componente;
3. Os dois tipos de ReactElement podem ser aninhados e misturados para descrever a árvore DOM;