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

站长

2023年09月05日 19:19 · 阅读数 20

转载请注明出处，未经同意，不可修改文章内容。

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

涉及面试题：
1. 声明式编程 vs 命令式编程？
2. 什么是函数式编程？

[编号：react_10]

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

“声明式”开发 🆚“命令式”开发：

“命令式”开发——直接操作 DOM。即创建一个页面时，我需要一点点地去告诉 DOM，你应该怎么去挂载、要怎么去做。例如，在之前的“原生 JS”实战中，里边有很大篇幅的代码都在操作 DOM。
“声明式”开发——面向“数据”编程。即我们只需要把“数据”构建好就行，React 会自动地帮助我们根据“数据”去构建网页。

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

打开 index.js “入口”文件，其中有一行代码：

ReactDOM.render(<TodoList />, document.getElementById('root'));

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

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

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

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

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

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

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

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

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

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

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

“函数式编程”的好处不言而喻：

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

祝好，qdywxs ♥ you！