再仔细读读react18官方文档吧 20220526
首页
官方中文文档首页: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 只会更新实际改变了的内容。