react 单向数据流概念
'react 框架是怎样的数据流向?'||'react 单向数据流是怎样的概念 ?'
解答这个问题之前, 我们首先得知道, JS 框架是个怎样的概念.
框架: 具备一定 ** 编程思想 ** 的(mvc/mvvm)JS 库, 叫做框架;
那么这道题的答案重点就在于编程思想这四个字上.
众所周知, 多数 MVVM 框架, 如 react,vue 都是单向数据流的框架.
单向数据流: 即规范了数据的流向 -- 由外层组件向内层组件进行传递;
ok, 我们经由上述概念得知了单向数据流其实是一种框架本身对数据流向的限制.
那么为什么会做出这样的限制呢? 为什么不让我们为所欲为的想怎么传就怎么传呢?
react 的编程思想和单向数据流的关系
针对上述问题, 我们结合编程思想来思考这个问题的答案.
多数 React 框架的使用者可能在接触 react 这门框架前, 就听说了有关 react 的诸如此类的评价 --
- "react, 从入门到放弃."
- "相对 vue,react 入门难的一批."
- "react 语法限制太严格."
- ......
ok, 首先在这里说些题外话 -- 我要批判这类评价. 理由很简单:
在 react 基于 es6 改版之前, 只要深层次掌握了原生 JS 的构造函数, react 入门难度其实也算不上啥.
1 而在 react16 版本后, 恕我直言, 如果 es6 的 class 玩明白了, react 上手使用真的零难度入门.
2jsx 花五分钟, 如果之前接触过 ejs/xtemplate/jade 这些模版引擎, jsx 相对它们还要简单;
3 而 props,state,refs,context,children 可以看作几个特殊的实例属性(我们甚至可以直接做个推测: 父类 React.Component 定义了它们的管理方式);
4 那么封装组件就是写个子类啊没毛病啊;
5 好吧你说哪个框架没有生命周期钩子这玩意;
6 高阶组件对比一下类的修饰器(generetor,es6 的提案, es7 实现), 我滴乖乖, 一样的东西啊;
综上所述问题, react 简单的一批啊, 我们只要在 JS 的基础上, 学下 jsx 语法, 弄明白几个特殊实例属性怎么玩, 一张图明白 react 的基本生命周期钩子, 结合单向数据流的思想, 为所欲为啊.
......
跑远了, 我们回来讲 react 编程思想和单向数据流之间的关系.
敲黑板了看重点:
react 的编程思想是严谨且周密的, 它约束了我们的花式操作, 这是为了确保我们在使用 react 构建复杂项目的时候不会出现太多问题.
而好处也是显而易见的 -- 我们写 react 项目, 一旦出现了问题, 那么我们会很轻松的发现, 根源几乎集中在 props 和 state 这俩实例属性上.
单向数据流是 react 规范的数据流向, 它的作用是极大的降低了我们组件间通信的代码耦合, 让组件间的通信更为清晰, debug 直接往 props 中找(后面会介绍 context).
也就是说, 基于 react 严谨且周密的编程思想, 制订了单向数据流这样的通信约束, 使得我们 react 项目中的数据传递结构稳定且不易耦合, 有事没事找 props 解决一切通信问题(多好啊, 你看 vue 不也乐呵呵的在使用嘛, 话说这里好想吐个槽: 很明显了你们这些英语负八级的渣渣啊~ 找啥接口啊放弃 react 到 vue,vue 对比 react 最大优势明明是中文文档好啊有木有! 毕竟是中国人做的啊! ps: 致敬尤大佬).
单向数据流除了单向之外还有怎样的限制?
其实 react 中的单向数据流, 完整概念应该是: 数据的流向只能通过 props 由外层到内层 一层一层往里传递.
只能通过 props 一层一层往里传递这样的限制啊...... 不可能的, 考虑到项目复杂度, 组件层级过高, 这个我们真不能接受啊.
react 想了想, 是啊不能太狠毒, 限制过大万一没人用岂不是尴尬了? 于是加上了 context 这个玩意, 方便我们进行组件间的隔代通信.
![](https://img2018.cnblogs.com/blog/1425733/201903/1425733-20190311233724579-784747102.png)
但 react 也是要面子的, 完事还告诉我们: 这玩意轻易不要用啊, 危险啊这家伙, 慎重使用啊小伙子们!
靠, 君不见 react-redux 中的 Provider 组件, 源码就是简单的用了 context 加上个插槽 (children) 就完事了啊... 整个组件源码就八九行啊, 我闭着眼都能封装给你看有木有啊喂!
所以说只要是放在正式版本中的 API, 我们都可以大胆的去使用, 当然, 前提是最好得知道它的核心原理甚至源码的封装, 避免太花哨的操作引起不必要的八阿哥.
写在最后
就单向数据流的概念这个问题, 在清晰的给出概念给面试官后, 一定要结合 react 的严谨性去做个解释, 后面讲讲单向数据流的传递方式 props 和 context, 这道题基本已经不需要再讲了.(你满分了, 别讲了, 再讲你讲讲源码吧)
然而, 一般来讲, 在你讲完单向数据流的概念后, 心机的面试官立马会问你下一个问题:
react 既然规定了单向数据流, 那么如何在 react 中实现逆向通信?(子组件向父组件方向通信)
这个问题, 我们留到下一篇做个讲解.
来源: https://www.cnblogs.com/sanchang/p/10513571.html