余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

学习 React.js 需要了解的一些概念(react和reactjs关系)

xiyangw 2022-11-26 17:04 80 浏览 0 评论

大家好,我是前端西瓜哥。

React.js 是被广泛使用的用于构建用户界面的 JS 库。下面给大家介绍一下学习 React 需要了解的一些概念。

声明式

在 React 这类框架流行之前,我们更新 UI,都是命令式的:我们需要手动指定元素,然后命令它改变样式。

// 纯 JS 写法
document.querySelector('#content') = '前端西瓜哥';
// JQuery 写法
$('#content').text('content');

这种写法其实是相当繁琐的。你可能需要给元素加上 id,加上 class 作以区分,可能还需通过查找当前元素的父元素来界定区域,然后手动作添加子元素、进行修改样式、移除等操作。

所有的事情,都要自己一个个去操作,事无巨细,容易写错。

React 和 Vue 这类框架的出现,让实际项目开发中命令式的写法成为了历史(只是偶尔还是会用到一点命令式写法)。

React 的编码是 声明式 的,你只需要维护好状态,然后在必要的时候通知 React,React 会自动帮你将 UI 渲染好。

class Compoent extends React.Component {
  state = { content: '前端西瓜哥' };
  updateContent = () => {
    this.setState({ content: 'fe_watermelon' });
  };
  render() {
    return (
      <div>
        <div>{this.state.content}</div>
        <button onClick={() => this.updateContent()}>更新 content</button>
      </div>
    );
  }
}
// 渲染为
// <div>前端西瓜哥</div>

React 中用 state 对象来保存可能会发生变化的状态,然后在 HTML 中用 {变量} 的方式嵌入,并通过 setState() 方法来更新状态,并重新渲染 UI。

UI = f(data)

数据映射到 UI 的操作过程,全部交给 React 做了,再也不用担心自己手写的 DOM 更新写错了。你要做的只是更新状态,以及设置好状态在 HTML 中渲染的地方。

这种修改好状态,然后调用方法更新 UI 的做法,其实挺像做小游戏的。比如我们要做一个俄罗斯方块,当发生动作时,我们要更新好每个像素的位置(更新数据),然后调用自己实现的 render 方法,先清空画布,然后一个个绘制出来(映射 UI)。

组件化

组件化是什么?其实就是将模板、样式、脚本组合起来,成为一个组件。我们编写好一个个小的组件,然后将组件组合起来,就组成了我们的 UI 界面。

要想构建复杂的应用,合适的抽象是很重要的。对于 UI 来说,一种比较正确的思路,是将 UI 的分割成各个部分,我们只需要专注于一个职责专一的组件上,完成它后,再和其他的组件联合在一起,一点点构建出复杂的应用。

比如一个待办功能,我们可以抽象成下面这个样子。

<TodoContainer>
  <TodoInput />
  <TodoList />
</TodoContainer>

虚拟 DOM

为了高效地更新 DOM,React 的底层使用了虚拟 DOM 来表示真实的 DOM 结构。

没有使用真实 DOM,是因为真实 DOM 对象比较复杂,有非常多的属性,比较占内存,所以抽象了一层 虚拟 DOM,此外还能附带上组件节点。

当状态更新时,会对比新旧虚拟 DOM 树得到补丁,通过打补丁的方式去更新真实 DOM 树。

React 中新旧 DOM 对比算法做了优化,要比普通的树比较算法要高效,这是 React 能被运用到实际生产环境的一个重要原因。

跨平台

得益于 React 中虚拟 DOM 的实现,React 支持通过 React Native 编译为其他平台语言,来构建移动原生应用,比如 Andorid 或 iOS 原生应用。

虚拟 DOM 其实是真正 DOM 的一层抽象,这个抽象和平台无关,因此我们可以根据这层抽象去做跨平台的实现,让一套代码得以运行在不同平台。

但虚拟 DOM 并不能涵盖不同平台一些特有的 API,所以你其实还是要懂一些原生 APP 的知识的,对一些情况做特殊处理。

但至少,React 提供了一种跨平台的方案。

JSX

React 首先是一个 JS 库,它的语法不能跳脱 JS 的语法。在 JS 环境中,React 通过 React.crreatElement 来描述 DOM。

创建一个内容为 this.state.content 的 div 元素,我们需要这样写。

const el = React.createElement('div', {}, this.state.content);

第一个是 HTML 元素名或组件名,第二个是属性,第三个是子元素或子组件。

只是描述的一个 DOM 元素还算简单,但我们的页面是由复杂的 DOM 元素组织而成的,如果用上面这种写法,代码容易出错,也不方便进行维护。

于是 React 推出了 JSX,全称为 JavaScript Syntax Extension,即 JS 语法的扩展增强。通过 JSX,我们就可以实现 “在 JS 中写 HTML”。

const el = <div>{this.state.content}</div>;

但 JSX 还是不能被浏览器识别,需要编译为 JS。编译后,里面的这种 <div></div> 就会转换为使用了 React.createElement('div') 的代码。

单向数据流

React 要求数据从父组件通过 props 流向子组件,这样就能更好地定位组件中的某个数据的来源。

当然我们还是可以通过额外传递一个可以修改父组件状态方法给子组件,通过它去更新传给子组件的数据。

这样就能实现双向的数据流,但它依旧是显式的,仍然有助于理解程序的运转流程。

React Hooks

React 支持通过类或函数的方式编写组件,分别称为 类组件函数组件

类组件可以创建对象,所以自身可以维护状态是理所当然的事情。

一般来说,函数组件是不支持状态的,因为它是一个函数,只会接收外部传入的数据,然后渲染,内部没办法保持状态,因为它不是对象,只是一个用完就结束的函数。

函数组件不能使用内部状态的这种情况,在 React 推出了 React Hooks 之后解决了。

const Compoent = () => {
  const [content, setContent] = useState('前端西瓜哥');
  return (
    <div>
      <div>{content}</div>
      <button onClick={() => setContent('fe_watermelon')}>更新</button>
    </div>
  );
};

我们在函数组件内使用 useState() 就可以创建一个内部状态,且可以通过 setXxx() 进行更新。

我第一次看到 React Hooks,就觉得这简直就是魔法,惊为天人。

底层其实是用一个额外的有序列表保存好了每个状态,和函数组件进行了绑定。为了做到这点,React 要求 Hooks 必须在每次执行时,保证顺序相同。

React Hooks 的一个优点是,将逻辑的最小单元从组件,缩小为更细粒度的 hooks 的组合。这让我们编写组件更加灵活。

相关推荐

高效删除文件名中的指定内容,祛除烦恼

如何快速批量删除文件名中的指定字符?在电脑整理文件时,我们常常需要进行批量重命名操作。如果文件名中含有不必要或重复的字符,这将影响文件的识别和查找。因此,删除这些文字或字符是非常必要且有效的。本文将分...

你的手机是不是经常提示存储空间不足?Python帮你清理重复文件

  最近我的手机经常提示存储空间不足,主要是微信和QQ群里接收的文件太多了,平时也没怎么整理。我把这些文件从手机里拷出来,打算整理一下,把该删的文件都删掉,把要备份的文件分门别类存到电脑或网盘上。我突...

从零开始打造云端AI管理调度平台(四)如何设计主页_1

最近闲来无事,想着把自己工作正在做的一个项目做一个简单的分享与实战教程,该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容...

「万能Python」-17-标准库OS_python2.7标准库

Python的库是指预先编写好的代码集合,可以用来处理特定的任务或实现特定的功能。Python的标准库提供了许多常用的标准库,无需安装引入使用。Python3的标准库提供了许多常用的功能,包括...

十多行代码生成原帖和临写对照图_几十行代码可以申请软著吗

介绍这个小工具把原帖和临写分解成多列对照的形式。输入原帖图片,和输入临写图片,生成对照图片。使用说明运行compare.py文件,输入参数为:原帖图片文件名,临写图片文件名,列数。python3co...

Python合集之目录操作(四)_python之文件操作大全

1.删除目录删除目录可以通过os模块提供的rmdir()函数实现。通过rmdir()函数删除目录时,只有当要删除的目录为空时才起作用。os.rmdir(path)path为要删除的目录,可以使用绝对路...

excel办公自动化,自动合并excel表格

平时时收到不同人反馈的excel表格,需要将其合并在一个excel中,每个excel打开复制粘贴会很慢,如下脚本可一键合并所有的exceldefauto_merge():try:print('...

批量打开一个文件夹下面所有的excel表格

如果现在有一个文件夹,名称叫做“练习表格”,路径名是'C:\Users\123\Desktop\练习表格',现在的要求是打开这个文件下面所有的excel表格,后缀名字为“xlsx”,我...

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手/右手...

python 日志写入_python日志文件写入

1.第一步,新建日志文件路径,如下图:2.日志模块封装,代码如下:importlogging,oslogs_path=os.path.join(os.path.dirname(__file...

Python os.path模块使用指南:轻松处理文件路径

前言在Python编程中,文件和目录的操作是非常重要的一部分。为了方便用户进行文件和目录的操作,Python标准库提供了os模块。其中,os.path子模块提供了一些处理文件路径的函数和方法。本文主要...

Python中获取当前路径之pathilb和os的区别

20230114星期六:1,直接在py脚本中,执行,没有区别;2,打包成exe文件以后,在本机执行,有区别,这时,不能使用os.path.dirname(__file__),只能使用pathlib.P...

Python(办公自动化编程系列)学习笔记1

1、获得当前程序工作目录importos#os.getcwd()函数可以取得当前工作路径的字符串print(os.getcwd())运行结果2、获得程序文件夹相对路径#相对路径都用/表示#../...

文件路径名Pathnames的操作_路径和文件名是什么意思

1.现象问题使用路径名来获取文件名,目录名,绝对路径等等2.原因分析无3.问题解决使用os.path模块中的函数来操作路径名importos.path#查看标准化的绝对路径print...

关于《Python入门:os常用函数》中复制文件(夹)函数从简到繁

基本考虑练习os模块及file读写操作:将给定的源路径的文件(夹)复制到目标路径简单实现#文件到文件的复制path_src='E:\src.txt'path_tar='D...

取消回复欢迎 发表评论: