React
来源:互联网 发布:软件编程培训机构 编辑:程序博客网 时间:2024/06/06 20:42
(四)react加速dom渲染
问题概述
现在的web应用太复杂了,而且经常以ajax或WebSocket的形式获取数据,更新视图。而浏览器Dom渲染能力很差,每次数据更新都要更新dom树重新渲染性能很差。
react demo
react在运行时构建了基于内存的虚拟dom,会在更新时和原来的dom进行对比(diff),然后只渲染不同的地方。提高了性能。组件是react中非常重要的概念,通过props可以将属性,传入到子组件中。state是组件重要的一个概念,在组间声明中this.setState可以修改state的属性值。state一旦发生变化,该组件则会进行diff然后重新渲染,调用render函数。这里一句两句实在是说不清里面的关系。可以自己去了解下react,这里给出两个经典的demo。
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; }});ReactDOM.render( <HelloMessage name="John" />, document.getElementById('example'));
解释:这里createClass
创建了一个组件名为HelloMessage(即之后可以通过<HelloMessage>
表示),然后改函数参数是一个对象且一定要有render函数,其返回值是该标签的显示内容(注意这里有很多jsx语法,即html嵌入js中,{}中是js)。props就是该标签的属性集合,这里最后会显示<h1>Hello John</h1>
var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <p onClick={this.handleClick}> You {text} this. Click to toggle. </p> ); }});ReactDOM.render( <LikeButton />, document.getElementById('example'));
解释:render函数是显示一个p然后onClick方法注册点击函数(注意html原生的是onclick小写这里是react独有的)。然后点击的时候改变了state,改变state后组件本身需要更新,即重新render,render的时候state.like已经改变。所以最后点一次切换一次。
小结
前端应用越来越大了,甚至类似react-native都已经想扩张到移动端了。前端js越来越多,dom渲染越来越频繁,这就要让浏览器压力山大了。我们知道浏览器性能十分有限,对于频繁的渲染会导致电脑卡顿,所以需要优化dom。这也是react初衷,不过react还提供组件的功能,对于组织大型应用,团队开发都有促进作用。
- React
- react
- React
- REACT
- React
- react
- react
- React
- react
- react
- React
- React
- react
- React
- react
- react
- React
- React
- JZ2440 第13章 LCD控制器(1)
- Vue
- 二维数组的遍历并按标准格式输出
- VMWare与Centos7.0无法共享文件夹的问题总结
- 欢迎使用CSDN-markdown编辑器
- React
- 1024与自己做爱做的事情
- 【常用css3】box-shadow
- 使用snapshots迁移网站后,外网打不开的问题解决办法
- 6、树莓派音频——netjack2低延迟网络音频传输设置
- robot_localization Package 参考(1)
- git 报错——ssh_exchange_identification: read: Software caused connection abort
- jquery源码分析之html标签匹配(rsingleTag.js)
- Python 学习笔记(第一周)