React入门 - 10(说一说关于 React 的一些理论 )

本章内容

目录

    • 1、React 是一种 ”声明式“开发
    • 2、React 可与其他框架并存
    • 3、React 的”组件式“开发
    • 4、React 遵循”单向数据流“
    • 5、React 是一个用于构建”视图层“的框架
    • 6、React 采用”函数式编程“

截止到上一节内容,我们就使用 React实现 TodoList的功能已经完成。本节内容我们来初步总结一下 React的一些理论

1、React 是一种 ”声明式“开发

说到”声明式“开发,我们可能会有疑问,它和以前我们了解的”命令式“开发有什么不一样呢

  • ”命令式“开发:简单来说就是按照命令/指令一步一步实现需求。比如说,现在有个”更改某个 DOM内容的需求“,那我们就得按照一定的步骤来实现:先找到这个 DOM(如: document.getElementById('xxx')), 然后将这个 DOMinnerHTML替换成相应的内容。总之大篇幅的代码都在一步一步操作 DOM

  • ”声明式“开发: 只关注数据层的逻辑,面向”数据“编程。也就是我们只要处理好数据,React会自动的帮助我们用数据构建 DOM.

2、React 可与其他框架并存

  • 观察工程代码可以发现,React只负责 idroot这部分的代码渲染。实践发现,其他部分的代码也可用其他框架(如 Vue)来实现。
ReactDOM.render(<TodoList/>, document.getElementById('root'))

3、React 的”组件式“开发

  • ”组件式“开发是 React最重要的东西之一,它允许将复杂庞大的应用拆成一个一个组件,让开发者更好的管理维护和开发。

4、React 遵循”单向数据流“

  • 父组件通过”属性“形式将数据传递给子组件,子组件只能使用这个数据而不能去更改这个数据。如果真的想改变数据,需要调用父组件传递过来的方法,让父组件自己去变更数据

  • ”单向数据流“带来的一个巨大好处就是,可以在开发和调试时避免很多坑。反之如果不是”单向数据流“,那么一个数据出现错误,很难去判断到底是哪个组件改动到这个数据

5、React 是一个用于构建”视图层“的框架

  • 在使用 React时,我们只需要关注数据层的逻辑即可,其底层帮我实现了跟”视图层“相关的东西

6、React 采用”函数式编程“

  • 在编写 TodoList案例时,我们的明显的感觉到,使用 React编程时,我们都在写一个一个的”函数“

  • 函数编程的好处是,可以将各个功能独立封装,结构更加清晰,维护起来更加方便快捷

到此,本章内容结束!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/634047.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AOI与AVI:在视觉检测中的不同点和相似点

AOI&#xff08;关注区域&#xff09;和AVI&#xff08;视觉感兴趣区域&#xff09;是视觉检测中常用的两个概念&#xff0c;主要用于识别和分析图像或视频中的特定区域。虽然这两个概念都涉及到注视行为和注意力分配&#xff0c;但它们在定义和实际应用等方面有一些差异。 AOI…

基于SpringBoot的社区帮扶对象管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

视频生成的路线之争:基于LLMs 和 基于SD 的技术路线孰优孰劣?

Diffusion Models视频生成-博客汇总 前言:在 AI 领域,近年来各个子领域都逐渐向 transformer 架构靠拢,只有视觉生成领域一直以 diffusion 结构作为主流方向,但是近年来谷歌、Meta、华为等大厂都在尝试使用基于LLMs的结构完成视觉生成任务。相比于趋于成熟的图像生成任务,…

win10 使用wezterm替代tmux

在windows系统下&#xff0c;没有直接的tmux替代品。wezterm作为一个可高度自定义配置的终端&#xff0c;可以一定程度替代tmux&#xff0c;满足我在windows系统下替换tmux的需求。 配置wezterm&#xff0c;使其快捷键风格接近tmux。快捷键配置如下。基于该配置wezterm.lua&am…

常见的 Linux 发行版和相应的服务管理命令

一、在 Linux 系统中&#xff0c;你可以使用不同的命令来停止服务&#xff0c;具体取决于你的系统和使用的初始化系统&#xff08;init 系统&#xff09;或服务管理工具。以下是一些常见的 Linux 发行版和相应的服务管理命令&#xff1a; 1. 使用 Systemd&#xff08;大多数现…

Git教程学习:03 记录每次更新到仓库

文章目录 1 检查当前文件状态2 跟踪新文件3 暂存已修改的文件4 状态简览5 忽略文件6 查看已暂存和未暂存的修改7 提交更新8 跳过使用暂存区域9 移除文件10 移动文件 现在我们的机器上有了一个 真实项目 的 Git 仓库&#xff0c;并从这个仓库中检出了所有文件的 工作副本。 通常…

windows和linux实时监控文本内容的命令

很多时候我们需要实时查看日志的内容 WIndows Get-Content someFile.txt -WaitLInux tail -f /var/log/apache2/access.logtail命令使用 tail命令是一个用于在Linux和Unix系统中查看文件末尾内容的命令。它通常用于实时监控日志文件的更新&#xff0c;以及查看文件的最新内…

前端和后端之间的CORS 跨域和解决办法

什么是CORS&#xff08;Cross-Origin Resource Sharing&#xff0c;跨源资源共享&#xff09; 跨源资源共享&#xff08;CORS&#xff0c;或通俗地译为跨域资源共享&#xff09;是一种基于 HTTP 头的机制&#xff0c;该机制通过允许服务器标示除了它自己以外的其他源&#xff0…

Docker之安装Nginx

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《Docker之Dockerfile构建镜像》。&#x1f3af;&…

为什么 macOS 比 Windows 稳定?

在计算机操作系统领域&#xff0c;macOS 和 Windows 分别是苹果公司和微软公司的主打产品。尽管两者都拥有大量的用户群体&#xff0c;但在稳定性和用户体验方面&#xff0c;macOS 常常被认为优于 Windows。那么&#xff0c;为什么 macOS 比 Windows 更稳定呢&#xff1f; 我们…

【Python 千题 —— 基础篇】元组的合并

题目描述 题目描述 现在有一个元组 (1, 2, 3, 4),用其它不破坏元组不可破坏性的基础方法上,向元组中添加 6,7,8 这几个数字。 输入描述 无 输出描述 输出“修改”后的元组。 示例 示例 ① 输出: (1, 2, 3, 4, 6, 7, 8)

算法题-爬楼梯-不同思路解法

主要记录个人思考过程&#xff0c;不同方案实现思路的演变 题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;…

你真的知道如何查看 Elasticsearch 的 Debug 日志吗?!

当我们遇到问题或者需要深入了解 Elasticsearch 的运行机制时&#xff0c;调整日志等级&#xff08; logging level &#xff09;到更详细的级别&#xff0c;比如 DEBUG、TRACE &#xff0c;会是一个有效且必须要掌握的方法。 Elasticsearch 提供了如下的接口来支持动态变更 l…

Java中的线程池技术进阶

Java中的线程池技术是用于管理和复用线程的一种技术&#xff0c;它可以有效地提高应用程序的性能和响应速度。在Java中&#xff0c;线程池可以通过java.util.concurrent包中的ExecutorService接口和相关实现类来创建和使用。 以下是一些关于Java线程池技术的进阶知识&#xff…

KY73 合唱队形

动态规划&#xff0c;最长LIS模板&#xff0c;正反各用一次 ti #include<bits/stdc.h>using namespace std;int n; int a[105], dp1[105], dp2[105];int main() {while(cin>>n){memset(a, 0, sizeof(0));memset(dp1, 0, sizeof(dp1));memset(dp2, 0, sizeof(dp2))…

C++系列-第1章顺序结构-9-字符类型char

在线练习&#xff1a; http://noi.openjudge.cn/ https://www.luogu.com.cn/ 总结 本文是C系列博客&#xff0c;主要讲述字符类型char 字符类型char 在C编程语言中&#xff0c;char是一种基本的数据类型&#xff0c;它用于存储单个字符。字符可以是字母、数字、标点符号或者…

简单的推箱子游戏实战

目录 项目分析 地图初始化 背景图片 游戏场景图片: 热键控制 按键设置 确定人物位置 实现人物移动(非箱子,目的地) 推箱子控制 游戏结束 最终代码 合法性判断: 项目分析 墙:0,地板:1,箱子目的地:2,小人:3,箱子:4,箱子命中目标:5 地图初始化 背景图片 #include <…

基于SkyEye仿真飞腾处理器:运行U-Boot并加载Phytium-FreeRTOS

仿真平台在帮助提升研发效率、加快产品面市时间上的作用已得到诸多验证&#xff0c;通过对处理器进行仿真来支持嵌入式系统及软件的虚拟化开发、测试和验证成为目前应用较为广泛的方法。天目全数字实时仿真软件SkyEye是一款基于可视化建模的硬件行为级仿真平台&#xff0c;在众…

leetcode:1736. 替换隐藏数字得到的最晚时间(python3解法)

难度&#xff1a;简单 给你一个字符串 time &#xff0c;格式为 hh:mm&#xff08;小时&#xff1a;分钟&#xff09;&#xff0c;其中某几位数字被隐藏&#xff08;用 ? 表示&#xff09;。 有效的时间为 00:00 到 23:59 之间的所有时间&#xff0c;包括 00:00 和 23:59 。 …