React的渲染element(做最少的DOM操作)

简介: Rendering ElementsAn element describes what you want to see on the screen.原则:尽可能少的操作DOM如下面react官网的例子就是很好的说明:

React的渲染element(做最少的DOM操作)



Rendering Elements


An element describes what you want to see on the screen.

原则:尽可能少的操作DOM


如下面react官网的例子就是很好的说明:


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);


ven though we create an element describing the whole UI tree on every tick, only the text node whose contents have changed gets updated by React DOM.


20200428100153570.gif

目录
相关文章
|
25天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
7天前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
8 2
|
7天前
|
JavaScript 前端开发 开发者
DOM操作
【6月更文挑战第30天】DOM操作
10 1
|
10天前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
16 1
|
12天前
|
JavaScript 前端开发
Vue的`v-if`和`v-show`用于条件渲染,`v-if`按需编译/销毁DOM,适合不频繁切换且节省初始化资源
【6月更文挑战第25天】Vue的`v-if`和`v-show`用于条件渲染,`v-if`按需编译/销毁DOM,适合不频繁切换且节省初始化资源;`v-show`则始终编译,仅通过CSS切换显示,适合频繁切换,初始渲染成本高但切换性能好。选择取决于元素显示状态的变化频率和初始渲染需求。
17 2
|
1天前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
5 0
|
1天前
|
JavaScript
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
4 0
|
1天前
|
网络架构
react18【系列实用教程】react-router-dom —— 路由管理 (2024最新版)
react18【系列实用教程】react-router-dom —— 路由管理 (2024最新版)
7 0
|
25天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
17 2
|
11天前
|
JSON JavaScript 数据格式
技术好文:tabel表格的dom操作
技术好文:tabel表格的dom操作