React入门-ReactDOM.render()介绍

React中的核心概念

  • 1 虚拟DOM(Virtual DOM)
  • 2 Diff算法(虚拟DOM的加速器,提升React性能的法宝)

虚拟DOM(Vitural DOM)

React将DOM抽象为虚拟DOM,虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率

为什么用虚拟dom,当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大

  • 如何实现一个 Virtual DOM 算法
  • 理解 Virtual DOM

VituralDOM的处理方式

  • 1 用 JavaScript 对象结构表示 DOM 树的结构,然后用这个树构建一个真正的 DOM 树,插到文档当中
  • 2 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
  • 3 把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了

Diff算法

  • Reconciliation diff
  • diff算法 - 中文文档
  • 不可思议的 react diff
  • React diff 算法
当你使用React的时候,在某个时间点 render() 函数创建了一棵React元素树,
在下一个state或者props更新的时候,render() 函数将创建一棵新的React元素树,
React将对比这两棵树的不同之处,计算出如何高效的更新UI(只更新变化的地方)

一、ReactDOM.render()

React最基本方法,

    用于将模版转换成HTML语言,渲染DOM,并插入指定的DOM节点中    

    该方法有3个参数 :

    - 模版的渲染内容(HTML形式)    

    - 需要插入的DOM节点    

    -  渲染后的回调(一般用不到)

// 1. 导入 react
import React from 'react'
import ReactDOM from 'react-dom' // 2. 创建 虚拟DOM // 参数1:元素名称 参数2:元素属性对象(null表示无) 参数3:当前元素的子元素string||createElement() 的返回值 const divVD = React.createElement('div', { title: 'hello react' }, 'Hello React!!!') // 3. 渲染 // 参数1:虚拟dom对象 参数2:dom对象表示渲染到哪个元素内 参数3:回调函数 ReactDOM.render(divVD, document.getElementById('app'))

链接:https://www.zhihu.com/question/27602269/answer/40168594
来源:知乎

react中createFactory, createClass, createElement分别在什么场景下使用,为什么要这么定义?



三者用途稍有不同,按依赖关系调整下顺序:
1. createClass,如其名就是创建React组件对应的类,描述你将要创建组件的各种行为,其中只有当组件被渲染时需要输出的内容的render接口是必须实现的,其他都是可选:
var Hello = React.createClass({ render: function() { return <div>Hello Taobao, Hello UED</div>; } }); 

2. createElement,创建React组件实例,支持type,config,children三个参数:
ReactElement.createElement = function(type, config, children) { ... } 

如我们在jsx中描述的 < Hello /> ,编译后就是 React.createElement(Hello)

3. createFactory,通过工厂方法创建React组件实例,在js里要实现工厂方法只需创建一个带type参数的createElement的绑定函数:
ReactElement.createFactory = function(type) { var factory = ReactElement.createElement.bind(null, type); return factory; }; 
创建模式目的是隔离与简化创建组件的过程,模式的东西自然是可用可不用,如果需要批量创建某个组件时,可以通过工厂方法来实现:
var h = React.createFactory(Hello);
h({x:1})
h({x:2})
h({x:3})
当前位置: 主页 > 学无止境 > WEB前端 > 文章

React入门 createClass使用说明

发布时间: 2016-04-08 作者: 迹忆 浏览次数: 4693

在使用React.createClass之前,我们先来看官方给出的解释

ReactClass createClass(object specification)

创建一个给出说明的组件类(这个给出的说明也就是其参数 object specification)。这个组件实现一个render方法,并且render方法返回一个单一的节点。这个返回的节点可能包含任意深度的子节点结构。该方法与标准的原型类不同的地方就是不用使用new去实例化对象。这些组件被很好的封装起来,可以很好的为你创建后台实例。

当然,单看这些定义我是不知道该如何去使用createClass方法的(我觉的我翻译的不够标准)。那下面我们直接通过一个实例来解释如何使用React.createClass()。

在本篇文章,我们只是实现render方法,并且在介绍应该注意的问题。对于object specification的详细介绍,那就涉及到了组件的详细说明和生命周期的知识,在本篇我们不做介绍。

例一

var Root = React.createClass({
    render:function(){
        return (
          <h1>迹忆博客</h1>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

这是一个简单的例子。虽说简单,但是有两个需要注意的地方。

第一点就是生命的Root首字母必须大写,也就是说我们如果将Root 写成root,那么<root />就会被直接解析成html标签(<root></root>)。下面我们来看如下的代码(下面的代码是错误的)

var root = React.createClass({
    render:function(){
        return (
          <h1>迹忆博客</h1>
        );
    },
});
ReactDOM.render(
        <root />,
        document.getElementById('content')
);

其解析的结果如下

<root data-reactid=".0"></root>

显然这不是我们想要的结果。

第二点是,在一个createClass创建的组件中只能有一个根节点。这个根节点可以有任意层的子节点。下面我们看如下的代码

var Root = React.createClass({
    render:function(){
        return (
          <h1>迹忆博客</h1>
          <a>www.onmpw.com</a>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

这段代码也是存在错误的,在解析过程中会报如下的错误

SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (22:18) 20 | return ( 21 | <h1>迹忆博客</h1> > 22 | <a>www.onmpw.com</a> | ^ 23 | ); 24 | }, 25 | }); ...("+loc.line+":"+loc.column+")";var err=new SyntaxError(message);err.pos=pos;err....

因此如果我们想要实现上述我们想要的结果,可以在h1和a的外面再加一层节点。如下

例二

var Root = React.createClass({
    render:function(){
        return (
          <div>
            <h1>迹忆博客</h1>
            <a>www.onmpw.com</a>
          </div>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

这样就能保证一个组件中只有一个根节点,又能实现我们想要的效果。

其实对于render来说,该方法会返回一个React组件树,用来接受该组件树的变量名称必须首字母大写。并且该组件树只能有一个根节点,这也是符合实际情况的。最终这棵组件树会被ReactDOM.render渲染成HTML标签。

对于例二中的<div>标签,它并不是一个真正的DOM节点,而是一个虚拟的DOM节点。你可以这样认为,组件树中的这些节点就是一些标记或者数据,只是React知道该如何处理这些标记或者数据。

其实React.createClass的知识点很多,这里我只是简单介绍在使用过程中应该注意的问题。

 

转载于:https://www.cnblogs.com/susan-home/p/8675291.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367503.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

51单片机auxr寄存器_MCS-51单片机有几个工作寄存器

工作寄存器有4组&#xff0c;每组都是8个工作寄存器R0~R7&#xff0c;通过PSW中的RS1、RS0两位来选择使用哪一组&#xff0c;如果不选&#xff0c;默认是选择第0组。RS1RS0组合为00时&#xff0c;选中第0组工作寄存器&#xff0c;R0~R7地址为00H~07H;RS1RS0组合为01时&#xff…

柯里化

柯里化(currying)&#xff0c;是指把接受多个参数的函数变换成接受一个单一参数&#xff08;最初函数的第一个参数&#xff09;的函数&#xff0c;并且返回接受余下参数而且返回结果的新函数的技术。 柯里化是理解装饰器函数的一个非常重要的知识点。 比如&#xff0c;将加法函…

matlab中quat2angle,RPY_Euler_Quaternion_AngleAxis角度转化:Matlab、Python、Halc

RPY_Euler_Quaternion_AngleAxis角度转化&#xff1a;Matlab、Python、HalcRPY_Euler_Quaternion_AngleAxis角度转化&#xff1a;Matlab、Python、Halcon版本UR协作机器人和Franka机器人导出的位姿为angleVector&#xff0c;三个量表示&#xff0c;在Matlab中angleVector是四个…

基本注射/资格赛,范围

这是上周解决的DI / CDI基础知识的延续-在本文中&#xff0c;我将讨论基础注入&#xff0c;限定词和范围。 在上一个主题中&#xff0c;我们提供了有关DI / CDI概念的大量信息&#xff0c;我们还讨论了如何使用注释加载这些bean或类-这构成了对象的组成并创建了关于如何进行采…

100*100的 canvas 占多少内存?

题目 100*100的 canvas 占多少内存&#xff1f; 在 三年前端&#xff0c;面试思考 中提到了一个题目&#xff0c;非常有新意&#xff0c;这里分享一下当时面试的思考过程。 解题思路 其实真正的答案是多少我并不清楚&#xff0c;面试过程中面试官也不期待一个准确的答案&am…

python,获取用户输入,并且将输入的内容写到.txt

该功能缺点是必须保证该文件不存在的情况才会成功 fopen(E:/mywork/保存文件.txt,x)def userwrite(code):if codew:f.close()return Falseelse:f.writelines(code\n)return True isbool True count 0 while isbool:codeif count0:code input("请输入内容&#xff1a;\n…

1t硬盘怎么分区最好_这下尴尬了,电脑硬盘分区常见误区,移动硬盘分区方法...

大家买了新电脑硬盘要不要分区呢&#xff1f;像以往咱们买了新电脑一般会分4个区&#xff0c;C、D、E、F&#xff0c;方便更合理的分类使用&#xff0c;比如把工作放为D盘&#xff0c;娱乐影音放为E盘&#xff0c;游戏放为F盘&#xff0c;C盘为系统盘。不过渐渐地发现&#xff…

matlab仿真环境,高低温环境模拟系统MATLAB仿真研究

1] Sadoun B. Applied system simulation:a review study[J] Information Sciences, 2000, 124:173~192[2] 王子介,Krauss G. 热交换器的微元模拟法及求解[J] 制冷学报, 2000,(1):33~39 Wang Zijie,Krauss G. Unit simulation method for heat-exchanger[J] Journal of Refrige…

用Spring长轮询Tomcat

就像喜剧演员弗兰基 豪威尔 &#xff08; Frankie Howerd&#xff09;所说的“哦&#xff0c;小姐小姐” &#xff0c;但足够多的英国影射和双重诱惑&#xff0c;因为长轮询雄猫对隔壁的闷气不是某种性偏见&#xff0c;这是一种技术&#xff08;或更像是一种骇客&#xff09;由…

.net core 编译时报错 Package Microsoft.Composition 1.0.27 is not compatible with netcoreapp1.1

查找错误项目 通过命令行cd到项目位置&#xff0c;执行dotnet restore命令查看具体报错项目。 解决方案 去项目中找到项目解决方案.csproj > 编辑 > PropertyGroup节点 > 添加如下代码 <PropertyGroup><TargetFramework>netcoreapp1.1</TargetFramewor…

支援一波 《面试数十人有感》

戳原文 无意间看到原博主的这篇文章&#xff0c;强调基础和原理&#xff0c;略有同感。 然而却发现评论区简直 ~ 辣眼睛 ~ 比如 活在梦里的面试官 我觉着吧&#xff0c;技术迭代的这么快&#xff0c;公司更需要的是有能力、有思想解决技术问题的人&#xff0c;并不代表说基础…

exchange 删除邮件

一 批量删除特定主题的邮件1.1 批量删除所有数据库中特定主题的邮件1) 群发了几封主题为“backup”的邮件&#xff1b; 2) 当前操作账号需要满足如下需求&#xff1a; a)该账号需属于Exchange Server 管理员角色以及源服务器和目标服务器的本地 Administrator组&#xff1b; b)…

js点击取消按钮关闭当前弹框_UI设计中“取消按钮”的分析详解

按钮&#xff0c;无论是在 Web 还是 App 上都被广泛地使用&#xff0c;而很少有设计师会注意到按钮当中的细节&#xff0c;导致在设计过程中出现一些低级的错误&#xff0c;使得用户在完成任务的过程中产生阻碍&#xff0c;无法顺利达成目的。在许多优秀的产品中&#xff0c;关…

MATLAB飞机大战第二版,windows程序设计——飞机大战札记(单文档文件登陆界面)...

windows程序设计——飞机大战笔记(单文档文件登陆界面)//2015/07/21/by xbw////环境 VS 2013飞机大战做的差不多了&#xff0c;闲来无事加点高大上的东西&#xff0c;关于单文档的登陆界面&#xff1b;&#xff1b;&#xff1b;界面有点丑&#xff0c;但是足够账号登陆了&#…

吸收Mockito的流利度

我最近发现自己编写了一些代码来集成两个不同的平台。 这些系统之一是基于Java的系统&#xff0c;而另一个虽然不是用Java编写的&#xff0c;却提供了Java API。 我将这些系统分别称为Foo和Bar。 在编写一行代码之前就很明显了&#xff0c;但是&#xff0c;测试最终的适配器将…

软件工程第三次作业

题目要求 最大连续子数组和&#xff08;最大子段和&#xff09; 问题&#xff1a; 给定n个整数&#xff08;可能为负数&#xff09;组成的序列a[1],a[2],a[3],…,a[n],求该序列如a[i]a[i1]…a[j]的子段和的最大值。 当所给的整数均为负数时定义子段和为0&#xff0c;依此定义&a…

使用HTML5 IndexDB存储图像和文件

使用IndexedDB存储图像和文件 有一天&#xff0c;我们写了关于如何在localStorage中保存图像和文件的文章&#xff0c;它是关于我们今天可用的实用主义。 然而&#xff0c;localStorage有一些性能影响 - 我们将在稍后的博客中讨论这个问题 - 并且未来期望的方法是使用IndexedD…

Gitlab 项目上传

一&#xff0c;登陆gitab&#xff0c;新建reject Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public, Private : 仓库权限&#xff08;公开共享&#xff0c;私有或指定合作者&#xff09; Initialize this repository with a README: 添加一个README.md gitig…

Java Servlet的前100个问题

1&#xff09;是“ servlets”目录还是“ servlet”目录&#xff1f; 回答&#xff1a; 对于Java Web Server&#xff1a; 在文件系统上&#xff0c;它是“ servlet” c&#xff1a;\ JavaWebServer1.1 \ servlets \ DateServlet.class 在URL路径中&#xff0c;它是“ servl…

stm32f103r6最小系统原理图_超强PCB布线设计经验谈附原理图

在当今激烈竞争的电池供电市场中&#xff0c;由于成本指标限制&#xff0c;设计人员常常使用双面板。尽管多层板(4层、6层及8层)方案在尺寸、噪声和性能方面具有明显 优势&#xff0c;成本压力却促使工程师们重新考虑其布线策略&#xff0c;采用双面板。在本文中&#xff0c;我…