Next 的原理分析_React原理(DOM)

libokaifa
90 阅读2分钟

什么是DOM

DOM（文档对象模型，Document Object Model）是一种编程接口，用于HTML和XML文档。它提供了一种结构化的方式来表示文档，并定义了访问和操作文档内容的方法。通过DOM，开发者可以动态地改变文档的内容、结构和样式。

整个网页其实是一个DOM 树，我们用JavaScrip 来描述整个H5网页，最底部是返回一个根元素，就像树的一个根，其中二级节点元素和多级子元素就是树的枝叶:

Document
 └── html
      ├── head
      │    └── title
      │         └── "示例页面"
      └── body
           ├── h1
           │    └── "标题"
           └── p
                └── "这是一个段落。"

虚拟DOM

虚拟DOM 是React 的一大亮点，是一种临时DOM或者前期虚拟DOM，我们知道浏览器对DOM 的操作是非常耗时的操作，所以React 为了性能的提高，提供了虚拟DOM，其原理是通过临时的DOM 的DIff算法，和打包处理或者交批处理，解决频繁操作DOM，一次性执行从而提升浏览器渲染的效率。整个过程如下：

div1-------->│  
             │  
div2-------->├──----虚拟DOM------> 真实DOM操作
             │  
div3-------->│

非DOM属性以及如何使用

React 提供了独立浏览器的DOM系统，兼顾性能和跨浏览器，不直接映射到HTML元素的标准属性。比如我们自己定义的一些属性,回调函数等如:

import React from 'react';

function CustomComponent({ customProp }) {
  return <div>{customProp}</div>;
}

function App() {
  return <CustomComponent customProp="This is a custom prop" />;
}

export default App;

//customProp 就是非DOM属性

还有些React内置的一些非DOM属性：

  • dangerouslySetInnerHTML: 保证安全，如 XSS 攻击
  • ref：用于访问和操作 DOM 元素:
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // 访问 DOM 元素
    this.myRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

export default MyComponent;
  • key:识别哪些元素发生了变化、被添加或被移除

如当你渲染一个列表时，React 需要知道哪些元素发生了变化，以便高效地更新 DOM。key 属性为每个元素提供了一个唯一的标识符，React 可以通过这个标识符来跟踪每个元素，从而优化渲染过程:

import React from 'react';

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

function App() {
  return <ItemList items={items} />;
}

export default App;

这里注意的是在列表内尽量不要要使用index 作为key的赋值，因为当列表项的顺序发生变化时，使用索引作为 key 会导致 React 重新渲染整个列表，而不是只更新发生变化的部分。这是因为索引会随着列表项的顺序变化而变化，React 无法正确识别哪些元素是相同的，哪些是新的或被移除的，从而造成性能问题,如果列表内存在input 的标签也可能造成状态错乱;

总结

Next 分析系列，欢迎观看共同进步。

avatar
文章
阅读
粉丝