项目中一直使用的是Vue,最近准别去了解了解React,为什么学习呢,因为他也是前端开发很流行的框架,很多公司很多项目在用的框架,扩展自己的技术栈也是今年的目标之一,而且自从经历今年疫情的隔离等,长时间不学习真的会知识焦虑,所以准备向React下手。
官网
React 是什么
一句话 React 是 JavaScript 库 ,再详细点就是 用于构建用户界面的 JavaScript 库 ,这是官网最精简的介绍,我的理解是他是JS 库 ,那么JS能干什么他就能干什么,只是有自己的语法,自己的优势,为什么会封装成库,肯定是为了给开发者的福利,让开发实现起来更简单,代码跑起来效率更高,当时使用 jquery 的时候,是不是感觉简化了很多代码,没错React 会有更多的进步。
JSX
JSX 是 React 的装备,但不是必须品,它是JavaScript 的 扩展语法,可以同时包含UI 标签和 JS 逻辑,最终还是会转化成JS 标准DOM 执行,官网有介绍,刚开始熟悉,这种语法还不太了解,只是把UI 和 逻辑放在一块真的有点不习惯。
const vDom = <h1>Hello,world</h1>
上面这行代码就是JSX 语法,变量 vDom 不是一个字符串也不是我们下载模板中的标签,具体什么样来看看
const vDom = <h1>Hello,world</h1>
const root = document.getElementById('root')
debugger
debugger 之后 可以分别看下虚拟DOM 和 真实的DOM 都有哪些区别,会稍微有点明白为什么用虚拟dom ,之后再统一修改真实DOM ,其实虚拟DOM 相比较起来真的比较轻量级。
依赖库
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
以上都是开发环境使用的形式,线上环境往往使用的是压缩的.min 文件
react.js :react 的核心库
react-dom.js:提供以DOM 相关的功能
babel.min.js :可以将ES6 语法转换为ES5 语法,也可以对JSX提供支持
核心步骤
创建虚拟DOM ===》渲染虚拟DOM
HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ReactDemo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 创建虚拟DOM
const vDom = <h1>Hello,world</h1>
const root = document.getElementById('root')
ReactDOM.render(vDom,root)
// ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'))
</script>
</body>
</html>
以上不是实现什么功能,而是把React 大体是个什么东西,能怎么做事情,有哪些依赖分享给大家,后续会继续深入学习,目标是敲一个像样的项目。