秒懂ReactJS
xsobi 2024-12-10 21:35 1 浏览
这篇文章是为ReactJs小白准备的,希望他们快速抓住ReactJs的要点并能在实践中随机应变。
两句话版本
- ReactJs把视图更新简化为一个render函数
- render函数接收两个参数,分别是配置项和状态
长版本
ReactJs是一个专注于View的Web前端框架。Web前端的View就是浏览器中的Dom元素,改变View的唯一途径就是修改浏览器中的Dom元素,因此ReactJs的核心任务就是如何修改Dom元素,作为一个成功的框架,ReactJs使修改Dom元素变得高效而又简单。
ReactJs把修改Dom的操作简化成一个函数renderInto(parentDom, props, states)=>htmlString,这个函数的意图就是根据props,states计算出视图对应的html字符串并添加为parentDom的子节点。props和states就是普通的javascript对象,这个函数的核心逻辑就是计算html元素的机构及元素属性然后拼接成字符串返回。作为框架,ReactJs用JSX形式的DSL解决了拼接html的任务并接管了更新到parentDom的职责。看一个例子,理解这个函数并理解ReactJs怎么使用这个函数你就可以一个人开始ReactJs之旅了。
var props = {name: 'myname'};
var states = {amount: 1000};
function render(props, states) {
var title = ’Hello, ' + props.name;
var description = 'You have ' + states.amount + ' score now.';
return (
<div className="score-board">
<h1>{title}</h1>
<p>{description}</p>
</div>
);
}
函数第一行根据props计算title,第二行根据states计算description,最后以JSX形式返回拼接好的html字符串。
如果你用过AngularJs,EmberJs等类似的前端框架,你可能会觉得没什么了不起,不就是把模板和逻辑放到一起吗?是的,没错,但这不仅仅是组织形式上的改变,而是编程隐喻的转变—从复杂的MVC或MVVM模式到简单的render函数。还有一点不同是JSX最终编译成调用react-dom的javascript语句,而不是直接生成字符串。
render函数还只是ReactJs这座冰山的一角,”React”会在render函数的输入变化时再次调用这个函数。再看一个例子。
var props = {name: 'myname'};
var states = {amount: 1000};
function handleClickAdd() {
states = {amount: states.amount + 1};
}
function render(props, states) {
var title = ’Hello, ' + props.name;
var description = 'You have ' + states.amount + ' score now.';
return (
<div className="score-board">
<h1>{title}</h1>
<p>{description}</p>
<button onClick={handleClickAdd}>+1</button>
</div>
);
}
这个例子增加了一个”+1”按钮,当用户点击按钮时会修改states,ReactJs在states变化时的”React”就是再次调用render函数,然后用新输出更新浏览器的dom。
可能你会问,props和states不就是Model吗?是的,可以理解成Model,但此Model非彼Model,props和states都是为View服务的而非和View平起平坐。
可能你还会问,为啥不把props和states合并成一个对象?要回答这个问题,就涉及到复杂视图的场景。想想看,当视图内的元素不断增加时,代码上如何处理,还要在一个render函数里折腾吗?肯定不会。我猜你已经想到了,要把大问题拆小。ReactJs给出的解决方法就是把大视图拆成若干个小视图,每个视图都有自己的render函数,在JSX中可以直接使用视图标签。看一个例子。
var Score = React.createClass({
initialState: function() {
return {amount: 1000};
},
function handleClickAdd() {
this.setState({amount: this.states.amount + 1});
}
render: function() {
var title = ’Hello, ' + this.props.name;
var description = 'You have ' + this.states.amount + ' score now.';
return (
<div className="score-board">
<h1>{title}</h1>
<p>{description}</p>
<button onClick={handleClickAdd}>+1</button>
</div>
);
}
});
var ScoreList = React.createClass({
render() {
return (
<ul className="score-list">
<li><Score name="Tom" /></li>
<li><Score name="Jerry" /></li>
</ul>
);
}
});
ReactDOM.render(
<ScoreList />,
document.getElementById('content')
);
这个例子中有两类View,分别是Score和ScoreList。ScoreList的render函数中使用Score标签并给出配置项name的值。详细看一下Score,ReactJs提供createClass方法定义视图,在render函数中通过this.props访问外部传入的配置项,通过this.states访问视图内部的状态。从意图上看,props外部传入视图的配置项,拥有者是父视图,视图内部只能读取配置项,states的拥有者是视图自身。
区分props和states的结果就是,子视图没办法直接改变父视图,视图改变一定是自触发改变的视图开始向子视图传播。对上面的例子,当Tom的Score改变时,ScoreList其他部分一定不会改变,所以视图更新从Tom的Score视图开始就可以,这就保证了能更高效地计算视图变化,再加上VirtualDom的使用,使ReactJs的效率大大超过其他框架。
当子视图需要改变父视图时,也一定是从父视图开始向下更新。假如上面的例子中ScoreList还有平均分的视图,当Tom的分数改变时,需要更新ScoreList中的平均分。这就需要Score视图在处理”+1”输入时把变化通知到ScoreList,做法时给Score增加配置项,ScoreList中定义更新平均分的函数并把函数作为配置项传给Score。当ScoreList更新时,因为Jerry的props和states都没变化,所以Jerry的Score视图不需要更新。
这就是ReactJs的全部秘密了(不过Web前端本身是一个复杂系统,你还需要了解更多其他内容)。
相关推荐
- 斗鱼针针成旻云个人资料 针针年龄身高演艺经历介绍
-
[闽南网]针针成旻云曾是七煌旗下签约艺人,经常在斗鱼进行直播身高超过170cm的她更因为有一双大长腿而被称为“斗鱼第一美腿”、“电竞第一腿”。本文这就来对针针的个人资料进行详细介绍,想知道她的年龄身高...
- 轻量级RTSP服务模块和RTSP推流模块适用场景区别
-
好多开发者一直搞不清轻量级RTSP服务SDK和RTSP推流SDK的区别,以下是相关区别:1.轻量级RTSP服务模块:轻量级RTSP服务解决的核心痛点是避免用户或者开发者单独部署RTSP或者RTMP服...
- 《新·奥特曼》11月18日国内视频平台上线
-
《新·奥特曼》海报。新京报讯11月14日,由上海新创华文化发展有限公司授权引进电影《新·奥特曼》宣布正式定档11月18日(周五)00:00上线视频平台,上线版本为日语配音中文字幕版。影片由庵野秀明(...
- 剑指Apple Watch!Android Wear也将支持视频功能
-
想必智能手表发展到现在,大家最期待的还是视频功能,近日AndroidWear就实现了这一功能,以后就能在手表上看视频了,想想就挺激动的,快来看看吧!其实早在WWDC大会上,老对手AppleWatc...
- QT应用编程:基于VLC开发音视频播放器(句柄方式)
-
一、环境介绍操作系统:win1064位QT版本:QT5.12.6编译器:MinGW32VLC版本:...
- OBS 源码分析 obs开发
-
本文将按照数据源的获取、渲染、推送的直播流程来让大家深入了解一下。1、直播源数据获取obs在启动时会优先加载libobs核心库,这个库初始化obs很多内容,包括crash模块、com、性能监...
- Android和iOS端Moments更新:支持视频分享功能
-
Moments是社交网络巨头Facebook推出的一款私人照片分享应用,今天公司宣布对Android端和iOS端应用同时升级,新增对视频分享功能的支持。事实上早在数周之前,Facebook就曾表示Mo...
- 您很快就可以在Android Galaxy设备之间传输视频通话
-
在阅读此文之前,辛苦点击右上角的“关注”,既方便您进行讨论与分享,又能给您带来不一样的参与感,感谢您的支持!导语:在科技领域,每时每刻都有新的发展,令人兴奋的创新不断涌现。早在八月份,Android系...
- 一篇文章带你FFmpeg到流媒体服务器开发
-
安装ffmpeg:下载FFmpeg和libx264的包ffmpeg-2.4.1.tar.bz2last_x264.tar.bz2libx264需要yasm,所以先安装yasmapt-getinst...
- YouTube 为 Android 平台提供 1440P 视频
-
安锋网8月10日消息,Android从起初的480P的屏幕分辨率发展到2014年的1440P花了将近六年的时间,一般认为1080P的屏幕分辨率已经是人眼可以识别的极限,但是...
- FFmpeg 调用 Android MediaCodec 进行硬解码(附源码)
-
FFmpeg在3.1版本之后支持调用平台硬件进行解码,也就是说可以通过FFmpeg的C代码去调用Android上的MediaCodec了。在官网上有对应说明,地址如下:trac....
- Android FFmpeg + OpenGL ES YUV Player
-
1、FFmpeg解出YUV帧数据1.1方法介绍打开封装格式上下文...
- 基于WebRTC的Android移动端无线视频传输
-
摘要:视频传输技术在现代社会广泛应用,人们对其的要求也越来越高,其发展的趋势是方便、快捷、随时随地。传统的视频传输过于依赖线路,线路的走向限制了传输的很多可能,所以无线传输才是发展的方向。本文提出...
- 使用python爬取抖音app视频 python爬取抖音视频数据
-
记录一下如何用python爬取app数据,本文以爬取抖音视频app为例。编程工具:pycharm...
- Android IOS WebRTC 音视频开发总结(七七)-- WebRTC的架构和协议栈
-
本文主要介绍WebRTC的架构和协议栈(我们翻译和整理的,译者:litie),最早发表在【编风网】为了便于理解,我们来看一个最基本的三角形WebRTC架构(见下图)。在这个架构中,移动电话用“浏览器M...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- strcat (25)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- element style (30)
- dedecms模版 (53)
- vs打不开 (29)
- nmap (30)
- c 视频教程下载 (33)
- paddleocr (28)
- listview排序 (33)
- firebug 使用 (31)
- transactionmanager (30)
- characterencodingfilter (33)
- getmonth (34)
- commandtimeout (30)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)
- android studio 3 0 (34)
- android开发视频 (30)