自习室.14 | React 函数式编程和单向数据流

Posted 2021-03-29 南宁IT派

React 基于大量的函数式编程来实现，如果你了解类似于underscore这个库，那你应该大概了解函数式编程的一些技巧，在 React 中你会经常使用两个主要的方法：

1.  .map()

2.  .filter()

Array的.map()方法

调用现有的数组，根据传入的函数返回的内容返回新的数组：

Array的.filter()方法

与.map()方法相似，区别在于传递的函数用作检验条件，返回true的项目才会包含在新的数组中：

.map()和.filter()组合到一起

两个方法的可以组合到一起，进行链式调用，一个方法返回的数据可以是另一个方法的新数组：

names 数组被过滤，并返回新的数组，然后对新数组调用.map()，并再次返回新数组，存储在shortNamesLengths变量中。 

React 单向数据流

在 React 中，数据仅朝一个方向流动，即从父组件流向子组件。如果数据在兄弟子组件之间共享，那么数据应该存储在父组件，并同时传递给需要数据的两个子组件。

数据从父组件流向子组件，数据更新发送到父组件，父组件会进行实际的更改。

数据位于父组件中，并向下传递给子组件，但是父组件和子组件都可以使用数据，然而：

• 如果必须更新数据的话，则只有父组件应该进行更新；

• 如果子组件需要更改数据，它将会更新的数据发送给父组件，由父组件完成更改，父组件执行更改后，将会更新的数据传递给子组件。

我们横向对比一下 Angular 的数据流：

属性绑定自上而下，事件绑定刚好相反：

1. 单向从数据源到视图通过插值表达式、属性、Attribute等等；

2. 从视图到数据源的单向绑定通过 Event 事件；

3. 双向绑定：Form 表单；

扫码二维码

申请入群

内推南宁IT职位

致力于开源应用