ReactNative 进阶（二十九）：BloC 模式

一、什么是 BloC 模式？

BloC【Business Logic Component】模式是 paolo soares 和 cong hui 在 2018 年 Google dartconf 上提出的，具体的视频你可以参考YouTube.

从视频中可以看到 paolo soares 用一个及其简单的例子阐述了传统写法的问题：

1. 业务逻辑和 UI 组件糅合在一起。

2. 不方便测试，不利于单独的测试业务逻辑部分。

3. 不能更好的重用业务逻辑代码，体现在，如果网络请求的逻辑有所变动的话，加入这个业务功能被两个端（web、flutter）使用的话，是需要改动两个地方的。

基于上面出现的一些问题，paolo soares 顺利的将我们重传统的开放方式，引入到了 Bloc 模式。

BloC架构图如下：

二、BlocProvider (视图标签)

BlocProvider: 使用 BlocProvider 将 Bloc 与 View 进行关联, 使在 View 中, 可以使用 Bloc.

三、StreamBuilder (视图标签)

StreamBuilder: 响应式视图. 当 Bloc 中数据改变时, 会重构 StreamBuilder.

StreamBuilder 架构图如下:

四、拓展阅读

• Bloc演讲
  

• 《ReactNative进阶（三十五）：应用脚手架 Yo 构建 RN 页面》

五、延伸阅读

在安装脚手架工具Yaemon时，发现npm命令执行报错，错误信息如下：

npm Error: Cannot find module 'are-we-there-yet'

查询后发现是由于npm 损坏了，are-we-there-yet是npm下npmlog依赖的一个包。接下来就是一番折腾，参照如下步骤尝试去解决：

cd /usr/local/lib/node_modulesmv npm /tmpsudo curl -L registry.npmjs.com/npm/-/npm-6.13.7.tgz |sudo tar xz --transform="s:^package:npm:"➜  ~ npm -v6.13.7

执行后，发现错误依旧存在。

索性直接重装。

针对Homebrew 安装的，应用如下方法卸载：

brew uninstall node

针对pkg安装包安装的，应用如下方法卸载：

sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

或者

sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d

注意：卸载完成后可通过在控制台输入：node/npm 来判断是否卸载完全

node - -> command not found
npm - -> command not found

最后，就是重新安装node，Homebrew 安装方式如下：

brew install node

也可以通过 pkg 安装包方式安装。

安装后，执行如下命令验证安装成功与否：

注意：npm是集成在node中的，所以需要通过卸载/重装 node 来实现卸载/重装npm。