React之渲染元素

Jenny_Tong 发布于2019-08-21 15:49 / 2652人阅读

摘要：渲染元素开场白接着上一节的讲解后我们大概清楚了以下几个事儿知道是个什么东东为什么要推荐使用以及的一些基本语法。本篇文章谈一下是怎么渲染元素的。更新已渲染的元素元素是不可变的，一旦你创建了一个元素，就不能再修改其子元素或任何属性。

React-渲染元素 开场白

接着上一节JSX的讲解后：我们大概清楚了以下几个事儿:

知道JSX是个什么东东

为什么React要推荐使用JSX

以及JSX的一些基本语法。

本篇文章谈一下React是怎么渲染元素的。

元素

元素是React应用中的最小部件，正是由一个或多个元素构建出来了组件。
一个元素用于描述你将在屏幕上看到的内容，比如：

const element = Hello, world
;

渲染元素到DOM 根DOM节点

假设我们的HTML文件中有这样的一个

我们称这是一个根DOM节点，该节点内的所有内容都是有React DOM管理

注意

一个用React构建的应用程序通常只有一个根DOM节点。

但是如果把这些应用程序整合到现有的app当中去，那么该app中就可能会包含多个相互独立的根DOM节点。

更新已渲染的元素

React元素是不可变的，一旦你创建了一个元素，就不能再修改其子元素或任何属性。
更新UI的唯一方法是创建一个新的元素，并将其传入到ReactDOM.render()方法。
来思考下时钟的例子,完整代码如下：




    
    rendering-elements

以上代码，每隔1秒，就会通过setInterval()回调ReactDOM.render()方法来重新渲染元素。

注意:

实际上，大多数 React 应用只会调用 ReactDOM.render() 一次。在接下来的章节中，我们将学习如何将这些代码封装到有状态的组件中。

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

React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态。
我们对上一个例子进行检查来验证这一点:

从上图中我们可以看出，即使我们我们每隔 1 秒都重建了整个元素, 但实际上 React DOM 只更新了修改过的文本节点。
本文做为自己加强记忆之篇，均参考自：
http://www.css88.com/react/do...，在此列出，大家共同学习。

欢迎大家访问我的blog，有更精彩的文章吆！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88268.html

react之生命周期渊源

摘要：组件是否应当渲染新的或，返回表示跳过后续的生命周期方法，通常不需要使用以避免出现。组件销毁生命周期函数的渊源自定义组件的生命周期主要通过三种状态进行管理，它们负责通知组件当前所处的状态，应该执行生命周期中的哪个步骤，是否可以更新。生命周期有哪些以及用法首次实例化 getDefaultProps作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享 ...

qingshanli1988 2019-08-22 13:52 评论0 收藏0
React源码解析之ReactDOM.render()

摘要：一更新的方式有三种渲染接下来，我们就来看下源码二作用在提供的里渲染一个元素，并返回对该组件的引用常见的用法是这个官网网址源码服务端使用方法渲染节点是让服务端尽可能复用节点，提高性能元素容器应用渲染结束后，调用的函数错误抓取方法本质是返回 showImg(https://segmentfault.com/img/remote/1460000020064414?w=1240&h=641);...

iKcamp 2019-08-26 10:45 评论0 收藏0
react源码解析之stack reconciler

摘要：争取把源码剖析透学习透。除了用户定义的复合组件外元素还可能表示特定于平台的主机组件。装载的具体结果有时在源代码中称为装载映像取决于渲染器，可能为节点字符串服务器或表示本机视图的数值。其所缺少的关键部分是对更新的支持。关于源码解读的系列文章，可以关注我的github的这个仓库, 现在才刚刚写，后续有空就写点。争取把react源码剖析透学习透。有不正确的地方希望大家帮忙指正。大家互相学习...

ky0ncheng 2019-08-22 17:30 评论0 收藏0
4、React组件之性能优化

摘要：组件的性能优化高德纳我们应该忘记忽略很小的性能优化，可以说的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外的代码。对多个组件的性能优化当一个组件被装载更新和卸载时，组件的一序列生命周期函数会被调用。 React组件的性能优化高德纳: 我们应该忘记忽略很小的性能优化，可以说97%的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外3%的代码。...

陈伟 2019-08-22 15:01 评论0 收藏0
精益 React 学习指南（Lean React）- 1.1 React 介绍

摘要：单向数据流应用的核心设计模式，数据流向自顶向下我也是性子急的人，按照技术界的惯例，在学习一个技术前，首先得说一句。然而的单向数据流的设计让前端定位变得简单，页面的和数据的对应是唯一的我们可以通过定位数据变化就可以定位页面展现问题。书籍完整目录 1.1 React 介绍 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

lsxiao 2019-08-19 18:20 评论0 收藏0