本文共 1494 字，大约阅读时间需要 4 分钟。

如何引入React

React 是一个流行的 JavaScript 框架，用于构建用户界面。引入 React 的方法主要有两种：通过 CDN 或者通过 webpack/rollup 配置项目。

CDN 引入

使用 CDN 引入 React 和 React DOM，可以通过以下步骤：

项目默认可以使用 parcel 运行

create-react-app 是一个好用的工具，可以快速初始化一个 React 项目。安装方式如下：

yarn global add create-react-app

在 Windows 上可能会有兼容性问题，建议使用 npx：

npx create-react-app my-app

使用 React 创建一个简单的应用

以下是通过 CDN 引入 React 创建一个简单应用的示例：

// 检查 React 是否正确加载console.log(window.React);// 创建 React 元素console.log(window.React.createElement);// 检查 ReactDOM 是否正确加载console.log(window.ReactDOM);// 渲染 React 元素console.log(window.ReactDOM.render);

React 模块规范

React 项目中，模块规范的选择非常重要。umd 模块规范是现代推荐的选择，因为它兼容 Node.js 和浏览器环境。以下是如何使用 umd 模块规范：

// 例如，一个简单的模块export const App = () => {  return 
   
    Hello World
   
;};

2. 在 webpack 或 rollup 配置中正确配置模块路径。

如何正确引入 React

对于开发者来说，使用 create-react-app 是最简单的方法。以下是详细的步骤：

3. 全局安装 create-react-app：

yarn global add create-react-app

2. 初始化项目：

create-react-app my-appcd my-appyyarn start

React 的延迟执行

React 的核心思想之一是延迟执行。以下是通过函数和延迟执行的示例：

// 非函数形式let b = 1 + a;// 函数形式let f = () => 1 + a;let b = f();

函数形式会在调用时才执行表达式，而不是立即执行，这使得代码更灵活。

React 元素与函数组件

React 元素和函数组件的主要区别在于执行时机。以下是对比：

• 元素：

const App1 = React.createElement('div', null, n);

• 函数组件：

const App2 = () => React.createElement('div', null, n);

函数组件会在被调用时才执行代码，这使得代码更加灵活。

React 的小结

3. React 元素是 createElement 返回的对象，称为虚拟 DOM。
4. 函数组件是通过函数返回元素，支持多次渲染。
5. React 会比较虚拟 DOM，找出差异并进行局部更新。
6. DOM Diff 算法是 React 的核心优化技术。

通过以上内容，可以更好地理解 React 的基础知识和使用方法。

转载地址：http://ikdhz.baihongyu.com/