浅谈React编程思想
React是Facebook推出的面向视图层开发的一个框架,用于解决大型应用,包括如何很好地管理DOM结构,是构建大型,快速Web app的首选方式。
React使用JavaScript来构建用户界面,因此可以说是一个用来构建用户界面的JavaScript库。
1、为什么使用 React?
React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。
1)简单:仅仅只要表达出应用程序在任一个时间点应该呈现的样子,当底层的数据变了,React会自动处理所有用户界面的更新。
2)声明式:数据变化后,与点击“刷新”按钮类似,但仅会更新变化的部分。
3)构建可组合的组件:React构建可复用的组件,事实上通过React唯一要做的事情就是构建组件,这得益于其良好的封装性,组件使代码复用、测试和关注分离更加简单。
2、对React认识的误区
1) React不是一个完整的MVC框架,最多是MVC中的V(View),甚至并不非常认可MVC开发模式;
2) React和Web Component不能相提并论,两者并不是完全的竞争关系,完全可以用React去开发一个真正的Web Component;
3) React不是一个新的模板语言,没有JSX的React也能工作。
3、React的原理
在Web开发中,总需要将变化的数据实时反应到用户界面上,这就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因。
React为此引入了虚拟DOM的机制:在浏览器端用JavaScript实现一套DOM API。基于React,所有的DOM操作都通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后将目前的整个DOM树和上次的DOM树进行对比,得到DOM树的区别,仅仅将变化的部分进行浏览器DOM更新。尽管每一次都要重新完整的虚拟DOM树,但因为虚拟DOM是内存数据,性能极高,而对实际DOM操作的仅仅是Diff部分,因此能达到提高性能的目的。此外,React能批处理虚拟DOM的刷新,在一个事件循环内的两次数据变化会被合并,如连续的先将节点内容从x变成y,然后又从y变成x,React会认为UI不发生任何变化。总之,在保证性能的同时,开发者将不再需要关注数据的变化如何更新到实际的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何render的,每做一点界面的更新,都可以认为刷新了整个页面,至于如何进行局部更新以保证性能,则是React框架要完成的事情。
以视频聊天应用为例:当收到一条新消息时,传统的开发过程需要知道是哪条数据,如何将新的DOM结点添加到当前DOM树上;而基于React,永远只需要关心数据整体,两次数据之间的UI如何变化,然后可以完全交给React框架去做,这大大降低了逻辑复杂性和开发难度,产生Bug的概率也更小。
有关虚拟DOM的详细介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/71171567
4、组件化
React以组件的方式去重新思考用户界面的构成,将用户界面上每一个功能相对独立的模块定义成组件,然后将小组件通过组合或嵌套的方式构成大组件,最终完成整体UI的构建。
MVC开发模式的思想:将模型—视图—控制器定义成不同的类,实现表现,数据,控制的分离。
组件化开发模式的思想:用户界面功能模块间的分离,完全是一个新思路,从功能的角度出发,将用户界面分成不同的组件,每个组件都独立封装。
1) 组件的特征:
① 可组合:一个组件可以包含其它组件,也可以嵌套在另一个组件内部。也就是说,一个复杂的UI可以拆分成多个简单的UI组件;
② 可重用:每个组件都是具有独立功能的,可用于多个场景;
③ 可维护:每个小组件仅包含自身的逻辑,更容易被维护。
2) 组件的属性:
① 组件名称首字母必须大写;
② 变量名用{}包裹,不能加双引号;
③ 获取属性的值:this.props.属性名;
④ 为元素添加css的class:className;
⑤ 设置组件的style属性:style={{width: this.state.witdh}}。
3) 组件的状态
React的一大创新,是将组件看成一个状态机。
① 设置一个初始状态:getInitialState(),注意:getInitialState()函数必须有返回值,可以是NULL或一个对象;
② 访问状态属性的值:this.state.属性名;
③ 更新状态,触发重新渲染用户界面:this.setState()。
4) 组件的生命周期
组件的生命周期分成三个状态:
① Mounting:已插入真实DOM
② Updating:正在被重新渲染
③ Unmounting:已移除真实DOM
React 为每个状态都提供了两种处理函数,will函数在进入状态之前调用,did函数在进入状态之后调用,共计五种处理函数:
① componentWillMount()
② componentDidMount()
③ componentWillUpdate(object nextProps, object nextState)
④ componentDidUpdate(object prevProps, object prevState)
⑤ componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数:
① componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
② shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
有关组件的生命周期的详细介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/71172783
5) 组件的嵌套
React是基于组件化的开发,组件化开发最大的优点是复用。实现复用的方式之一便是组件嵌套。
var MyBox = React.createClass({
render: function() {
return (
<div>
用户名:<Input type="text"></Input><br/>
密码:<Input type="password"></Input>
</div>
);
}
});
var Input = React.createClass({
render: function() {
return (
<input type={this.props.type} />
);
}
});
ReactDOM.render(
<MyBox />,
document.getElementById('content')
);
5、JSX语法
HTML直接写在JavaScript中,不加任何引号,就是JSX的语法,允许HTML与JavaScript的混写。
JSX允许直接在模板插 JavaScript变量。如果该变量是一个数组(直接的JavaScript数组或通过map()、filter()等返回的数组),则会展开数组的所有元素。
1) 直接的JavaScript数组:
var arr = [
<p key="1">Alice</p>,
<p key="2">Bruce</p>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('content')
);
2) 通过map()返回的数组:
var arr = ['Alice','Bruce'];
ReactDOM.render(
<div>
{
arr.map(function(item, index) {
return <p key={index}>{item}</p>
})
}
</div>,
document.getElementById('content')
);
6、显示数据
React让显示数据变得简单,当数据变化时,用户界面会自动同步更新。可以认为React组件就是简单的函数,接受 props 和 state作为参数,然后渲染出HTML。
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<input type="text" placeholder="Please enter your name!" />
{this.props.date.toString()}
</div>
);
}
});
setInterval(function() {
ReactDOM.render(
<HelloWorld date={new Date()} />,
document.getElementById('timeBox')
);
}, 1000);
React在用户界面中只改变了时间,任何在输入框输入的内容一直保留,React已经完成这个功能,不需要额外写任何代码。
限制:React组件只能渲染单个根节点,若想返回多个节点,它们必须被包含在同一个节点里。
注意:React中可以使用jQuery,但render()方法的第二个参数必须使用JavaScript原生的getElementById()方法,不能使用jQuery来获取DOM节点。
---------------------
原文:https://blog.csdn.net/zhouziyu2011/article/details/70664968
浅谈React编程思想的更多相关文章
- 【转】浅谈React、Flux 与 Redux
本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...
- 浅谈React
浅谈react react是什么?其官网给出了明确定义:A JavaScript library for building user interfaces,一个用于构建用户界面的JavaScript库 ...
- 浅谈Socket编程
浅谈Socket编程 说到Socket,想必大家会觉得陌生又熟悉.许多同学听说过Socket,但仅仅知道它翻译成中文叫做套接字,除此之外似乎并没有太多的了解了.那么今天我就来抛砖引玉地聊一聊Socke ...
- 浅谈React工作原理
浅谈React工作原理:https://www.cnblogs.com/yikuu/p/9660932.html 转自:https://cloud.tencent.com/info/63f656e0b ...
- 浅谈React数据流管理
引言:为什么数据流管理如此重要?react的核心思想就是:UI=render(data),data就是我们说的数据流,render是react提供的纯函数,所以用户界面的展示完全取决于数据层.这篇文章 ...
- 浅谈react的初步试用
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- 浅谈React虚拟DOM
为什么要使用虚拟DOM 因为浏览器的DOM渲染是非常消耗性能的,很低效,我们使用虚拟DOM是为了提高DOM的渲染性能: 什么是虚拟DOM 虚拟DOM就是把真实的DOM树通过createElement转 ...
- 浅谈 React、Flux 与 Redux
React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化利用 props 形成单向的数据流根据 state 的变化来更新 view利用虚拟 DOM 来提升渲染性能 ...
- React 编程思想翻译及学习笔记
第一步:把UI图按组件层次结构拆分开 FilterableProductTable (橙色): 包含整个例子 SearchBar (蓝色): 接收所有用户输入 ProductTable (绿色): 基 ...
随机推荐
- 解读 | 你真正理解什么是Cloud Native吗?
你能做到每周.每天甚至每个钟头向客户发布新特性吗?新加入的开发者能够在他们工作的第一天甚至面试阶段就能部署代码吗?部署新员工的代码后,你能因为确信应用程序运行正常而安然入睡吗?建立快速发布机制,包括支 ...
- PHP系列 | ThinkPHP5数据库迁移工具 migration
了解更多,请关注微信公众号 ThinkPHP5数据库迁移工具 migration 什么是Migration? migration用谷歌翻译是移民的意思,在PHP中我们将它理解为迁移,将Migratio ...
- 函数式接口, Collection等
Lambda 函数式接口 lambda 表达式的使用需要借助于 函数式接口, 也就是说只有函数式接口才可以将其用 lambda 表达式进行简化. 函数式接口定义为仅含有一个抽象方法的接口. 按照这个定 ...
- 微信小程序开发——文本框种输入手机号,点击获取验证码无反应的处理方法
异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...
- 爬虫中BeautifulSoup4解析器
CSS 选择器:BeautifulSoup4 和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会 ...
- spark streaming流式计算---监听器
随着对spark的了解,有时会觉得spark就像一个宝盒一样时不时会出现一些难以置信的新功能.每一个新功能被挖掘,就可以使开发过程变得更加便利一点.甚至使很多不可能完成或者完成起来比较复杂的操作,变成 ...
- WebGL学习笔记(七):输入和动画
目前为止,我们绘制出来的3D物体都是静止的,接下来我们需要让桌面上的小盒子可以根据我们按键(上下键)前进后退: 输入方面,监听按键和鼠标消息直接在document上添加对应的监听就行了: 动画这块,我 ...
- LeetCode_412. Fizz Buzz
412. Fizz Buzz Easy Write a program that outputs the string representation of numbers from 1 to n. B ...
- [LeetCode] 461. Hamming Distance 汉明距离
The Hamming distance between two integers is the number of positions at which the corresponding bits ...
- CSP2019-终章:afo生活的开始
出分了...退役了...449...afo了... 曾经立志不少于500的我...竟然450都没上... Orz初中的神仙学弟考了596... 接下来,是一种生活的结束,也是另一种生活的开始... 我 ...