元素渲染 (精读React官方文档—03)

简介: 元素渲染 (精读React官方文档—03)

这是我参与更文挑战的第16天,活动详情查看:更文挑战

元素是什么?

官方描述:元素是构成 React 应用的最小砖块。元素描述了你在屏幕上想看到的内容。与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

解读

  • React元素的本质是对象。
  • React DOM会负责将这个对象更新到DOM中,来和React元素保持一致。
  • 组件和元素是不同的,组件是由元素组成的。

元素举例

const element = <h1>Hello, world</h1>;
复制代码

将一个元素渲染为DOM

  • 一般情况下React构建的应用通常只有一个根节点。

通过ReactDOM.render将React元素渲染到根DOM节点

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

更新已渲染的元素

官方描述:React 元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的单帧:它代表了某个特定时刻的 UI。根据我们已有的知识,更新 UI 唯一的方式是创建一个全新的元素,并将其传入 ReactDOM.render()。

解读

在React中要想更新UI必须调用render。

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

官方描述:React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。

解读

React在更新的时候,不会全部更新,只会更新不同的地方,这是一种通俗的说法,也就是React在更新的时候,会调用Diff算法,关于这个算法的详细描述,后面我会出专门的专栏进行讲解。

例子

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);
复制代码

DOM结构

image.png

欢迎关注专栏中的其他内容,非常适合碎片化学习。

相关文章
|
2月前
|
前端开发 JavaScript
React如何进行条件渲染
React如何进行条件渲染
19 0
|
16天前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
21 0
|
2月前
|
前端开发 JavaScript 算法
React渲染流程
应用的性能和灵活性,以后可以具体看一 Fiber 的工作原理。
24 3
|
1月前
|
前端开发 JavaScript
REACT 条件渲染
REACT 条件渲染
|
2月前
|
存储 前端开发 JavaScript
在回调函数中重新渲染React组件
在React中,重新渲染组件可通过`forceUpdate()`或`ReactDOM.render()`实现。方法一是使用`forceUpdate`强制无状态组件更新;方法二是通过重新创建根组件实例适用于有状态组件。这些示例基于Webpack和Babel的模块热替换配置。根据项目需求和React版本,还可以结合React-Router或Redux等库选择合适的方法。
|
2月前
|
存储 JSON 资源调度
next.js博客搭建_react-markdown渲染内容(第三步)
next.js博客搭建_react-markdown渲染内容(第三步)
35 1
|
2月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
2月前
|
前端开发 JavaScript
React中渲染html结构---dangerouslySetInnerHTML
React中渲染html结构---dangerouslySetInnerHTML
33 0
|
2月前
|
JavaScript 前端开发
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
59 0

热门文章

最新文章