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

相关推荐
小朋友,你是否有很多问号?1 小时前
Spark10- RDD转DataFrame的三种方式
大数据·javascript·spark
Wiktok1 小时前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
devii661 小时前
html.
前端
掘金安东尼1 小时前
为什么浏览器要限制 JavaScript 定时器?
前端·javascript·github
学前端搞口饭吃1 小时前
react context如何使用
前端·javascript·react.js
GDAL1 小时前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
IT_陈寒1 小时前
《Java 21新特性实战:5个必学的性能优化技巧让你的应用快30%》
前端·人工智能·后端
小谭鸡米花2 小时前
uni小程序中使用Echarts图表
前端·小程序·echarts
芜青2 小时前
【Vue2手录11】Vue脚手架(@vue_cli)详解(环境搭建+项目开发示例)
前端·javascript·vue.js
a别念m2 小时前
前端架构-CSR、SSR 和 SSG
前端·架构·前端框架