为什么在DOM render - React.js中将属性设置为等于自身

在DOM render - React.js中将属性设置为等于自身的目的是为了触发组件的重新渲染。当组件的属性发生变化时，React会比较新旧属性的值，如果发现有变化，就会重新渲染组件。

通过将属性设置为等于自身，可以在不改变属性值的情况下，强制React重新渲染组件。这在某些情况下是很有用的，例如当组件的某个属性是一个引用类型（如数组或对象），并且该属性的内容发生了变化，但是属性本身的引用并没有改变时。

在React中，组件的重新渲染是基于属性和状态的变化来触发的。当组件的属性或状态发生变化时，React会重新调用组件的render方法，生成新的虚拟DOM，并与旧的虚拟DOM进行对比，最终更新真实的DOM。

需要注意的是，将属性设置为等于自身可能会导致性能问题，因为每次重新渲染都会触发一次组件的render方法。因此，应该谨慎使用这种技巧，只在必要的情况下才这样做。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供弹性计算能力，满足不同规模和需求的业务场景。产品介绍链接
腾讯云云数据库 MySQL 版：提供高性能、可扩展的关系型数据库服务。产品介绍链接
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。产品介绍链接
腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助连接和管理物联网设备。产品介绍链接

相关·内容

【一起来烧脑】一步React.JS学会体系

React.JS是用于构建用户界面的JavaScript库 React.JS主要用于构建UI 下载使用：React.JS下载地址 <!...('example') ); 可以通过getDefaultProps()方法为props设置默认值。.../>, document.getElementById('example') ); React.JS API 设置状态--setState 替换状态--replaceState 设置属性--setProps...替换属性--replaceProps 强制更新--forceUpdate 获取DOM节点--findDOMNode 判断组件挂载状态--isMounted 组件生命周期状态组件的生命周期可以分为三个状态...： mounting--已插入真实DOM updating--正在被冲洗渲染 unmounting--已移出真实DOM

8762 0

学习 React Native for Android：React 基础

在我们的例子中，我们将问候语作为一个 word 属性，在 Greeting 组件中通过 this.props.word 来获取，并放入一个一级标题中，再在外层用一个 id 为 “greeting” 的...阅读官方文档有关属性默认值的内容，为 word 属性增加一个默认值 “Hello World” 。...这就是为什么虚拟 DOM 的速度要比 DOM 快的重要原因。由上也可看出，虚拟 DOM 技术依赖于 DOM diff 算法的效率和准确性。...程序的第 27 ~ 28 行增加了两个页面表单元素，用于接收用户输入和设置响应按钮点击事件为实例的 handleClick() 函数。...我们前面已经说到，组件在插入页面前其实是在虚拟 DOM 中的表示，因此，在渲染成最终实际的 DOM 前，你不能通过直接访问组件内的元素来试图获取它的属性。

9.2K2 0

React—最简洁的技术学习(一)

React DOM 在渲染之前默认会过滤所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。...在React中，render函数中的return后必须接上返回内容，否则会认为无值返回，控制台会报错提示。...和State的学习 ---- React组件可以把它看作带有props属性集合和state状态集合并且构造出一个虚拟DOM结构的对象。...Props props是组件中固有属性的集合，其数据由外部传入，一般在整个组件的生命周期中都是只读的。...但是有时候我们需要从组件中获取真实的DOM节点，来进行业务逻辑的编写，React为我们提供了ref属性。 <!

1.7K1 0

简单实现虚拟 dom 和渲染

修改package.json配置安装 cross-env cross-env是运行跨平台设置和使用环境变量的脚本。...在src文件夹下新建 react.js 和 react-dom.js 我们需要做的: 虚拟DOM的创建-也就是createElement() 渲染 render(） react.js 先创建一个函数...export default ReactDOM 复制代码测试一下在我们的index.js中引入我们写好的 react.js 和 react-dom.js import React from '....渲染属性和子元素在我们刚才写好的方法中去调用 updateProps方法 /** * 把虚拟DOM变成真实DOM * @param {*} vdom */ function createDOM...props.children.toString() : '' } // 把真实DOM作为一个DOM属性放在虚拟DOM，为以后更新做准备 // vdom.dom = dom

1.2K5 0

40行代码内实现一个React.js

在返回 DOM 元素之前会先给这个 DOM 元素上添加事件再返回。因为现在 render 返回的是 DOM 元素，所以不能用 innerHTML 暴力地插入 wrapper。...现在这个组件的可复用性已经很不错了，你的同事们只要实例化一下然后插入到 DOM 里面去就好了。 4、为什么不暴力一点？...好处就是你可以在 render 方法里面使用最新的 this.state 来构造不同 HTML 结构的字符串，并且通过这个字符串构造不同的 DOM 元素。页面就更新了！...新增一个 setState 函数，这个函数接受一个对象作为参数；它会设置实例的 state，然后重新调用一下 render 方法。...（注意这里加入了上面没有提到过点 props，可以给组件传入配置属性，跟 React.js 一样）。只要有了上面那个 Component 类和 mount 方法加起来不足40行代码就可以做到组件化。

2.5K3 0

React.js 概念与入门

设置页面的时候，你需要引入react.js和react-dom.js及Babel编译器脚本。...然后在type设置为text/babel的脚本区域写部件（component）： <!...为了与Javascript保留关键字区别，对于一些常规的html标记，在JSX中class为className，for为htmlFor。...这些属性在部件中表示为this.props，在渲染方法中能够动态显示数据： var MyComponent = React.createClass({ render: function(){...，设置回调属性值 mixins 对象数组，用以扩展当前部件的功能状态每个部件都既有状态state也有属性props，设置状态用setState方法。

2.1K2 0

一篇包含了react所有基本点的文章

去年，我写了一本关于学习React.js的小书，原来是大约100页。今年我要挑战自己，把它归纳为一篇文章。本文不会涵盖什么是React，或者为什么要学习它。...相反，这是面向已经熟悉JavaScript并熟悉DOM API基础知识的人，对React.js的基础知识的介绍。以下所有代码示例均标示为参考。它们纯粹是为了提供概念而写的例子。...这既不是JavaScript也不是HTML，甚至不是React.js。但是，它非常受欢迎，成为React应用程序中的默认设置。它被称为JSX，它是一个JavaScript扩展。 JSX也是妥协！.... />），React将从这个基于类的组件中实例化一个对象，并在DOM树中使用该对象。这就是为什么我们在上面的渲染输出中在JSX中使用this.props.label的原因。...以上面的当前时间戳显示为例。我们不是手动去浏览器并调用DOM API操作来每秒查找和更新p＃timestamp元素，而是在组件状态上更改了一个属性，而React代表我们与浏览器进行通信。

3.1K2 0

React学习(二)-深入浅出JSX

因为在javascript代码中将JSX和UI放在一起在视觉上有辅助作用,另外,它还可以使React显示跟过有用的错误和警告信息下面就一起来学习下JSX吧,当你习惯它之后呢,并不会嗤之以鼻,反而会引以为爱的...例如，在以下 JSX 中，仅当 isBtn 为 true 时，才会渲染 { isBtn && } ...元素结构都可以用javascript对象来描述,包括的信息有,标签名,属性,子元素,事件对象在JS里面,一切皆对象,对象的特点就是,含有属性或者方法,,其实任何东西,都可以用对象去描述例如:如下的JSX...DOM 树，然后插入到页面上某个特定的元素上所以在你编写一个组件的时候,一开始就要引入react.js和react-dom这两个文件的当使用JSX到最终展现页面结构到浏览器上:经历了如下过程:如果你在代码中进行断言一下...UI界面显示什么样,取决于JSX对象结构,换句话说,取决于render()函数里面的return关键字后面返回的JSX结构引入React.js库是为了解析识别JSX语法,同时创建虚拟DOM,而引入react-dom

2K3 0

初级React入门

一、引入Reactjs 方法一：直接下载相关js文件引入网页，其中react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX.../build/react.js"> , document.getElementById('example') ); 设置ref值，方便后续使用React.findDOMNode方法获取虚拟dom var...并渲染完成真实DOM后触发，可修改DOM //运行中阶段函数介绍 componentWillReceiveProps();//父组件修改属性触发，可以修改新属性和状态 shouldComponentUpdate...();//返回false会阻止render（提升性能） componentWillUpdate();//不能修改属性和状态 render();//同初始化函数render componentDidUpdate

1.2K7 0

React Native之React速学教程(上)

react.js react-dom.js browser.min.js 上面一共列举了三个库： react.js 、react-dom.js 和 browser.min.js ，它们必须首先加载。...其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，browser.min.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间...PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。...更多的PropTypes设置，可以查看官方文档。此外，getDefaultProps 方法可以用来设置组件属性的默认值。...初始化state 通过getInitialState() 方法初始化state，在组件的生命周期中仅执行一次，用于设置组件的初始化 state 。

2.4K8 0

【愚公系列】2023年03月其他-Web前端基础面试题（react专项_35道）

、渲染到页面上 render:组件在这里生成虚拟的 DOM 节点 componentDidMount:组件真正在被装载之后运行中状态： componentWillReceiveProps:组件将要接收到属性的时候调用...一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。...15、当调用setState时，React render 是如何工作的虚拟 DOM 渲染:当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。...在非受控组件中，可以使用一个ref来从DOM获得表单值。而不是为每个状态更新编写一个事件处理程序。 25、React和vue.js的相似性和差异性是什么？相似性如下。...（4）都使用虚拟DOM。（5）都可以放在单独的HTML文件中，或者放在 Webpack设置的一个更复杂的模块中。（6）都有独立但常用的路由器和状态管理库。

7.6K1 0

react.js 学习笔记

react.js 2、在官网安装react-dom.js 3、react.createClass 注册一个组件类 4.ReactDOM.render()将模板转成和html语言，并插入指定的DOM节点，...） 3.声明周期的使用（放逻辑代码的方法） 4.在render函数里应该是纯粹的组件结构，没有任何逻辑代码，不应该修改组件state,不读写DOM信息，也不与浏览器交互。...") ) React组件：props 属性验证 1.React.PropTypes提供各种验证器来验证传入数据的有效性 2.getDefaultProps默认值设置 DOCTYPE html> varMytitle...=React.createClass({ //1.propTypes的写法，作为属性时必须要大写 propTypes:{ }, render:function(){ return( ) } }) //验证属性为...string类型才可以输出 vardata="1111"; ReactDOM.render(,document.getElementById("demo")) 获取真实的DOM节点使用ref属性 demo

1.9K10 0

【Hybrid开发高级系列】ReactJS专题

首先，最后一个标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟JavaScript 不兼容。...其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。...其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为JavaScript 语法，这一步很消耗时间，...更多的PropTypes设置，可以查看官方文档。此外，getDefaultProps 方法可以用来设置组件属性的默认值。... React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

1732 0

react小结

例子 import React from 'react' import { render } from 'react-dom' // 定义组件 class Hello extends React.Component.../node_modules/react/package.json中的"main": "react.js",，这里的main即指定了入口文件，即....数据传递&数据变化 1） props 如果在Header组件中可以这样取到 render(){ return( {this.props.title...} ) } 在react中，父组件给子组件传递数据时，就是以上的方式，通过给子组件设置props，子组件获取props中的值便可完成数据传递。 ...2）props&state 如果组件内部自身的属性发生变化 class Hello extends React.Component{ constructor(props,context){

6561 0

五个特性，让你升级React

文件名 v15.4.2 v16.8.6 react.js 125KB 101KB react.min.js 21KB 13KB react-dom.js 606KB 774KB react-dom.min.js...3 render()返回新类型 render()用作渲染，在v16中渲染时可以不用再把组件包装到一个div中了。...新增）：会被渲染为文本节点 Portals插槽（v16.0.0新增）：可渲染子节点到父组件之外下面分别来看下新增的返回 3.1数组--v16.0.0新增 render() { // 不需要将清单项包装在额外的元素中...最后，render()里不要使用setState。 4.可自定义DOM属性如果在React v15中自定义属性，React v15会忽略它们。...而在v16中，任何标准的或者自定义的DOM属性都是完全支持的，可以显示出来。React的属性采用了小驼峰命名的方式，例如：className 。

2.2K11 1

React 入门实例教程

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。...组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如，就是 HelloMessage 组件加入一个 name 属性，值为 John...PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。...更多的PropTypes设置，可以查看官方文档。此外，getDefaultProps 方法可以用来设置组件属性的默认值。...十、组件的生命周期组件的生命周期分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM React 为每个状态都提供了两种处理函数

1.8K7 0

渐进式React源码解析-实现Ref Api

接下来我们看看babel中针对jsx的ref会编译成为什么样子: 我们可以看到其实针对jsx转译后的vDom元素，传入的ref是会保存在vDom的props上的,接下来我们来改造一下React.js中的...这时我们想到之前在实现setState时，我们在createDom方法中，给每一个vDom渲染时都添加了一个dom属性指向真实的Dom节点。...); } else { render(props.children, dom); } } } // 虚拟DOM上的dom属性指向真实dom 这里只有renderVDom才会挂载...原生Dom节点的ref属性可以指向对应的dom保存在class的实例上 class组件同样可以通过ref获得对应的势力对象保存在对应的父组件实例上作为属性调用结合上边这两个结论其实我们不难理解为什么FC...那么为什么不直接在挂载函数组件时直接让所有函数组件支持第二个参数为传入的ref，这样就完全不需要源码中的操作了。

1.2K2 0

React中的JSX原理渐析

在普通dom节点中，type类型为对应的标签类型。而当为纯函数组件时。type类型为函数自身。组件的type类型，就是函数自身，这点很重要。...返回虚拟DOM的type属性指向它自身，config为传入的props。剩余children作为属性挂载在props.children上。...看到这里你应该也能明白为什么我们平常需要获取这些属性的时候，需要使用xxx.type.displayName等。...后续涉及编译原理的知识在展开去看。其实从这里也可以看出为什么React中返回的jsx必须要求最外层元素需要一个包裹元素。 ReactDom.render方法接受传入的Element。...传入的type(第一个参数)，也为类组件自身。(函数) 当然说到这里一些同学会存在疑问了，既然类组件和函数组件type属性都是一个Function。那么如何区分类组件和函数组件呢。

2.3K2 0

React基础(2)-深入浅出JSX

因为在javascript代码中将JSX和UI放在一起在视觉上有辅助作用,另外,它还可以使React显示跟过有用的错误和警告信息下面就一起来学习下JSX吧,当你习惯它之后呢,并不会嗤之以鼻,反而会引以为爱的...例如，在以下 JSX 中，仅当 isBtn 为 true 时，才会渲染 { isBtn && } 有一点需要注意的是...元素结构都可以用javascript对象来描述,包括的信息有,标签名,属性,子元素,事件对象在JS里面,一切皆对象,对象的特点就是,含有属性或者方法,,其实任何东西,都可以用对象去描述例如:如下的JSX...)信息与HTML所展示的结构信息是一样的,那为什么不用Js对象来代替呢,因为用对象字面量写的方式太繁琐了,又臭又长的,结构又不清晰,如果用HTML来展示UI信息,那么就简单多了 React.js 就把js...UI界面显示什么样,取决于JSX对象结构,换句话说,取决于render()函数里面的return关键字后面返回的JSX内容结构引入React.js库是为了解析识别JSX语法,同时创建虚拟DOM,而引入

2.4K0 0

React入门学习

DOM 为什么慢其实严格来说，单纯的操作 DOM 并不慢，说它慢是带有一定条件的。...但虚拟 DOM 快也是在相对条件下的，这里引用 @尤雨溪大大在知乎问题《网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？》...首先，最后一个标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。...其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。...以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false. ReactDOM.render( {i == 1 ?

7343 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云