(一）React基础知识

最新推荐文章于 2022-03-17 13:44:28 发布

qq_38916272

最新推荐文章于 2022-03-17 13:44:28 发布

阅读量214

点赞数

分类专栏： UI框架文章标签： React UI 前端

本文链接：https://blog.csdn.net/qq_38916272/article/details/83475757

版权

UI框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、 React 基本介绍

React是一个用于构建用户界面的JS库；
React主要用于构建UI，类比于MVC模式中的V(视图)；
React应用程序的核心是组件(Component);
3.1 组件：是一个子包含的模块，它提供一些输出；
3.2 组件：可将类似按钮或输入框作为React组件，组件和组件之间可以嵌套组合，或者可以包含输入一个或多个组件。

二、React工作原理

React和许多其他前身不同的是，React不是直接在浏览器的DOM上运行的，而是在React创建存放组件的虚拟DOM上运行的，为开发者提高了灵活性和性能收益，因此React可提前计算出DOM中需要更新的内容，并对DOM作出相应的更新，从而避免了代价高昂的DOM操作，大幅提高了工作效率。

三、React主要特点

声明式设计：React采用声明范式，可以轻松描述应用
高效：React通过对DOM的模拟，最大限度地减少与DOM的交互
灵活：React可以与已知的库或框架很好地配合
JSX： JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它
组件：通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
单向响应的数据流： React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单
**说明：**JSX（http://jsx.github.io/）是Javascript和HTML的完美结合，可专门用于ReactJS，大大简化了编写网站组件的流程。

四、React相关优势

通过React工作原理可知，React的效率极高：主要是合理地利用了本地API达到了跨平台的效果；
SEO友好（跨浏览器兼容）：JavaScript框架的缺陷之一是对搜索引擎十分不友好，尽管有所改进；React.js在这方面却做的很出色，你可以在服务器端运行React.js，虚拟DOM可以像常规的web页面一样返回给浏览器，不需要任何特殊技巧。
注重用户界面：与MeteorJS、Firebase、AngularJS不同的是，React Native十分重视用户界面。通过设备本地环境与React Native的Javascript交互，可以给用户提供完美的响应式界面；虽然这一定程度上增加了应用的加载时间，但也保证了程序运行过程中的流畅。
简单，使用便捷：安装ReactJS的官方Chrome插件，它能使你的调试过程变得更加简单。安装完插件之后，你就可以像在元素面板中浏览一个常规DOM树一样直接查看虚拟DOM
组件模块化：编写独立的模块化UI组件，若某个或某些组件出现问题时方便进行隔离；每个组件都可进行独立的开发和测试，且它们可引入其它组件，这等同于提高了代码的可维护性；

五、React相关的三个JS库

react.js: React的核心库
react-dom.js: 提供操作DOM的扩展库
babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

六、简单React实例

具体React版本号的选择，你可以在官网 https://reactjs.org/ 下载最新版

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);
</script>

</body>
</html>

**总结：**React主要发挥两个作用：更新DOM和响应事件，其他所有动作都是交予状态( state )统一管理，将DOM中所有元素的位置信息集中记录到顶层组件的state中，以后只需要处理state即可，比如改变位置，重叠方式等等。

转载请注明以下参考文献：
什么是React？
https://blog.csdn.net/tianzhw/article/details/78812120
选择ReactJS的五个理由：
https://blog.csdn.net/sinat_32582203/article/details/52892702?utm_source=blogxgwz6
React的优缺点：
https://blog.csdn.net/oYueMiJinDu/article/details/51222884?utm_source=blogxgwz0
React学习（一）三大突出特点：
https://blog.csdn.net/howgod/article/details/78408506?utm_source=blogxgwz2
你觉得react有什么优点？
https://blog.csdn.net/a84934532/article/details/60973449?utm_source=blogxgwz3

qq_38916272

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(一）React基础知识

一、 React 基本介绍React是一个用于构建用户界面的JS库；React主要用于构建UI，类比于MVC模式中的V(视图)；React应用程序的核心是组件(Component);3.1 组件：是一个子包含的模块，它提供一些输出；3.2 组件：可将类似按钮或输入框作为React组件，组件和组件之间可以嵌套组合，或者可以包含输入一个或多个组件。二、React工作原理Reac...
复制链接

扫一扫