React基础学习一

幸运的lucia

已于 2022-05-13 17:40:51 修改

阅读量144

点赞数

分类专栏： react 文章标签： react

于 2021-08-02 22:26:26 首次发布

本文链接：https://blog.csdn.net/weixin_43899065/article/details/119333819

版权

react 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、什么是React

用于构建用户界面javascript UI库，很多人认为它是MVC中的V(视图)，起源于Facebook的内部项目

二、React的特点

1、声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。
2、高效 −React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互。
3、灵活 −React可以与已知的库或框架很好地配合。
4、JSX − JSX 是 JavaScript 语法的扩展。
5、组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6、单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

三、React高效的原因

React高效的原因：虚拟的dom，不总是直接操作DOM；高效的DOM Diff算法，最小化的页面绘。
什么是Diff算法？答：比较变换前的dom和变换后的dom差别，只渲染局部的，肯定比渲染整个页面来得性能高

四、React的核心是组件，精髓是函数式编程

它遵循组件设计模式、声明式编程范式和函数式编程
1、组件设计模式:
React一切都是组件。我们通常将应用程序的整个逻辑分解为小的单个部分。我们将每个单独的部分称为组件。通常，组件是一个javascript函数，它接受输入，处理它并返回在UI中呈现的React元素。
2、声明式编程范式：
一种编程范式，它关注的是你要做什么，而不是如何做。它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件。它没有描述控制流步骤。声明式编程的例子有HTML、SQL等
3、函数式编程：
函数式编程是声明式编程的一部分。javascript中的函数是第一类公民，这意味着函数是数据，你可以像保存变量一样在应用程序中保存、检索和传递这些函数。
函数式编程有些核心的概念，如下：
不可变性(Immutability)、纯函数(Pure Functions)、数据转换(Data Transformations)、高阶函数 (Higher-Order Functions)、递归、组合
4、模块与组件的区别：
从设计上来看，组件强调复用，模块强调职责(内聚、分离)，或者说组件是达到可复用要求的模块
模块: 向外提供特定功能的js程序，一般就是一个js文件（为什么？js代码更多更复杂），简化js的编码，阅读，提高运行效率
组件： 用来实现特定功能效果的代码集合（html/css/js)（为什么？一个界面的功能更加复杂），复用，简化项目编码，提高运行效率
模块化： 当应用的js都以模块来编写的，这个应用就是模块化应用
组件化： 当应用是以多组件的方式实现功能，这上应用就是一个组件化的应用

五、JSX语法的由来

1、什么是JSX:
JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。
官方定义是类 XML 语法的 ECMAScript 扩展。它完美地利用了 JavaScript 自带的语法和特性，并使用大家熟悉的 HTML 语法来创建虚拟元素。

六、单向响应的数据流

父组件可以向子组件传值，但是子组件不能直接改变这个值。
在子组件去调用父组件传递的方法。是子组件调用父组件的方法，最终是父组件的方法来对自己的内容进行改变的，这样维护起来就容易了，所有相关list的操作都在父组件这一个组件。

七、扩展

相关的js库
react-js：Reack的核心库
react-dom.js:提供操作DOM（虚拟的）的扩展库
babel.min.js:解析jsx语法代码转为纯js语法代码的库
什么是babel
一个工具库：可以将ES6转化为ES5等功能

<!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>