【React】元素渲染

最新推荐文章于 2024-06-21 00:11:24 发布

ZhShy23

最新推荐文章于 2024-06-21 00:11:24 发布

阅读量493

点赞数

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

本文链接：https://blog.csdn.net/weixin_43651049/article/details/123045215

版权

React 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

文章目录

将一个元素渲染为DOM
更新已渲染元素
React只更新它需要更新的部分

将一个元素渲染为DOM

假设HTML文件中有一个<div>

<div id="root"></div>

将其称作“根”DOM节点，因为该节点内所有内容都将由ReactDOM管理。
仅使用React构建的应用通常只有单一的根DOM节点。如果将React集成进一个已有应用，那么可以在应用中包含任意多的独立根DOM节点。

想要将一个React元素渲染到跟DOM节点中，只需要一起传入ReactDOM.render():

    const element = <h1>Hello, world!</h1>;
    ReactDOM.render(
        element,
        document.getElementById('root')
    );

更新已渲染元素

React元素是不可变对象，一旦被创建就无法更改它的子元素或者属性。
更新UI的唯一方式是创建一个全新的元素，将其传入ReactDOM.render()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    function tick() {
        const element = (
            <div>
                <h1>Hello world!</h1>
                <h2>It is {new Date().toLocaleTimeString()}.</h2>
            </div>
        );
        ReactDOM.render(element, document.getElementById('root'));
    }

    setInterval(tick, 1000);
</script>
</body>
</html>