js框架----react.js 1

最新推荐文章于 2024-09-28 07:49:03 发布

laufing

最新推荐文章于 2024-09-28 07:49:03 发布

阅读量147

点赞数

分类专栏：前端js 文章标签： react.js 使用案例

本文链接：https://blog.csdn.net/weixin_45228198/article/details/120381327

版权

前端js 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

具体使用案例

核心库
案例：动态显示数据列表
- js表达式与语句
- 实现

核心库

下载

官网
点击‘GitHub’–>整体包的下载

历史版本

浏览器开发下载如下：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

也可以使用python脚本先获取三个js库

import requests

url = "https://unpkg.com/react@16.14.0/umd/react.development.js"
url1 = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"
url2 = "https://unpkg.com/babel-standalone@6.15.0/babel.min.js"

urls = [url,url1,url2]
headers = {"User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36"}
for i in urls:
    res = requests.get(i,headers=headers)
    filename = i.split("/")[-1]
    with open(filename,"wb") as f:
        f.write(res.content)

导入核心库

<script type="text/javascript" src="/js/react.development.js"><!--全局使用React-->
<script type="text/javascript" src="/js/react-dom.development.js"><!--全局使用ReactDOM-->
<script type="text/javascript" src="js/babel.min.js"><!--babel实现jsx到js的转换-->

以上三个核心库，需要按照顺序导入

使用案例

创建一个文件夹
reactProject>js目录
reactProject>pages目录
pages>helloReact.html

hellpReact.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react project</title>
</head>
<body>
    <!-- 导入核心库 16.14-->

    <!-- 全局使用React -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 全局使用ReactDOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- jsx到js的转换 -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- 创建一个容器  渲染虚拟DOM为真实DOM-->
    <div id="content"></div>

    <!-- 创建虚拟DOM -->
    <script type="text/babel">
        // 声明常量
        const  VDOM = <div>hello React,this is my first reactProject!</div>

        //渲染虚拟DOM，如下格式固定
        ReactDOM.render(VDOM,document.getElementById("content"))
    </script>
</body>
</html>

在vscode运行页面
右键–>open with Live Server
没有则需要安装live server插件

以上代码需在开发环境中运行，生成环境还需编译

使用js创建虚拟DOM

<script type="text/javascript">
	const VDOM = React.createElement("div",{id:"block1"},"content")
	//多层标签嵌套
	const VDOM1 = React.createElement("div",{id:"block2"},React.createElement("div",{id:"block3"},React.createElement("div",{id:"block4"},"多层嵌套")))
	console.log(VDOM)
	console.log(document.getElementById("content"))//真实DOM
	console.log(typeof   VDOM)//Object对象 instanceOf Object
	//VDOM 普通的Object对象
	//VDOM 是轻量级、真实DOM是重量级的
	//VDOM最终被React转为 真实的DOM
</script>

当多层次DOM节点嵌套时，使用js创建DOM节点相当繁琐，所以使用jsx创建虚拟DOM，简化

jsx

javascript + xml
是react定义的类似xml的js扩展语法
本质：React.createElement(component,props,content)
作用：简化创建虚拟DOM

const VDOM = <div id="content">this is content container</div>

不是字符串，不同于js
标签不是html/xml，但可以转为html
小写的标签，会自动转为html对应的标签，但是如果html不存在对应的标签，报错
大写首字母，自动渲染React组件，若组件没有定义则报错
涉及js变量时，使用{ myId }，类名属性使用className=“bg”
内联的style = {{color:“red”,}}，内部只能有一个根节点，且每个节点必须闭合
示例

<script type="text/babel">
	var myId = 20
	const VDOM = (
		<div>
			<h1 className="title" id={myId}>
				<span style={{color:"white"}}>{myData}</span>
			</h1>
			<input type="text" />
			<hello>hello</hello>
			<Hello>Component</Hello>
		</div>
	)
</script>

案例：动态显示数据列表

jack-18
tom-20
lucy-40
…
ajax向后端发送请求，拿到数据，处理数据，创建虚拟DOM，呈现页面

js表达式与语句

表达式，有返回值
如：a，a+b , arr.map(e=>{return e+1})，func()，function test(){}…
语句，没有返回值
if(){}
for(){}
switch(){}

VDOM中只能写 {js表达式}，给一个数组，可以遍历，但是对象不行。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic data</title>
</head>
<body>
    <!-- import kernel lib  -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- create container -->
    <ul id="list"></ul>

    <script type="text/babel">
        // let arr = [{name:"jack",age:"18"},{name:"tom",age:"20"},{name:"lucy",age:"40"}]
        let arr = ["jack","tom","lucy"] //虚拟DOM中给数组，可以遍历，对象不行
        const VDOM = (
            arr.map((element,index)=>{
                return <li key={index}>{element}</li>
            })
        )
        // render VDOM
        ReactDOM.render(VDOM,document.getElementById("list"))
    </script>
</body>
</html>