锐客网

  1. 首页 > 睿知 > it技术 > >

ReactJS入门和版本介绍 – ReactJS实战教程

reactreact入门介绍

ReactJS教程提供了ReactJS的基本和高级概念。目前，ReactJS是最流行的JavaScript前端库之一，拥有强大的基础和庞大的社区。
ReactJS是一个声明性的、高效的、灵活的JavaScript库，用于构建可重用的UI组件。它是一个开源的、基于组件的前端库，只负责应用程序的视图层。它最初由Facebook开发和维护，后来用于WhatsApp和Instagram等产品。
我们的ReactJS教程包含了所有有助于学习ReactJS的主题。ReactJS介绍、ReactJS特性、ReactJS安装、ReactJS组件、ReactJS状态、ReactJS属性props、ReactJS表单、ReactJS事件、ReactJS动画等等。
为什么我们使用ReactJS？ReactJS的主要目标是开发用户界面(UI)，以提高应用程序的速度。它使用了虚拟DOM (JavaScript对象)，提高了应用程序的性能。我们可以在客户端和服务器端以及其他框架上使用ReactJS。它使用组件和数据模式来提高可读性，并帮助维护更大的应用程序。
ReactJS基本概念ReactJS是一个声明性的、高效的、灵活的JavaScript库，用于构建可重用的UI组件。它是一个开源的、基于组件的前端库，只负责应用程序的视图层。它是由Jordan Walke创建的，他是Facebook的一名软件工程师。它最初是由Facebook开发和维护的，后来被用于WhatsApp和Instagram等产品。2011年，Facebook在其新闻推送部分开发了ReactJS，但在2013年5月向公众发布。
【ReactJS入门和版本介绍 – ReactJS实战教程】如今，大多数网站都是使用MVC(模型-视图-控制器)架构构建的。在MVC架构中，React是代表视图的“V”，而架构是由Redux或Flux提供的。
ReactJS应用程序由多个组件组成，每个组件负责输出一小段可重用的HTML代码。组件是React应用程序的核心。这些组件可以与其他组件嵌套，从而允许用简单的构建块构建复杂的应用程序。ReactJS使用基于虚拟DOM的机制来填充HTML DOM中的数据。虚拟DOM的工作速度很快，因为它只更改单个DOM元素，而不是每次都重新加载完整的DOM。
为了创建React应用程序，我们编写了对应于各种元素的React组件。我们将这些组件组织在定义应用程序结构的更高级别组件中。例如，我们采用的表单包含许多元素，比如输入字段、标签或按钮。我们可以将表单中的每个元素都写成React组件，然后将其合并为更高级别的组件，即，表单组件本身。表单组件将指定表单的结构以及其中的元素。
为什么学习ReactJS？今天，市场上有很多JavaScript框架(如angular、node)，但是React还是进入了市场，并在其中流行起来。前面的框架遵循传统的数据流结构，该结构使用DOM(文档对象模型)。DOM是浏览器每次加载web页面时创建的对象。它在后台动态地添加或删除数据，并且在完成任何修改之后，每次为同一个页面创建一个新的DOM。这种DOM的重复创建会造成不必要的内存浪费，并降低应用程序的性能。
因此，一个新的技术ReactJS框架的发明，消除了这个缺点。ReactJS允许您将整个应用程序划分为不同的组件。ReactJS仍然使用相同的传统数据流，但它不是直接在浏览器的文档对象模型(DOM)上立即操作; 相反，它在一个虚拟DOM上操作。它的意思是，在对数据进行更改后，不再在浏览器中操作文档，而是解析构建的DOM上的更改并完全在内存中运行。在更新了虚拟DOM之后，React决定对实际浏览器的DOM做哪些更改。React虚拟DOM完全存在于内存中，是web浏览器DOM的一个表示。因此，在编写React组件时，我们并没有直接向DOM写入; 相反，我们编写的虚拟组件会将react转换为DOM。
React版本React的完整发布历史记录如下，你也可以在GitHub上看到最新版本的完整文档。

编号 版本 发布日期 重大的改变
1. 0.3.0 29/05/2013 首次公开发行
2. 0.4.0 20/07/2013 支持注释节点< div> {/* */}< /div> ，改进了服务器端呈现api，删除了React.autoBind，支持key prop，改进表单，修复bug。
3. 0.5.0 20/10/2013 改善内存使用，支持选择和组合事件，支持getInitialState和getDefaultProps的混合，添加React.version和React.isValidClass，改进了Windows的兼容性。
4. 0.8.0 20/12/2013 增加了对行和cols的支持，延迟和异步，循环< 音频> 和< 视频> ，自动更正属性。增加onContextMenu事件，升级jstransform和esprima-fb工具，升级browserify。
5. 0.9.0 20/02/2014 增加了对crossOrigin，下载和hrefLang, mediaGroup和，沙箱，无缝，和srcDoc，范围属性的支持，增加了任何，arrayOf，组件，oneOfType，渲染，形状来React.PropTypes增加了对onMouseOver和onMouseOut事件的支持，增加了对< img> 元素的onLoad和onError的支持。
6. 0.10.0 21-03-2014 增加了对srcSet和textAnchor属性的支持，增加了对不可变数据的更新功能，确保所有的void元素不会插入结束标签。
7. 0.11.0 17/07/2014 改进了SVG支持，标准化了e。查看事件，更新$apply命令，添加对名称空间的支持，添加新的transformWithDetails API，包括在dist/下预先构建的包，MyComponent()现在返回一个描述符，而不是实例。
8. 0.12.0 21/11/2014 添加了扩展操作符({…})来反对这个。transferPropsTo，增加了对acceptCharset, classID, manifest HTML属性，response .addons的支持。batchedUpdates添加到API， @jsx React。DOM不再需要，修复了CSS转换的问题。
9. 0.13.0 10/03/2015 在0.12中警告的废弃模式不再工作，ref解析顺序已经改变，删除了属性。_pendingState这。_rootNodeID，支持ES6类，添加了API response . finddomnode(组件)，支持迭代器和不可变js序列，添加了新的特性response .addons。createFragment,弃用React.addons.classSet。
10. 0.14.1 29/10/2015 增加了对srcLang、默认属性、kind属性和color属性的支持，确保了对DOM节点的legacy .props访问，固定了scryRenderedDOMComponentsWithClass，增加了response – DOM .js。
11. 15.0.0 07/04/2016 初始渲染现在使用文档。createElement不再生成HTML，不再有额外的< span> s，改进的SVG支持，ReactPerf.getLastMeasurements()是不透明的，引入了新的警告，修复了多个小内存泄漏，React DOM现在支持引用和配置文件的HTML属性和cssFloat、gridRow和gridColumn CSS属性。
12. 15.1.0 20/05/2016 修正一个批量错误，确保使用最新的对象分配，修正回归，删除合并工具的使用，重命名一些模块。
13. 15.2.0 01/07/2016 包括组件堆栈信息，在安装时停止验证props属性，添加response .proptypes。符号，将onLoad处理添加到< link>，将onError处理添加到< source>元素，添加isRunning()API，修复性能回归。
14. 15.3.0 30/07/2016 增加React.PureComponent，修复嵌套服务器渲染的问题，添加xmlns、xmlnsXlink来支持SVG属性和referrerPolicy到HTML属性，更新响应Perf插件，修复ref的问题。
15. 15.3.1 19/08/2016 改善开发构建的性能，清除内部钩子，升级fbjs，改善React的启动时间，修复服务器渲染中的内存泄漏，修复React测试渲染器，将trackedTouchCount不变变量更改为console.error。
16. 15.4.0 16/11/2016 React包和浏览器构建不再包括React DOM、改进的开发性能、修复偶尔的测试失败、更新batchedUpdates API、React Perf和reacttestrener .create()。
17. 15.4.1 23/11/2016 重构变量赋值，固定事件处理，浏览器与AMD环境的固定兼容性。
18. 15.4.2 06/01/2017 修正了构建问题，增加了丢失的包依赖，改进了错误消息。
19. 15.5.0 07/04/2017 添加了反应物-dom/test-utils，删除了peerDependencies，修复了闭包编译器的问题，为React添加了一个弃用警告。createClass和作出React.修正了Chrome的bug。
20. 15.5.4 11/04/2017 通过在浅渲染器上暴露batchedUpdates来修复与酶的兼容性，更新版本的prop-type，修复反应-添加-创建-片段包以包含松动-环境转换。
21. 15.6.0 13/06/2017 在样式属性和网格样式属性中添加对CSS变量的支持，修复AMD对依赖于react的插件的支持，删除不必要的依赖，为react添加一个弃用警告。createClass和作出React.DOM工厂帮手。
22. 16.0.0 26/09/2017 通过引入“错误边界”来改进错误处理，React DOM允许传递非标准属性，对setState行为进行细微更改，删除与Add .js build的response，添加React。将createClass作为create- response -class, React。PropTypes作为prop-type, React。DOM作为反应物- DOM -工厂，改变调度和生命周期方法的行为。
23. 16.1.0 9/11/2017 停止Bower发布，修正UMD构建中一个意外的额外全局变量，修正onMouseEnter和onMouseLeave触发，修正< textarea> 占位符，删除未使用的代码，添加丢失的包。json依赖，添加对React DevTools的支持。
24. 16.3.0 29/03/2018 添加一个新的官方支持的上下文API，添加新的packagePrevent无限循环时试图渲染门户与SSR，修复这个问题。状态，修复一个IE/Edge问题。
25. 16.3.1 03/04/2018 前缀私有API，修复开发模式下的性能回归和错误处理bug，添加对等依赖，修复在IE11中使用Fragment时的假阳性警告。
26. 16.3.2 16/04/2018 修复IE崩溃，修复用户定时测量中的标签，添加UMD构建，通过嵌套提高unstable_observedBits API的性能。
27. 16.4.0 24/05/2018 添加对指针事件规范的支持，添加指定proptype的能力，修正读取上下文，修正getDerivedStateFromProps()支持，修正testInstance。父崩溃，添加React.用于测量性能的unstable_Profiler组件，更改内部事件名称。
28. 16.5.0 05/09/2018 添加对React DevTools Profiler的支持，优雅地处理更多边缘情况下的错误，添加response -dom/profiling，为浏览器添加onAuxClick事件，为鼠标事件添加movementX和movementY字段，为指针事件添加tangentialPressure和twist字段。
29. 16.6.0 23/10/2018 添加对contextType、支持优先级级别、延续和包装回调的支持，改进回退机制，修复iOS Safari上的灰色覆盖，为代码分割组件添加React.lazy()。
30. 16.7.0 20/12/2018 修复React的性能。延迟加载组件，卸载时清除字段以避免内存泄漏，用SSR修复bug，修复性能退化。
31. 16.8.0 06/02/2019 添加Hook，添加reacttestrender .act()和reacttestutil .act()进行批量更新，支持同步传递给React.lazy()，改进useReducer Hook惰性初始化API。
32. 16.8.6 27/03/2019 修复useReducer()中的错误紧急救援，修复Safari DevTools中的iframe警告，如果contextType设置为Context则发出警告。如果将contextType设置为无效值，则警告使用者而不是上下文。

    推荐阅读


    上一篇：50个最新TypeScript面试题合集 &#8211; TypeScript开发教程

    下一篇：React环境安装和配置完全解读 &#8211; ReactJS实战教程