浅析 React

React 是一个用于构建用户界面的 JavaScript 库

一、如何引入 React

01.从 CDN 引入 React

引入 React
    <script src="https://cdn.bootcdn.net/ajax/libs/react/
        18.0.0-alpha-6f3fcbd6f-20210730/umd/react.development.min.js">
    </script>

引入 React DOM
    <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 关键字 

02.通过 webpack 引入 React

import...from...

yarn add react create-dom

import React from 'react'

import ReactDOM from 'react-dom'

03.使用 create-react-app 引入 React

npx create-react-app my-app
cd my-app
npm start

///

yarn global add craete-react-app
create-react-app my-app
cd my-app
yarn start

// yarn 如果报错可以全局删除后使用 npx 引入

二、React 元素和函数组件

React 元素

createElement 的返回值 element 可以代表一个 div

但 element 不是一个真正的 div（DOM 对象）

所以我们一般称 element 为虚拟 DOM 对象

() => React 元素

返回 element 的函数，也可以代表一个 div

这个函数可以多次执行，每次得到最新的虚拟 div

React 会对比两个虚拟 div，找出不同，局部更新视图

找不同的算法叫做 DOM diff 算法

三、JSX

X 表示扩展，JSX 就是 JS 的扩展版

使用 JSX

• 方法一：CDN
• 方法二：webpack + babel-loader
• 方法三：create-react-app

使用 JSX 的注意事项

注意 className 

<div className="red">n<div> 被转译为 React.createElement('div',{className:'red'},"n")

插入变量

标签里面的所有 JS 代码都要用 {} 包起来

如果需要变量 n，{n}

如果需要对象 {name:'simpson'}, {{name:'simpson'}}

习惯 return 后面加 ()

*本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源