(10)React 入门——⑦ 初学 React 带给我们的一些思考 | React 基础理论实操

复制代码
转载请注明出处,未经同意,不可修改文章内容。

🔥🔥🔥"前端一万小时"两大明星专栏------"从零基础到轻松就业"、"前端面试刷题",已于本月大改版,合二为一,干货满满,欢迎点击公众号菜单栏各模块了解。

markdown 复制代码
涉及面试题:
1. 声明式编程 vs 命令式编程?
2. 什么是函数式编程?

[编号:react_10]

1 React 是一种"声明式"开发

"声明式"开发 🆚"命令式"开发:

  • "命令式"开发------直接操作 DOM。即创建一个页面时,我需要一点点地去告诉 DOM,你应该怎么去挂载、要怎么去做。例如,在之前的"原生 JS"实战中,里边有很大篇幅的代码都在操作 DOM。

  • "声明式"开发------面向"数据"编程。即我们只需要把"数据"构建好就行,React 会自动地帮助我们根据"数据"去构建网页。

2 React 可与其他框架并存

写 React 代码时,可以同时使用其他框架(如 Vue 等),且互相不会影响。

打开 index.js "入口"文件,其中有一行代码:

jsx 复制代码
ReactDOM.render(<TodoList />, document.getElementById('root'));

这就表示,整个 React 项目只是去负责 ID 为 root 这部分代码的渲染。

基于此,我们当然就可以用其他框架去负责其他部分的代码渲染------每个库只去管理自己对应的 DOM,彼此毫无影响。

3 React 是一种"组件式"的开发

我们之前实现 TodoList 相关功能时,"组件式"开发已经讲得比较多了,这里不再赘述。

4 React 要求我们严格遵循"单项数据流"

父组件可以通过"属性"向子组件传递"值",但子组件只能去使用这个"值",绝对不能去改变这个"值"。若真想这个"值"改变,那也得去调用父组件传过来的方法,让父组件自己去改变!

"单项数据流"有一个很大的好处:便于我们开发和调试时,不会有很多"坑"。

因为,如果你子组件拥有改变"值"的权限,那么只要页面一复杂("组件树"也会随之变得复杂),当某个"数据"A 被向下传递给各子组件后,一旦其中某一个子组件去改变了这个"数据"A,那这个"数据"A 在其他子组件中也会相应地改变。

此后,若页面出现 bug,我们将很难定位到具体是哪个组件更改了"数据"A 而产生的 bug。

5 React 是一个"视图层"的框架

在之前编写 TodoList 时,因其"组件树"特别简单,我们只利用了 React 自身内部的"父子组件"传值机制就完成了相关需求。

但在编写 React 实际大型项目时,由于"组件树"会特别庞大。我们只用 React 去实现"复杂组件间传值"是远远不行的,需要利用一些"数据层框架 "(如 Redux 等)来辅助我们开发。

即,React 只帮助我们解决"数据"和"页面渲染"等视图层相关的东西。至于复杂组件间如何传值,React 不负责,我们会交给其他"数据层框架"去完成。

6 React 采用"函数式编程"

在之前的 TodoList 编写过程中,我们能很直观地发现:用 React 编码时,我们都是在写一个个"函数"。

"函数式编程"的好处不言而喻:

  • 我们可以让每一个函数都各司其职,开发起来,逻辑很顺畅;
  • 符合"面向测试"的开发流程------现在很多前端项目都引入了"自动化测试","函数式编程"可以很方便地进行测试(如,给函数一个"输入值",观察其"输出"是否符合预期,我们就能很直观地看到这个函数是否运行的正确)。

祝好,qdywxs ♥ you!

相关推荐
gnip22 分钟前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫1 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel2 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼3 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku7 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode7 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu7 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu7 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript