React总结7:render()渲染时机
来源:互联网 发布:淘宝店铺网址怎么复制 编辑:程序博客网 时间:2024/06/06 07:16
根据官网表示,JSX是属于一种不可变的对象,即只要一创建就不能被改变,继续我们c++,Java中的字符串一样,是属于常量范围,不容许改变,不能改变属性啊,孩子节点也不可以改变,这个元素就像电影中的某一帧,是处于一个确定的时间点上,不管你放多少遍它都不会发生改变。
function tick() { const el = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toString()}.</h2> </div> ); ReactDOM.render( el, document.getElementById('root') );}setInterval(tick, 1000);
通过这份代码大家就知道了,如果你要改变root容器中的内容,只能用render重新覆盖了。
这里大家需要知道一个常识,对于大多数React应用而言,React.render()通常只会调用一次,有趣,说好的需要覆盖重复调用呢。
在React建立和将内部的数据呈现给视图的过程中,React做了如下的事情:通过在真实DOM和React应用之间建立一个过渡层,这个过渡层有时被称为”虚拟DOM“。虽然不是DOM,但是有着和DOM一样的机制处理,几乎所有的操作都会先在虚拟DOM上进行处理,最后才更新到DOM节点上的
React渲染DOM节点时,只会渲染改变了的节点,如上面显示时间的代码,它只会更新大括号中的内容,其他的它不会改变,怎么实现的呢?
当组件的属性或者状态发生改变时,React会比较旧的DOM和新的DOM是不是不同,来确定更新当前DOM节点的必要性,如果不同的话,React就会更新这个DOM节点
这样非常有效的减少了reflow和repaint渲染,之所以可以这么做的原因,是因为他们是公共的根节点,就是说改变之前的节点的根节点和当前我要更新的根节点处于同一节点,我们通过递归比较就可以知道有没有发生改变。
在我们写代码的过程中我们可以通过一个函数去控制当前的组件是否需要进行更新,什么时候一定要更新,什么时候不更新。这个函数叫做shouldComponentUpdate生命周期更新函数,这个函数会发生在重新render视图渲染之前,此函数在React中默认是返回true,然后会执行render函数进行更新。
总结:
react render渲染的几种情况1. 首次加载2. setState改变组件内部state。 注意: 此处是说通过setState方法改变。3. 接受到新的props
- React总结7:render()渲染时机
- React---Render
- 使用immutable和react-immutable-render-mixin优化React Native视图渲染
- 【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解
- 【React Native】刷新组件RENDER(重新渲染)的三种方式详解
- fur render(毛发渲染)
- EXT render 渲染过程
- EXT render 渲染过程
- render collection渲染集合
- 渲染树render tree
- react-bits:Render Callback
- react重新render
- React render props
- DirectX11笔记(十一)--Direct3D渲染7--RENDER STATES
- React.render和reactDom.render的区别
- React.render和reactDom.render的区别
- React.render和reactDom.render的区别
- render直接渲染小技巧
- JS事件绑定addEventListener 和 attachEvent
- linux下lua开发环境安装
- 数据库优化常用技巧
- CentOS 7 关闭图形界面
- IDEA maven配置Spring
- React总结7:render()渲染时机
- Fragment的app包和v4包解析
- 数据结构封装之《LinkQueue2.0改进链式队列》
- 获取微信用户的openId
- linux重启和关闭系统命令
- 仿QQ消息导航栏RadioGroup里添加拖拽的TextView(未读消息)
- 十六天
- Android常用控件之ImageView
- the linux storage stack diagram