再仔细读读react18官方文档吧 20220526

最新推荐文章于 2024-05-16 21:41:27 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-05-16 21:41:27 发布

阅读量753

点赞数

分类专栏： react 文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/tuzi007a/article/details/124987564

版权

react 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

再仔细读读react18官方文档吧 20220526

首页
- 什么是react
开始
- 体验react
- - 在html中如何使用react和jsx？
核心概念

首页

官方中文文档首页：https://react.docschina.org/

当前安装的react版本，以及react官方文档，都默认是react18版本了。

什么是react

react是用于构建用户界面的 JavaScript 库。

特点

声明式

组件化

一次学习，随处编写

开始

体验react

在html中如何使用react和jsx？

<!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>Document</title>
</head>
<body>
	<div id="root"></div>
	<!-- 开发模式下用development版本 -->
	<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
	<!-- 部署到线上时，用production版本 -->
	<!-- <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script> -->
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
		// console.log(React)
		// console.log(ReactDOM)
		function Demo() {
			return <div>23333</div>
		}
		ReactDOM.render(
			<Demo />,
			document.querySelector('#root')
		)
	</script>
</body>
</html>

用浏览器打开html，可以看到渲染结果：

在这里插入图片描述
此时，打开控制台，可以看到这样一条warning：

You are using the in-browser Babel transformer. Be sure to precompile your scripts for production

这是在提醒我们：网页中实时将ES6代码转为ES5，对性能会有影响。生产环境需要加载已经完成转码的脚本

如果我们还没有安装脚手架，而只是做个简单的测试，此时就可以在html中做简单的验证了。

核心概念

Hello World

所有的语言，都是从hello world开始。 react也不例外。

<!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>Document</title>
</head>
<body>
	<div id="root"></div>
	<!-- 开发模式下用development版本 -->
	<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
		ReactDOM.render(
			<h1>hello world ! </h1>,
			document.querySelector('#root')
		)
	</script>
</body>
</html>

页面渲染出来了：

在这里插入图片描述

但是，注意看控制台有个报错：Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

也就是说，react18不支持ReactDOM.render方法了。

react18不支持ReactDOM.render方法了

而是改用ReactDOM.createRoot方法了

官方文档：https://react.docschina.org/docs/react-dom-client.html#createroot

上面的hello world示例，在react18中应该这样写：

<!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>Document</title>
</head>
<body>
	<div id="root"></div>
	<!-- 开发模式下用development版本 -->
	<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
		const wrap = document.querySelector('#root')
		const root = ReactDOM.createRoot(wrap)
		root.render(
			<h1>hello world ! </h1>
		)
	</script>
</body>
</html>

了解一下createRoot相关知识：

https://cloud.tencent.com/developer/article/1875604

JSX简介

JSX是什么？

是一个 JavaScript 的语法扩展。

为什么使用 JSX？

官方解释是这样的：

在这里插入图片描述

我表示看不懂是啥意思。

我只知道，

写jsx就像写html，并且在里面可以使用js语法，大大的提升开发效率。

而且，相对于React.createElement方法来说，更简洁直观，更利于后期维护。

jsx更安全，因为所有的内容在渲染之前都被转换成了字符串，用户输入的内容会被转义。

元素渲染

元素是构成 React 应用的最小砖块。

const element = <h1>Hello, world</h1>

注意，这里和组件区分一下哦。

根节点

一般来说，根节点只有一个。但是，如果需要，也可以有多个根节点。

<!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>Document</title>
</head>
<body>
	<div id="root1"></div>
	<div id="root2"></div>
	<!-- 开发模式下用development版本 -->
	<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
		const wrap1 = document.querySelector('#root1')
		const root1 = ReactDOM.createRoot(wrap1)
		root1.render(
			<h1>hello world ! </h1>
		)
		const wrap2 = document.querySelector('#root2')
		const root2 = ReactDOM.createRoot(wrap2)
		root2.render(
			<h1>这是第二个根节点中的内容</h1>
		)
	</script>
</body>
</html>

渲染结果：

在这里插入图片描述

React 只更新它需要更新的部分，React DOM 只会更新实际改变了的内容。

新生代农民工官方认证码农小拽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
再仔细读读react18官方文档吧 20220526

再仔细读读react18官方文档吧 20220526首页什么是react开始体验react在html中如何使用react和jsx？核心概念Hello Worldreact18不支持ReactDOM.render方法了JSX简介JSX是什么？为什么使用 JSX？元素渲染根节点首页官方中文文档首页：https://react.docschina.org/当前安装的react版本，以及react官方文档，都默认是react18版本了。什么是reactreact是用于构建用户界面的 JavaScrip
复制链接

扫一扫