React
✍ dations ◷ 2025-07-10 20:03:57 #React
React(也称为React.js或ReactJS)是一个自由及开放源代码的前端JavaScript工具库, 用于基于UI组件构建用户界面。
它由Meta(前身为Facebook)和由个人开发者和公司组成的社群维护。React可用作开发具有Next.js等框架的单页、手机或服务器渲染应用程序的基础。然而,React只专注状态管理和将状态渲染到DOM,因此创建React应用程序通常需要使用额外的工具库来进行路由实现,以及某些客户端功能。
以下是使用JSX和JavaScript在HTML中使用React的基本示例。
import React from "react";const Greeting = () => { return ( <div className="hello_world"> <h1> Hello, world! </h1> </div> );};export default Greeting;
Greeting函数是一个React组件,渲染的结果为“Hello, world”。
在网A浏览器中显示时,结果将是以下内容的渲染:
<div class="hello_world"> <h1>Hello, world!</h1></div>
功能
宣告式语法
React采取宣告式程序撰写范型。开发人员为应用程序的每个状态设计视图,React会在资料更改时更新和呈现组件。这与命令式程序撰写不同。
React代码由称为组件的实体组成。这些组件是可重复利用的,并且必须遵循大写驼峰命名法(Pascal Case)作为其命名规则,也就是大写版本的驼峰式命名法(camelCase)在src文件夹中形成。可以使用React DOM工具库将组件渲染到DOM中的特定元素。渲染组件时,可以通过“props”在组件之间传递参数值:
import React from "react";import Tool from "./Tool";const Example = () => { return ( <> <div className="app"> <Tool name="Gulshan" /> </div> </> );}; export default Example;
在上面的示例中,值为“Gulshan”的name属性已从Example
组件传递到Tool
组件。
此外,return
部分被包装在一个名为return
的标签中,因为只能返回一个值。所以所有JSX元素和组件都绑定到一个标签中。
在React中宣告组件的两种主要方式是通过函数组件和基于类别组件。
函数组件用一个函数声明,然后返回一些JSX。
const Greeter = () => <div>Hello World</div>;
类别组件
基于类的组件是使用ES6类声明。
class ParentComponent extends React.Component { state = { color: 'green' }; render() { return ( <ChildComponent color={this.state.color} /> ); }}
类别组件都是关于类别的使用和生命周期方法的,而功能组件有Hooks来处理在React中编写代码时出现的状态管理和其他问题。
另一个值得注意的特性是使用虚拟文档对象模型或虚拟DOM。React创建一个存储器数据结构暂存,计算结果差异,然后有效地更新浏览器显示的DOM。这个过程称为reconciliation。这允许程序工程师撰写代码,就好像每次更改都会渲染整个页面,而React只渲染实际更改的子组件。这种选择性渲染提供了主要的性能提升。节省了重新计算CSS样式、页面排版和渲染整个页面的工作量。
基于类别组件的生命周期方法使用一种挂钩(Hooking)形式,允许在组件生命周期内的设置点执行代码。
JSX或JavaScript语法扩展,是JavaScript语言语法的扩展。 在外表上与HTML类似,JSX提供了一种使用许多开发人员熟悉的语法来构建组件渲染的方法。React组件通常使用JSX撰写,尽管它们并非必须如此(组件也可以使用纯JavaScript撰写)。JSX类似于Facebook为PHP创建的另一个扩展语法,称为XHP。
JSX代码示例:
class App extends React.Component { render() { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> ); }}
HTML之外的架构
React的基本架构不仅适用于在浏览器中呈现HTML。例如,Facebook有渲染到<canvas>
标签, Netflix 和 PayPal 使用通用加载于服务器和客户端上渲染相同的HTML。
Hooks是让开发人员从函数组件中“钩入(Hook into)”React状态和生命周期特性的函数。Hooks在类别组件无法作用——它们让你在没用类别组件情况下使用React。
React提供了一些内置的Hook,例如 useState
,useContext
、useReducer
、useMemo
与useEffect
。 其他的记录在Hooks API参考中。 useState
与useEffect
,也就是最常用,分别用于状态和副作用的控制。
下面有一些Hooks规范 描述了钩子(Hooks)的特征代码模式,也是现今使用React处理状态方式。
虽然这些规范不能在执行时强制执行,但可以设置代码分析工具(例如linter)来侦测开发过程中的许多错误。
这些规范适用于Hooks的使用和自定义Hooks的实现, 也就是可能会调用其他Hooks。
React并不刻意提供一个完整的“应用程序工具库”。专为构建用户界面而设计,因此不包含一些开发人员可能认为构建应用程序所必需的许多任务具。这也允许选择开发人员喜欢的任何工具库来完成诸如执行网络访问或本地资料存储等任务。随着工具库的成熟,常见的使用模式已经出现。
为了支持React的单向资料流概念(可能与 AngularJS 的双向资料流形成对比),Flux架构被开发为流行的模型-视图-控制器架构的替代方案。Flux具有通过中央调度程序发送到存储区(Store)的操作,并且对存储区的更改被传递回视图。 当与React一起使用时,这种传递是通过组件属性完成的。从Flux的概念开始,Flux就被Redux和MobX等工具库所取代。
Flux可以被认为是观察者模式的一种变体。
Flux架构下的React组件不应直接修改传递给它的任何props,而应传递回调函数,这些回调函数创建由调度程序发送的用于修改存储的操作。动作(Action)是一个对象,负责描述发生的事情:例如,描述一个用户“关注”另一个用户的动作可能包含用户ID、目标用户ID和类型USER_FOLLOWED_ANOTHER_USER
。可以将存储视为模型,可以根据从调度程序接收到的操作来改变自己。
这种模式有时表示为“属性(Properties)向下流动,动作(Actions)向上流动”。Flux的许多实现从一开始就被创建了,也许最著名的是Redux,它具有单一存储,通常称为单一资料源。
可以通过核心团队讨论论坛追踪项目状态。 但是,对React的重大更改会通过React存储库的未来问题和拉取请求(Pull request)。 这使React社群能够就新的潜在功能、实验性API和JavaScript语法改进提供反馈。
React由Facebook的软件工程师Jordan Walke创建,他发布了一个名为“FaxJS”的React早期原型。 他受到XHP(一个PHP的HTML组件库)的影响。于2011年首次部署在Facebook的News Feed上,随后于2012年部署在Instagram上。 于2013年5月在JSConf US宣布开放源代码。
React Native 于2015年2月在Facebook的React Conf上宣布,并于2015年3月开放源代码,支持使用React进行原生Android、iOS和UWP开发。
2017年4月18日,Facebook发布了React Fiber,这是一套新的内部渲染算法,与React的旧渲染算法Stack不同。React Fiber将成为React工具库未来任何改进和功能开发的基础。 使用React程序撰写的实际语法不会改变;只有语法的执行方式发生了变化。 React的旧渲染系统Stack是在不了解系统对动态变化的关注点的时候开发的。Stack绘制复杂动画的速度很缓慢,例如,试图在一个块中完成所有动画。Fiber将动画分解为可以分布在多个帧上的片段。同样,一个页面的结构可以分解为可以单独维护和更新的片段。JavaScript函数和虚拟DOM对像被称为“纤程”,每个都可以单独操作和更新,从而实现更流畅的屏幕渲染。
2017年9月26日,React 16.0向公众发布。
2019年2月16日,React 16.8向公众发布。 该版本导入了React Hooks。
2020年8月10日,React团队宣布了React v17.0的第一个候选版本,值得关注的是第一个主要版本没有对面向React开发人员的API进行重大更改。
2013年5月React的首次公开发布使用了Apache License 2.0。2014年10月,React 0.12.0将其更换为3言条款BSD许可条欺,并新增了一个单独的专利许可文件,允许使用与该软件相关的任何Facebook专利:
The license granted hereunder will terminate, automatically and without notice, for anyone that makes any claim (including by filing any lawsuit, assertion or other action) alleging (a) direct, indirect, or contributory infringement or inducement to infringe any patent: (i) by Facebook or any of its subsidiaries or affiliates, whether or not such claim is related to the Software, (ii) by any party if such claim arises in whole or in part from any software, product or service of Facebook or any of its subsidiaries or affiliates, whether or not such claim is related to the Software, or (iii) by any party relating to the Software; or (b) that any right in any patent claim of Facebook is invalid or unenforceable.
这个不同以往的条款在React用户社群引起了一些争议和争论,因为可以被解释为许可Facebook在许多情况下撤销许可,例如,如果Facebook起诉被许可人通过发布动作来提示他们采取“其他行动”在博客或其他地方。许多人担心Facebook可能会不公平地利用终止条款,或者将React集成到产品中可能会使新创公司未来的收购变得复杂。
根据社群反馈,Facebook于2015年4月更新了专利许可,以减少歧义并更加宽容:
The license granted hereunder will terminate, automatically and without notice, if you (or any of your subsidiaries, corporate affiliates or agents) initiate directly or indirectly, or take a direct financial interest in, any Patent Assertion: (i) against Facebook or any of its subsidiaries or corporate affiliates, (ii) against any party if such Patent Assertion arises in whole or in part from any software, technology, product or service of Facebook or any of its subsidiaries or corporate affiliates, or (iii) against any party relating to the Software. A "Patent Assertion" is any lawsuit or other action alleging direct, indirect, or contributory infringement or inducement to infringe any patent, including a cross-claim or counterclaim.
Apache软件基金会认为这种许可协议安排与其许可政策不兼容,因为它“将风险转嫁给我们软件的下游消费者,而不是有利于权利拥有者,而不是权利被被许可者,从而违反了我们作为通用捐助者的Apache法律政策”和“不是 中的子集,它们不能作为 再许可”。 2017年8月,Facebook驳回了Apache基金会对下游的担忧,并拒绝重新考虑他们的许可协议。 接下来的一个月,WordPress 决定将其Gutenberg和Calypso项目从React中移除。
2017年9月23日,Facebook宣布下周将根据标准MIT许可协议重新许可Flow、Jest、React和Immutable.js;该公司表示,React是“网络开放源代码软件广泛生态系统的基础”,他们不想“因为非技术原因阻碍进展”。
2017年9月26日,React 16.0.0以MIT许可协议发布。 MIT许可协议更改也已通过React 15.6.2向后移植到15.x版本线。
相关
- 失效率失效率(英语:Failure rate),也称故障率,是一个工程系统或零件失效的频率,单位通常会用每小时的失效次数,一般会用希腊字母λ表示,是可靠度工程中的重要参数。系统的失效率一般会随着
- 三段论逻辑谬误直言三段论是所有前提都是直言命题的演绎推理。例子:前两个命题叫做前提。如果这个三段论是有效的,这两个前提逻辑上蕴含了最后的命题,它叫做结论。结论的真实性建立在前提的真
- 那拉提瓦府 small(陶公府)/small那拉提瓦府(泰语:จังหวัดนราธิวาส,皇家转写:Changwat Narathiwat,泰语发音:)是泰南三府之一,邻近府份为泰国的也拉府、北大年府、和马来西亚的吉兰丹州。华人称之为
- 米克尔·奥森柏格米克尔·查理·奥森柏格(Michel Charles Oksenberg,1938年-2001年),美国政治学者,长期研究中国,为美国政府重要的中国事务专家。1960年毕业于斯沃斯莫尔学院,在哥伦比亚大学取得硕士
- 陈虎 (医师)陈虎(1962年2月17日-2019年7月24日),男,生于重庆,原籍河南洛阳。中国造血干细胞移植专家。曾任解放军总医院第五医学中心全军造血干细胞研究所所长、教授。1962年2月17日出生于重
- 哈米特方程哈米特方程(Hammett方程)是一个描述反应速率及平衡常数和反应物取代基类型之间线性自由能关系的方程。所研究的反应物是苯甲酸以及间位和对位取代的苯甲酸。通过测定这些苯甲
- 欧阳平凯欧阳平凯(1945年8月16日-),男,湖南湘潭人,中国生物化工专家,中国工程院院士,曾任南京工业大学校长。1981年,毕业于清华大学,获工学硕士学位。2001年,当选中国工程院院士。2001年8月至20
- 王满堂王满堂,中国明朝女性,霸州民王智的女儿,明武宗正德帝朱厚照的宠姬。王满堂姿色艳美,曾经参与选美,但落选。回家后深以为耻,不肯嫁人,又数感异梦,自称必有赵万兴者来娶她,其人贵不可言
- 卡拉基火山坐标:37°55′0″S 71°27′0″W / 37.91667°S 71.45000°W / -37.91667; -71.45000卡拉基火山是智利的火山,位于该国中部,由比奥比奥大区负责管辖,属于安第斯山脉的一部分,海拔
- 2022年2月逝世人物列表2022年2月逝世人物列表,是用于汇总2022年2月期间逝世人物的列表。