重学React(六)-- 数据在 React 组件间的流转

128 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第7天,点击查看活动详情

什么是数据流?

提到数据流,要先提一下函数响应式编程(Functional Reactive Programming),顾名思义,函数响应式编程是一种利用函数式编程的部件进行响应式编程的编程范式。
数据流(Data Flow)则是其中响应式编程的重要概念,响应式编程将程序逻辑建模成为在运算(Operation)之间流动的数据及其变化。

React 的数据流包含哪些数据?

React 的数据流主要包含了三种数据:属性 props、状态 state 和上下文 context。

React 单向数据流

props、state 和 context 三种数据,共同组成了 React 组件的数据流。我们可以通过声明这三种数据来设计 React 应用的数据流,进而控制应用的交互和逻辑。
只有这三种数据的变更会自动通知到 React 框架,触发组件必要的重新渲染。当我们的数据流中混入了不属于它们其中任意一种的数据,就要小心,这种数据很有可能带来 Bug,比如数据改变了但组件并不重新渲染。这种 Bug 其实并不难定位,但当项目代码比较多,逻辑变得复杂时,你还是有可能会搞混数据的来源,花不少时间去 Debug。
虽然说 props、state 和 context 是不同的概念,但从一棵组件树的多个组件来看,同一条数据在引用不变的前提下,在传递过程中却可以具有多重身份。比如,一条数据最初来自于组件 A 的 state,通过 props 传递给子组件 B 后就成为了组件 B 的 prop。再比如,另一条数据来自于组件 A 的 state,通过在 A 中声明 context 传给了子组件树,子组件 B 的子组件 C 消费了这个 context 值。

总结

关于react的基础知识学习的已经差不多了,后续将从零开始开发一个小项目。