React创建

最新推荐文章于 2024-04-10 23:39:31 发布

lucky_full

最新推荐文章于 2024-04-10 23:39:31 发布

阅读量187

点赞数

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

本文链接：https://blog.csdn.net/weixin_44530344/article/details/126710976

版权

React 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章目录

前言
一、体验React

前言

从本章开始介绍React

一、体验React

我们首先从引入React核心库开始

1.引入库

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HELLO WORLD</title>
    <!--    引入react核心库-->
    <script src="./script/react.development.js"></script>
    <script src="./script/react-dom.development.js"></script>
</head>

2.使用React内置API

1.React.createElement()

用来创建一个React元素
参数：
1.元素的名称（html标签必须小写）
2.标签中的属性

class属性需要使用className来设置
在设置事件时，属性名需要修改为驼峰命名法
元素的内容（子元素）
注意点：
React元素最终会通过虚拟DOM转换为真实的DOM元素
React元素一旦创建就无法修改，只能通过新创建的元素进行替换
代码如下（示例）：

const button = React.createElement('button',{
    type:'button',
    className:'hello',
    onClick:()=>{
      alert('点击了')
    }
  },'点我')

2. ReactDOM.createRoot()

获取根元素根元素就是React元素要插入的位置
代码如下（示例）：

const root = ReactDOM.createRoot(document.getElementById('root'));

修改React元素后，必须重新对根元素进行渲染
当调用render渲染页面时，React会自动比较两次渲染的元素，只在真实DOM中更新发生变化的部分没发生变化的保持不变

3. render()

将元素在根元素中显示
代码如下（示例）：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(div);

用来将React元素渲染到根元素中
根元素中所有的内容都会被删除，被React元素所替换
当重复调用render()时，React会将两次的渲染结果进行比较，
它会确保只修改那些发生变化的元素，对DOM做最少的修改

4. 结合使用

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HELLO WORLD</title>
    <!--    引入react核心库-->
    <script src="./script/react.development.js"></script>
    <script src="./script/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
    // 创建一个React元素
    const div = React.createElement('div',{},'React')
    // 获取根元素对应的react元素
    const root = ReactDOM.createRoot(document.getElementById('root'))
    // 将div渲染到根元素中
    root.render(div)
</script>
</body>
</html>