首页 > 其他分享 >Reactjs学习-props, state, render之间的关系以及虚拟Dom

Reactjs学习-props, state, render之间的关系以及虚拟Dom

时间:2023-07-19 22:23:21浏览次数:30  
标签:render Dom Reactjs state 虚拟 dom props

本篇是关于React的基础-渲染以及虚拟dom

  1. props, state,  render之间的关系
  • 当组件的state或者props发生改变时,render函数重新执行
  • 当父组件的render函数执行时,子组件的render函数也会重新执行

    2. 虚拟Dom
  • 产生背景:
    react是视图层的框架,数据加JSX模板构成我们的视图,数据会发生改变,每次改变都会生成新的Dom, 频繁生成dom会损耗性能,为了解决这个问题,引入了虚拟Dom这个概念
  • 虚拟Dom概念:
    就是一个js对象,包含当前元素标签名,属性名,子元素...

     用这个对象来表示一个dom元素

  • 优点
    数据每次发生改变,都去比较dom然后生成新的dom,损耗大量性能,而生成虚拟dom以及比较虚拟dom相比之下损耗较小,能提升项目性能

标签:render,Dom,Reactjs,state,虚拟,dom,props
From: https://www.cnblogs.com/pandacat5/p/17566933.html

相关文章

  • Reactjs学习-组件之间传值
    本篇是关于React的基础-父子组件之间传值子组件想使用父组件的某个属性父组件就需要把这个属性传递给子组件,子组件就可以用this.props.属性名来接收子组件调用父组件的方法父组件就需要把这个方法以属性的方式传递给子组件,子组件就可以用this.属性名来调用,要注意this指向......
  • Reactjs学习-JSX语法
    本篇是关于React的基础-JSX语法什么是JSX在js文件中写html,这样的语法就是JSX 如何书写跟html写法一致,注意,首字母大写的标签是组件,首字母小写的,例如div是html元素 有哪些注意事项1.在类组件中写注释,用花括号包起来2.style中的某个属性需要用state中的值, 用模......
  • Reactjs学习-State
    本篇是关于React的基础-State在哪儿定义react在Constructor函数中定义state,如下 如何绑定使用JSX语法中,想使用刚才定义的state,需要用花括号包起来例如 如何修改state需要绑定事件,React提供setState函数来做这个操作this.setState({state名:值})注意:......
  • Statement not bound, 使用MybatisPlus时的SqlSessionFactory和MybatisSqlSessionFact
    最近首次在真实项目中,实践用SpingBoot整合Mybatis、MybatisPlus、Spring、多数据源等常见SSH整合问题。遇到一个难题,MybatisPlus遇到了经典的问题“Statementnotbound”。如果是Mybatis,很容易解决,扫描到Mapper接口文件和Mapper.xml文件,肯定能搞定。这次整合进了MybatisPlus,之前......
  • Reactjs学习笔记
    本篇是关于React的简介ReactJS是Facebook推出的一款前端框架,2013年开源,提供了一种函数式编程思想,拥有比较健全的文档和完善的社区,在React16的版本中对算法进行了革新,称之为ReactFiber。开发环境搭建需要nodeJS解析器,以及npm(node的包管理工具)如何引用React1.使用.js来引入......
  • mysql报错:You must reset your password using ALTER USER statement before executin
    mysql报错:YoumustresetyourpasswordusingALTERUSERstatementbeforeexecutingthisstatement.新安装mysql后,登录后,执行任何命令都会报错:YoumustresetyourpasswordusingALTERUSERstatementbeforeexecutingthisstatement. 【解决办法】MySQL版本5.7.6版本......
  • SavedStateHandle的介绍----ViewModel不具备保存状态数据的功能
    LiveData本身不能在进程销毁中存活,当内存不足时,Activity被系统杀死,ViewModel本身也会被销毁。为了保存LiveData的数据,使用SavedStateHandle。事故场景:进程销毁后,重新去通过ViewModel去获取LiveData数据,获取到的数据是null。这表示ViewModel不具备onSavedInstance的功能。 ......
  • useEffect、异步请求、定时器使用useState闭包问题
    useEffect闭包问题:问题:useEffect使用useState会使调用的所有方法内部的state值为useEffect周期的值,即使在这个过程中useState的值变化也不能影响调用方法内获取到原始值解决方式:使用useCallabck可以避免由此产生的闭包问题异步请求、定时器等js闭包问题:问题:异步请求和定时器......
  • StatefulSet
    有状态应用实例之间有不对等关系,以及实例对外部数据有依赖关系的应用,就被称为“有状态应用”。Pod管理策略通过.spec.podManagementPolicy字段来管理Pod。OrderedReady:严格遵循Pod顺序来启停,默认设置。Parallel:告诉StatefulSet控制器并行启动或终止所有Pod,并且在启动或......
  • kubernetes之 statefulset控制器
    第九部分statefulset控制器参考:https://blog.csdn.net/styshoo/article/details/73731993     https://blog.51cto.com/xuexinhuan/5424144即便是有状态管理,也需要使用脚本来运维。CoreOS:OperatorStatusfulSet:有状态Cattle,petPetSet->StatefulSeta、稳定......