在页面中使用React及render的注意事项

Hdueh182

已于 2022-09-14 14:34:30 修改

阅读量678

点赞数 1

文章标签： react.js javascript 前端

于 2022-09-13 21:54:36 首次发布

本文链接：https://blog.csdn.net/weixin_62425915/article/details/126842296

版权

1.React的特点

高性能：虚拟DOM(Virtual DOM)配合 diff 算法，最大限度地减少与 DOM 的交互。

声明式：React采用声明式编码UI，可以轻松实现交互式UI，让代码更加可行且方便调试。

组件化：通过 React 构建组件，使得代码更加容易得到复用，能够高效率的应用在大项目的开发中。

单向响应的数据流：React 中的数据是单向自顶向下传递的，父组件数据的更新会自动传递到子组件，但子组件的数据更新不会影响到父组件，也不能在子组件修改父组件传入的数据

JSX扩展：JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但官网建议使用它。

灵活：React可以与已知的库或框架很好的进行配合。

2.在页面中使用React

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--    1.引入react核心库文件-->
    <script src="../lib/react.development.js"></script>
    <!--    2.引入react-DOM用于操作DOM,
            react-DOM依赖于react核心库,所以必须在其后面引入
    -->
    <script src="../lib/react-dom.development.js"></script>
</head>
<body>
<!--3.创建React的根元素(DOM节点),也被成为react的根容器,后续的ReactDOM操作都在其中完成-->
<div id="root"></div>

<script>
    /*
     * 4.需要通过ReactDOM.createRoot()来创建React的根容器
     *  ReactDOM来自于react-dom.development.js
     *  createRoot()接收一个DOM元素,可以将这个元素作为React的根容器
     * **/
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    // root是创建好的根容器，该容器是一个对象，可以通过该对象提供的render方法，呈现指定的内容
    // render方法接收的内容既是放在容器中的内容
    root.render('你现在过的怎么样')
</script>
</body>
</html>

3.render的注意事项

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<div class="my"></div>

<script>
    {
        // react挂载位置,在同一个页面中可以挂载多个
        // 1.将指定内容渲染到指定位置
        // const root1 = ReactDOM.createRoot(document.querySelector('#root')) // 指定挂载位置
        // root1.render("我是挂载到ID为root")
        //
        // const root2 = ReactDOM.createRoot(document.querySelector('.my')) // 指定挂载位置
        // root2.render("我是挂载到类名为my")
    }
    {
        // render可以调用多次,最后一次指定的内容会把上一次的覆盖
        // const root1 = ReactDOM.createRoot(document.querySelector('#root')) // 指定挂载位置
        // root1.render("我是挂载到ID为root")
        // root1.render("我是挂载到ID为root,我会把前面的覆盖")
    }
    {
        // 同一个DOM元素,只能被ReactDOM.createRoot()指定一次,否则会出现警告
        // const root1 = ReactDOM.createRoot(document.querySelector('#root')) // 指定挂载位置
        // root1.render("我是挂载到ID为root1")
        // const root2 = ReactDOM.createRoot(document.querySelector('#root')) // 指定挂载位置
        // root2.render("我是挂载到ID为root2")
    }
    {
        // 不要将body和html作为挂载的位置
        // 1-不要将body作为React容器,因为body的子项经常被第三方脚本和浏览器插件使用
        // const root = ReactDOM.createRoot(document.body)
        // root.render("body作为挂载容器")

        // 1-不要将html作为React容器,这样会覆盖其他项
        // const root1 = ReactDOM.createRoot(document.documentElement)
        // root1.render("html作为挂载容器")
    }
    {
        // 如果指定的字符串中包含HTML标签,浏览器不会识别
        const root = ReactDOM.createRoot(document.querySelector('#root'))
        root.render('<H1>我现在很好！</H1>')
    }
</script>
</body>
</html>