Keys's stuff Keys's stuff
首页
  • JavaScript
  • CSS
  • 技术文档
  • GitHub
  • Nodejs
  • NPM
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
  • 常用工具 (opens new window)
  • 索引

    • 分类
    • 标签
    • 归档
  • 网站工具参考
  • 常用类库组件
  • HTML参考手册 (opens new window)
  • 后端博客参考 (opens new window)
  • ChatGPT入门介绍 (opens new window)
  • JavaScript 教程 (opens new window)
  • ES6教程 (opens new window)
  • VUE (opens new window)
  • GIT (opens new window)
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • TypeScript
    • JS设计模式总结
关于
GitHub (opens new window)

Keys Xu

音乐的力量
首页
  • JavaScript
  • CSS
  • 技术文档
  • GitHub
  • Nodejs
  • NPM
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
  • 常用工具 (opens new window)
  • 索引

    • 分类
    • 标签
    • 归档
  • 网站工具参考
  • 常用类库组件
  • HTML参考手册 (opens new window)
  • 后端博客参考 (opens new window)
  • ChatGPT入门介绍 (opens new window)
  • JavaScript 教程 (opens new window)
  • ES6教程 (opens new window)
  • VUE (opens new window)
  • GIT (opens new window)
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • TypeScript
    • JS设计模式总结
关于
GitHub (opens new window)
  • Vue》笔记

  • TypeScript 从零实现 axios》

  • React》笔记

    • 核心概念

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

    • Hook

    • 案例演示

  • Git》学习笔记

  • 学习笔记

  • oldNote
  • React》笔记
  • 核心概念
keys
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/02/22, 09:46:22
JSX简介
组件&Props

← JSX简介 组件&Props→

最近更新
01
2023工作展望xx
02-13
02
2023工作展望
02-13
03
程序员技术指南
01-18
更多文章>
Theme by Vdoing | Copyright © 2019-2023 Keys Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式