详解React 元素渲染

2024-10-01 21:20:33

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。

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

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。

将元素渲染到 DOM 中

首先我们在一个 HTML 页面中添加一个 id="example" 的 <div>:

<div id="example"></div>

在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称为 "根" DOM 节点。

我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

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

更新元素渲染

React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。

目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：

来看一下这个计时器的例子:

function tick() {
 const element = (
  <div>
   <h1>Hello, world!</h1>
   <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
  </div>
 );
 ReactDOM.render(
  element,
  document.getElementById('example')
 );
}

setInterval(tick, 1000);

运行结果

以上实例通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()。

我们可以将要展示的部分封装起来，以下实例用一个函数来表示：

function Clock(props) {
 return (
  <div>
   <h1>Hello, world!</h1>
   <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
  </div>
 );
}

function tick() {
 ReactDOM.render(
  <Clock date={new Date()} />,
  document.getElementById('example')
 );
}

setInterval(tick, 1000);

除了函数外我们还可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替换 props：

class Clock extends React.Component {
 render() {
  return (
   <div>
    <h1>Hello, world!</h1>
    <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
   </div>
  );
 }
}

function tick() {
 ReactDOM.render(
  <Clock date={new Date()} />,
  document.getElementById('example')
 );
}

setInterval(tick, 1000);

以上就是详解React 元素渲染的详细内容，更多关于React 元素渲染的资料请关注我们其它相关文章！

浅谈React中的元素、组件、实例和节点

React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 中的元素.组件.实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念.现在,老干部就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字.刨根问底的同学(老干部就是其中一员)的好奇心. 元素 (Element) React 元素其实就是一个简单JavaScript对象,一个React 元素
详解React+Koa实现服务端渲染(SSR)

React是目前前端社区最流行的UI库之一,它的基于组件化的开发方式极大地提升了前端开发体验,React通过拆分一个大的应用至一个个小的组件,来使得我们的代码更加的可被重用,以及获得更好的可维护性,等等还有其他很多的优点... 通过React, 我们通常会开发一个单页应用(SPA),单页应用在浏览器端会比传统的网页有更好的用户体验,浏览器一般会拿到一个body为空的html,然后加载script指定的js, 当所有js加载完毕后,开始执行js, 最后再渲染到dom中, 在这个过程中,一般用户只能
简单的React SSR服务器渲染实现

为什么要SSR 单页应用将UI层和内容都由javascript来渲染,搜索引擎或网页爬虫需要完成的HTML结构,因此单页应用如果只在客户端渲染,不利于SEO,此外尽管我们可以通过按需加载的形式来减少首页加载的js,但是通过js来渲染DOM的时候还是会有一定的时间延迟. 0.前言服务端渲染在项目中不是刚需的东西,但有的时候也是需要做一个服务端渲染,项目要做服务端渲染当然是有很多好处的首屏加载快,相比SPA单页应用还要有优势. SEO 优化利于爬虫,爬取数据. 1. 简介服务端渲染是指页面的
Next.js实现react服务器端渲染的方法示例

说明实现路由跳转.redux 文件版本 "next": "^4.2.3", "react": "^16.2.0", "react-dom": "^16.2.0" Next.js GitHub 文档项目源码使用 Next.js 使用文件体统作为API,可以自动进行服务器端渲染和代码分割 1. 安装 yarn add next react react-dom 2. package.j
详解React 服务端渲染方案完美的解决方案

最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务器端渲染使用 React 构建客户端应用程序,默认情况下,可以在浏览器中输出 React 组件,进行生成 DOM 和操作 DOM.React 也可以在服务端通过 Node.js 转换成 HTML,直接在浏览器端"呈现"处理好的 HTML 字符串,这个过程可以被认为 "同构&qu
利用React Router4实现的服务端直出渲染(SSR)

我们已经熟悉React 服务端渲染(SSR)的基本步骤,现在让我们更进一步利用 React RouterV4 实现客户端和服务端的同构.毕竟大多数的应用都需要用到web前端路由器,所以要让SSR能够正常的运行,了解路由器的设置是十分有必要的基本步骤路由器配置前言已经简单的介绍了React SSR,首先我们需要添加ReactRouter4到我们的项目中 $ yarn add react-router-dom # or, using npm $ npm install react-router
详解React 元素渲染

元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容. const element = <h1>Hello, world!</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致. 将元素渲染到 DOM 中首先我们在一个 HTML 页面中添加一个 id="example" 的 <div>: <div id="
详解React 条件渲染

在 React 中,你可以创建不同的组件来封装各种你需要的行为.然后还可以根据应用的状态变化只渲染其中的一部分. React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 先来看两个组件: function UserGreeting(props) { return <h1>欢迎回来!</h1>; } function GuestGreeting(props)
详解React项目的服务端渲染改造(koa2+webpack3.11)

因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要
详解React的回调渲染模式

一.一个简单的小例子 1.父组件 <Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : <Badge info={user} />} </Twitter> 2.子组件框架 import React, { Component, PropTypes } from 'react' import fetchUser from 'twitter' // fetc
详解React 16 中的异常处理

详解React 16 中的异常处理异常处理在 React 15.x 及之前的版本中,组件内的异常有可能会影响到 React 的内部状态,进而导致下一轮渲染时出现未知错误.这些组件内的异常往往也是由应用代码本身抛出,在之前版本的 React 更多的是交托给了开发者处理,而没有提供较好地组件内优雅处理这些异常的方式.在 React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃:未被任何异常边界捕获的异常可能会导致
详解React中共享组件逻辑的三种方式

废话少说,这三种方式分别是:render props.高阶组件和自定义Hook.下面依次演示假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间,像这样: const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return
详解React Fiber的工作原理

啥是React Fiber? React Fiber,简单来说就是一个从React v16开始引入的新协调引擎,用来实现Virtual DOM的增量渲染. 说人话:就是一种能让React视图更新过程变得更加流畅顺滑的处理手法. 我们都知道:进程大,线程小.而Fiber(纤维)是一种比线程还要细粒度的处理机制.从这个单词也可以猜测:React Fiber会很"细".到底怎么个细法,我们接着往下看. 为什么会有React Fiber? 之前说了,React Fiber是为了让React的视
详解React中key的作用

要了解React中key的作用,可以从key的取值入手,key的取值可以分为三种,不定值.索引值.确定且唯一值在下面的代码中,key的取值是不定值(Math.random()) 问题: 点击按钮的时候,span的颜色会变成红色吗? import React, { useState } from 'react'; function App() { const [initMap, setInitMap] = useState([1,2,3,4]); const handleClick = () =
详解react应用中的DOM DIFF算法

前言对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了.然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的Virtual DOM技术,也可称作虚拟DOM.所以,到底什么是Virtual DOM?两大热门框架全部使用Virtual DOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOM DIFF算法的牛逼之处. 什么是Virtual DOM? 如字面意思所说,Virtual DOM即
详解React Angular Vue三大前端技术

一.[React] React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库.它由Facebook和一个由个人开发者和公司组成的社区来维护. React可以作为开发单页或移动应用的基础.然而,React只关注向DOM渲染数据,因此创建React应用通常需要使用额外的库来进行状态管理和路由,Redux和React Router分别是这类库的例子. 基本用法下面是一个简单的React在HTML中使用JSX和JavaScript的例子. Greeter函数

详解React 元素渲染

相关推荐

随机推荐