DOM
DOM 是文档对象模型（Document Object Model）的缩写，它是一种用于表示和操作 HTML、XML 和 XHTML 等文档的编程接口。DOM 可以将文档中的每个元素（如标签、属性和文本）都表示为对象，开发者可以使用 DOM 提供的方法和属性来操作这些对象，例如修改元素的内容、样式、属性等。
尽管 DOM 是一种广泛使用的标准，但在处理大规模和复杂的应用程序时，直接使用 DOM 可能会导致性能问题。这是因为 DOM 操作是昂贵的，对 DOM 的频繁操作可能会导致页面重新渲染，从而影响用户体验。
React 是一个流行的 JavaScript 库，它采用了虚拟 DOM（Virtual DOM）的概念来解决直接操作 DOM 时的性能问题。虚拟 DOM 是一个轻量级的复制 DOM 结构的 JavaScript 对象，React 使用它来跟踪页面上的变化。当应用程序的状态发生变化时，React 会通过比较虚拟 DOM 与实际 DOM 之间的差异，然后仅仅更新必要的部分。
使用 React 的好处包括：
-
性能优化：React 通过批处理 DOM 更新和最小化实际 DOM 操作，提高了应用程序的性能。
-
组件化开发：React 鼓励将用户界面划分为独立的组件，每个组件负责管理自己的状态和渲染逻辑。这样的组件化开发模式使代码更加可维护、可测试和可重用。
-
虚拟 DOM 的抽象：React 的虚拟 DOM 提供了一个抽象层，使开发者可以专注于应用程序的逻辑而不是直接操作 DOM。
虽然 React 在大多数情况下是一个很好的选择，但在某些特定场景下，直接操作 DOM 可能仍然是必要的，例如需要对特定的 DOM 元素进行细粒度的操作或集成第三方库等。在这些情况下，可以通过 React 提供的 ref 机制来引用 DOM 元素并进行操作，以获得更好的性能和开发体验。
React Component
React 组件是 React 应用程序中可重用的构建块。它们是 React 应用程序用户界面的基本单元。组件封装了自己的逻辑、状态和渲染，使得管理和组织代码库更加容易。
以下是一个在 React 中的函数组件示例：
import React from "react";
const MyComponent = () => {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
};
export default MyComponent;
在这个示例中，MyComponent 是一个使用箭头函数定义的函数组件。它返回 JSX 代码，表示组件的结构和内容。
React Hook
React Hook 是在函数组件中使用状态和其他 React 特性的函数。它们提供了一种在不编写类组件的情况下管理有状态逻辑的方式。
useState
useState Hook 用于在函数组件中添加状态。它返回一个有状态的值和一个用于更新该值的函数。初始状态可以作为参数传递给 useState 函数。
以下是在函数组件中使用 useState Hook 的示例：
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
export default Counter;
在这个示例中，useState Hook 用于在 Counter 组件中添加一个 count 状态变量。初始状态设置为 0。increment 函数在按钮点击时更新 count 状态。
useEffect
useEffect Hook 用于在函数组件中执行副作用操作。副作用操作可以包括数据获取、事件订阅或手动操作 DOM 等。
以下是在函数组件中使用 useEffect Hook 的示例：
import React, { useState, useEffect } from "react";
const DataFetcher = () => {
const [data, setData] = useState(null);
useEffect(() => {
// 从 API 获取数据
fetch("https://api.example.com/data")
.then((response) => response.json())
.then((data) => setData(data))
.catch((error) => console.error(error));
}, []);
return (
<div>
{data ? (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
) : (
<p>Loading data...</p>
)}
</div>
);
};
export default DataFetcher;
在这个示例中，useEffect Hook 用于在组件挂载时从 API 获取数据。获取到的数据使用 setData 函数存储在 data 状态变量中。空的依赖数组 ([]) 确保该效果仅在组件初始渲染时运行一次。
Imports and Exports
在 React 中，使用 import 和 export 语句来导入和导出组件、函数、变量等。
导入
可以使用 import 语句来导入其他模块导出的内容。语法如下：
import SomeComponent from "./SomeComponent";
import { SomeFunction, SomeVariable } from "./SomeModule";
在上面的示例中，SomeComponent 是从路径为 ./SomeComponent 的模块中导入的默认导出。SomeFunction 和 SomeVariable 是从路径为 ./SomeModule 的模块中按名称导入的具名导出。
导出
可以使用 export 语句来导出组件、函数、变量等。语法如下：
export default SomeComponent;
export { SomeFunction, SomeVariable };
在上面的示例中，SomeComponent 是默认导出的组件。SomeFunction 和 SomeVariable 是按名称导出的具名导出。
以下是一个完整的示例，演示了如何在 React 中导入和导出组件：
MyComponent.js：
import React from "react";
const MyComponent = () => {
return <h1>Hello, World!</h1>;
};
export default MyComponent;
App.js：
import React from "react";
import MyComponent from "./MyComponent";
const App = () => {
return (
<div>
<h1>My App</h1>
<MyComponent />
</div>
);
};
export default App;
在上面的示例中，MyComponent.js 导出了一个默认组件 MyComponent，然后在 App.js 中通过 import 语句将其导入并使用在 App 组件中。
最后修改于 2023-08-26