如何引入React
从 CDN 引入 React（不推荐）
bootcdn 引入例子：
<script src="https://cdn.bootcdn.net/ajax/libs/react/18.0.0-alpha-6f3fcbd6f-20210730/umd/react.development.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.0.0-alpha-6f3fcbd6f-20210730/umd/react-dom.development.min.js"></script>
cjs 和 umd 的区别
- cjs 全称 CommonJS，是 Node.js 支持的模块规范
- umd 是统一模块定义，兼容各种模块规范（含浏览器）
- 理论上优先使用 umd，同时支持 Node.js 和 浏览器
- 最新的模块规范是使用 import 和 export 关键字
通过 webpack 引入 React
import ... from ...
- yarn add react react-dom
- import React from 'react'
- import ReactDOM from 'react-dom'
- 注意大小写，尽量保持一致
其他
- 除 webpack 外，rollup、parcel 也支持上面写法
create-react-app
npx create-react-app my-project
// 或
yarn global add create-react-app
cd my-app
npm start
React 元素
- createElement 的返回值 element 可以代表一个 div
- 但 element 并不是真正的 div（DOM 对象）
- 所以我们一般称 element 为
虚拟 DOM 对象
()=> React 元素
- 返回 element 的函数，也可以代表一个 div
- 这个函数可以
多次执行，每次得到最新的虚拟 div
- React 会对比两个虚拟 div，找出不同，局部更新视图
- DOM Diff 算法，找出不同
