react学习笔记_02-元素渲染

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

banhuan5088

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

阅读量100

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/xsxqc/p/11395673.html

版权

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

上面的内容代表react中的一个元素，元素是构成 React 应用的最小砖块。

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

1.如何将一个元素渲染为 DOM？

假设你的 HTML 文件某处有一个 <div>如下：

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

我们将其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。仅使用 React 构建的应用通常只有单一的根 DOM 节点。

如果你在将 React 集成进一个已有应用，那么你可以在应用中包含任意多的独立根 DOM 节点。

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()；(上一章节我们已经这么进行了)

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

2.更新已渲染的元素

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

案例：计时器的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
    <script type="text/babel">

        function tick(){
            const element = (
                <div>
                    <h1>下午好</h1>
                    <h2>现在是,{new Date().toLocaleTimeString()}</h2>
                </div>
            )
            ReactDOM.render(
                element,
                document.getElementById('tick')
            );
        }
        setInterval(tick,1000);
    </script>
    <div id="tick">

    </div>
</body>
</html>

注意：

在实践中，大多数 React 应用只会调用一次 ReactDOM.render()；

3.React 只更新它需要更新的部分：

React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。可以用开发者工具查看计时器案例的更新状态。尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，

转载于:https://www.cnblogs.com/xsxqc/p/11395673.html