React的理解以及特性
一、是什么
React,用于构建用户界面的 JavaScript 库,提供了 UI 层面的解决方案
遵循组件设计模式、声明式编程范式和函数式编程概念,以使前端应用程序更高效
使用虚拟DOM
来有效地操作DOM
,遵循从高阶组件到低阶组件的单向数据流
帮助我们将界面成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,构成整体页面
react
类组件使用一个名为 render()
的方法或者函数组件return
,接收输入的数据并返回需要展示的内容
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
} ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('hello-example')
);
上述这种类似 XML
形式就是JSX
,最终会被babel
编译为合法的JS
语句调用
被传入的数据可在组件中通过 this.props
在 render()
访问
二、特性
React
特性有很多,如:
- JSX语法
- 单向数据绑定
- 虚拟DOM
- 声明式编程
- Component
着重介绍下声明式编程及Component
声明式编程
声明式编程是一种编程范式,它关注的是你要做什么,而不是如何做
它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件
如实现一个标记的地图:
通过命令式创建地图、创建标记、以及在地图上添加的标记的步骤如下:
// 创建地图
const map = new Map.map(document.getElementById('map'), {
zoom: 4,
center: {lat,lng}
}); // 创建标记
const marker = new Map.marker({
position: {lat, lng},
title: 'Hello Marker'
}); // 地图上添加标记
marker.setMap(map);
而用React
实现上述功能则如下:
<Map zoom={4} center={lat, lng}>
<Marker position={lat, lng} title={'Hello Marker'}/>
</Map>
声明式编程方式使得React
组件很容易使用,最终的代码简单易于维护
Component
在React
中,一切皆为组件。通常将应用程序的整个逻辑分解为小的单个部分。我们将每个单独的部分称为组件
组件可以是一个函数或者是一个类,接受数据输入,处理它并返回在UI
中呈现的React
元素
函数式组件如下:
const Header = () => {
return(
<Jumbotron style={{backgroundColor:'orange'}}>
<h1>TODO App</h1>
</Jumbotron>
)
}
类组件(有状态组件)如下:
class Dashboard extends React.Component {
constructor(props){
super(props); this.state = { }
}
render() {
return (
<div className="dashboard">
<ToDoForm />
<ToDolist />
</div>
);
}
}
一个组件该有的特点如下:
- 可组合:个组件易于和其它组件一起使用,或者嵌套在另一个组件内部
- 可重用:每个组件都是具有独立功能的,它可以被使用在多个UI场景
- 可维护:每个小的组件仅仅包含自身的逻辑,更容易被理解和维护
三、优势
通过上面的初步了解,可以感受到React
存在的优势:
- 高效灵活
- 声明式的设计,简单使用
- 组件式开发,提高代码复用率
- 单向响应的数据流会比双向绑定的更安全,速度更快
React的理解以及特性的更多相关文章
- React劲爆新特性Hooks 重构去哪儿网火车票PWA
React劲爆新特性Hooks 重构去哪儿网火车票PWA 获取课程资料链接:点击这里获取 本课程先带你细数最近一年来React的新特性,如Hooks.Redux API,让你从头理解Hooks对传统R ...
- 深入理解Ember-Data特性(上)
写在前面 最近比较忙,换了新工作还要学习很多全新的技术栈,并给自己找了很多借口来不去坚持写博客.常常具有讽刺意味的是,更多剩下的时间并没有利用而更多的是白白浪费,也许这就是青春吧,挥霍吧,这不是我想要 ...
- [译文]React v16(新特性)
[译文]React v16(新特性) 查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能,包括: fragments (返回片段类型) error bo ...
- React 16.x 新特性思维导图
React 16版本相对于以前的版本做了很大的改动,下面是我整理的React 16.x 新特性的思维导图文件,欢迎围观和指导:
- 对React的理解
转自:http://www.cocoachina.com/webapp/20150721/12692.html 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了R ...
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- CSS深入理解流体特性和BFC特性下多栏自适应布局
一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...
- React入门理解demo
1.React文档结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- React Context 理解和使用
写在前面 鉴于笔者学习此内容章节 React官方文档 时感到阅读理解抽象困难,所以决定根据文档理解写一篇自己对Context的理解,文章附带示例,以为更易于理解学习.更多内容请参考 React官方 ...
- 深入理解Ember-Data特性(下)
写在前面 最近比较忙,换了新工作还要学习很多全新的技术栈,并给自己找了很多借口来不去坚持写博客.常常具有讽刺意味的是,更多剩下的时间并没有利用而更多的是白白浪费,也许这就是青春吧,挥霍吧,这不是我想要 ...
随机推荐
- [学习笔记]PostgreSQL数据库的安装和配置
安装 安装源 yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat ...
- setting.json 20210825 更新
vue代码格式化思路 { "pasteImage.path": "${currentFileNameWithoutExt}_Images/", "up ...
- HiSi 3516CV500 NNIE(Neural Network Inference Engine) 摸鱼记录(3) ---真机调试(实例分析)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- FFmpeg 基本操作摘要(一) (转流、解码、编码)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- 瑞云科技荣获全国电子信息行业专精特新“最具创新价值 TOP20”!
"专精特新",从概念提出到写入政府工作报告走过了十年.这十年来我国促进中小企业发展力度之大.出台政策之密集.含金量之高前所未有,足见走专精特新发展之路深入人心."专精特新 ...
- WebView库功能完善
目录介绍 01.loadUrl到底做了什么 02.触发加载网页的行为 03.webView重定向怎么办 04.js交互的一点知识分享 05.拦截缓存如何优雅处理 06.关于一些问题和优化 07.关于一 ...
- 记录--使用 JS 实现基本的截图功能
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 思路分析 在开始动手之前,分析一下整个功能的实现过程: 根据图片大小创建 canvas1 画布,并将原图片直接定位在 canvas1 上: ...
- ChatTuGraph:通过大模型“与图对话”
使用SQL(Structured Query Language)对数据库/数据仓库进行查询分析操作,几乎成了研发工程师和数据分析师的"家常便饭",然而要写出高效.清晰.优雅的SQL ...
- 手把手带你用香橙派AIpro开发AI推理应用
本文分享自华为云社区<如何基于香橙派AIpro开发AI推理应用>,作者:昇腾CANN. 01 简介 香橙派AIpro开发板采用昇腾AI技术路线,接口丰富且具有强大的可扩展性,提供8/20T ...
- Java实现动态数组【数据结构与算法】
1.数组 类型固定.长度固定 连续的内存空间 顺序存储.随机读取 查询快.新增删除慢.最好初始化的时候就指定数组大小.这样就可以避免一定的数组扩容出现的内存消耗. import java.util.A ...