### 彪哥

爱好前端

- 核心概念

  - JSX简介
  - 元素渲染
    - 将一个元素渲染为 DOM
    - 更新已渲染的元素
    - React 只更新它需要更新的部分
  - 组件&Props
  - State&生命周期
  - 事件处理
  - 条件渲染
  - 列表&Key
  - 表单
  - 状态提升 (共享状态)
  - 组合vs继承
  - React哲学

- 高级指引

- Hook

- 案例演示

- 《React》笔记
- 核心概念

heBody
2021-03-24
目录

# 元素渲染

# # 02. 元素渲染

元素是构成 React 应用的最小砖块，描述了你在屏幕上想看到的内容。

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

1

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

## # 将一个元素渲染为 DOM

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

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

1

根节点，React应用只有单一根DOM节点

> 但一个html页面可以有多个React应用，每个应用对应一个独立根节点。

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

1
2

## # 更新已渲染的元素

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

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

考虑一个计时器的例子：

    function tick() {
      // element是一个React元素
      const element = (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
      );
      ReactDOM.render(element, document.getElementById('root'));}

    setInterval(tick, 1000);

1
2
3
4
5
6
7
8
9
10
11

注意：在实践中，大多数 React 应用只会调用一次 `ReactDOM.render()`
(opens new window)。在下一个章节，我们将学习如何将这些代码封装到**有状态组件
(opens new window)**中。

## # React 只更新它需要更新的部分

上个例子中，尽管每一秒我们都会新建一个描述整个 UI 树的元素，但React DOM 只会更新实际改变了的内容。

编辑
(opens new window)
#React
上次更新: 2022/12/14, 19:36:42
JSX简介
组件&Props

← JSX简介 组件&Props→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式