网站首页 > 技术文章 正文
React已经成为当前最流行的JavaScript框架。React的关键元素有哪些可以使它如此受欢迎?让我们潜入。
在现实世界中做出反应
由Facebook创建的React最初于2013年发布。React持续增长势头,直到它看起来像2017年将在许可方面遇到困难。Facebook坚持为开发者创造潜在的知识产权问题的BSD +专利许可证。幸运的是,在2017年9月,Facebook 根据更为可接受的MIT许可证对其进行了退款并重新授予了React 许可。目前的版本是16.2。
像其他流行的框架一样,React是一个免费的,未经许可的图书馆,因此没有完美的使用统计数据,但是我们可以通过几个地方了解整体采用情况。它在GitHub上拥有超过88万颗星,并且每月下载超过700万npm。当然,这些流量中的一部分可能来自开发机器或镜像,但这些数据很好地反映了图书馆的普及程度。
反应统计
GitHub上超过88K星
每月下载超过700万次下载
React于2016年1月每月下载量达到100万次下载,并且自那时以来一直稳步攀升,到2017年底达到700万。尽管2017年12月下降,2018年1月它的备份量超过750万次。
下载包裹“反应”2016-2017的数据 - npm-stat.com的数据
核心概念
React有一些独特的核心概念。它有一个虚拟DOM,JSX组件,输入属性和道具。另外,每个React组件都有一个状态和一个生命周期,我们将进入。
React核心概念
Virtual DOM
JSX
Components
Props
State
Lifecycle
虚拟DOM
虚拟DOM就像DOM一样是一个节点树。如果您熟悉DOM在网络浏览器中的工作方式,那么将很容易理解虚拟DOM。它非常相似,但都是虚拟的。有一组元素,属性和内容作为具有属性的JavaScript对象存在。当我们调用一个渲染函数 - 并且每个React组件都有一个渲染函数 - 它实际上是从该React组件创建一个节点树,无论它是否只是一个单独的组件,还是我们渲染子组件。它列出了整棵树。无论何时更新状态或更改组件内的任何内容,每当数据模型发生更改时,它都会更新相同的树。
React分三步更新真实的DOM。无论什么时候改变了,虚拟DOM都会重新渲染。然后计算旧虚拟DOM和新虚拟DOM之间的差异。然后从那里,真正的DOM将根据这些变化进行更新。不必一直使用真正的DOM,这非常昂贵,而是直到我们绝对需要更新DOM为止。那时候,我们会继续进行那么昂贵的通话。
JSX
JSX正式是一种类似XML的语法,与HTML很接近,但不完全是HTML。它实际上是带有HTML的JavaScript。它实际上就是这样的语法糖:
react.createElement(component, props, ...children)
而不是使用上面示例中的格式,我们将使用下面示例中使用标签MyButton显示的更简单的格式。
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
变
React.createElement(
MyButton,
{ color: 'blue', shadowSize: 2 },
'Click Me'
)
这一切都源自react.createElement。我们不需要手动创建元素,而是MyButton具有几个不同属性的组件 ,并将它们传递给它。我们不必处理创建元素,然后定义标记,然后传递所有属性和类似的东西。
组件
React让我们将用户界面分成独立的可重用片段。组件就像JavaScript函数一样。我们有一个任意数量的输入,设置道具,然后我们返回React元素。我们总是返回一个渲染函数,其中包含我们希望显示的元素。从一开始就非常简单,但我们可以通过它快速获得进步。渲染函数在这里非常重要,因为每个组件都有一个渲染函数。例如,我们将在这里看到我们有这个功能 Welcome(props)。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
因为我们也可以把它写 @class Welcome延伸 React.Component,如果我们想工作多一点的带班的ES6方式。
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
在第一个例子中,我们返回简单的HTML元素。在ES6的例子中,我们有同样的东西,但是渲染,这只是一个更多的语法抛出回传一个HTML元素。
Props
Props是什么给我们的组件和属性的整体属性。这就是我们传递数据的方式。这是我们如何处理各种不同的属性。正如我们在这里看到的,在这个例子中,我们有购物清单名称,我们在这里传入一个名称,并且this.props.name在渲染此特定组件时我们可以使用 。这是一种传入和传出数据的简单方法。
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Bananas</li>
<li>Cereal</li>
<li>Cabbage</li>
</ul>
</div>
);
}
}
每个组件都有一个状态,并且它实际上也管理着它自己的状态。这可以在我们的代码中提取和设置。作为开发人员,我们实际上负责更新和处理状态。在下面的例子中,我们在这里看到,在开始的时候,我们在构造函数中创建了这个时钟组件 this.state。我们传递一个新的日期,然后我们可以在渲染函数中实际输出。我们可以轻松地使用状态来执行常见的任务,如设置状态和轻松提取状态。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
每个组件都有一个我们可以控制的特定生命周期。我们有安装,更新和卸载功能。我们有不同的生命周期挂钩的完整列表,我们也可以订阅。例如,构造函数可以帮助我们设置初始状态。然后,从那里,我们有其他事件,我们可以挂钩。
安装
constructor()
componentWillMount()
render()
更新
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
卸载
componentDidUpdate()
componentWillUnmount()
入门
开始使用React的最简单方法是通过create-react-app CLI。这是官方的React CLI。然后我们可以创建一个新的应用程序,并引导整个应用程序。我们只是使用 create-react-app my-app。然后,我们继续前进,并解决问题 npm start。这个命令只是运行一个自定义的npm脚本来启动应用程序并为我们设置一个服务器,所以我们可以开始处理应用程序本身。
# Install create-react-app – React’s CLI
$ npm install –g create-react-app
# Create our app
$ create-react-app my-app
# Start our app
$ cd my-app
$ npm start
下一步是什么?
我们很快就涵盖了很多内容,以呈现React的“品味”,而且我们还没有做更多的事情。但是,这应该足以让每个人都高度关注我们在React中可用的内容。
现在我们已经快速浏览了React,React是您的正确选择吗?还有其他非常流行的框架 - 特别是Angular和Vue。虽然Vue和React有一些相似之处,但Angular却有很大不同。无论这是否是您的正确选择取决于许多因素。
猜你喜欢
- 2025-05-23 React 18:新玩具、新陷阱以及新可能性
- 2025-05-23 第395期Web技术日报(2016-01-22) 使用 React 的一些经验
- 2025-05-23 React 组件渲染慢到崩溃?5 大实战技巧让页面流畅度飙升 80%!
- 2025-05-23 React 入门:从 JavaScript 到 React
- 2025-05-23 01 React入门
- 2025-05-23 前端跳槽突围课:React18底层源码深入剖析(21章完整版)
- 2025-05-23 突发!React官方正式弃用CRA!Next.js、Remix、Vite迁移指南
- 2025-05-23 用JavaScript开发移动原生应用,Facebook正式开源React Native!
- 2025-05-23 性能焦虑!前端人必看!5 个 React 组件优化神技! 颠覆你的认知!
- 2025-05-23 开始学习React - 概览和演示教程
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 600℃几个Oracle空值处理函数 oracle处理null值的函数
- 592℃Oracle分析函数之Lag和Lead()使用
- 580℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 576℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 572℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 565℃【数据统计分析】详解Oracle分组函数之CUBE
- 551℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 546℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)