财经>财经要闻

“React.js×React Native” - 多样性和缺点,将来会发生什么? [第2部分]

2019-09-12

LT1“使用Webpack引入React Hot Loader”

小组讨论后,在LT时间。 正在ISAO开发内部SNS“Goalous”的前台和服务器端工程师Masayuki Yoshida先生在舞台上首次被提及。 主题是“使用Webpack引入React Hot Loader”。

Browsersync通常通过监视文件更改并自动重新加载浏览器来执行。

React Hot Loader被描述为一个加载模块,用于监视React开发期间的文件更改,并在保持状态的同时自动更新React组件。

接下来,我展示了如何在显示文本框中输入的文本的演示中使用它。

一个父组件有两个子组件。 更正子组件时,将反映更正,但保持状态。

然后尝试操纵父组件。 从那里我把它放回去。 React Hot Loader如何做到这一点?

假设React Hot Loader嵌入在Webpack等构建工具中。 这一次,我们介绍了结合Webpack和Browsersync的案例。

首先,打开gulpfile。 它成为使用WebpackConfig制作Bundler的过程。 重点是入口点,指定webpackHotDevServer和HotMiddleware。

多个入口点也有提示。 React Hot Loader是一个有用的加载器,可以在保持其状态的同时更新组件,因此我们建议您使用它。

LT2“Inside Bdash”

然后,正在Cookpad开发Android的hokaccha上台了。 主题是“Inside Bdash”。

Bdash是由hokaccha创建的应用程序,您可以编写,保存和执行SQL,根据结果编写图表,并使用gist共享它们。

首先,关于应用程序的Flux框架的架构。 你在哪里调用域逻辑调用? 除绘图外的所有处理都定义为域逻辑。

数据库交换,API调用,设置管理等 在Bdash中,从Action Creator调用域逻辑。

我将域逻辑与Flux流分开,因为它更容易测试Store和域逻辑。 Action Creator很难测试,我放弃了,因为这是一种幻想,一切都是纯粹的功能。

换句话说,如何划分国家。 如果为每个资源存储,问题是存储之间存在依赖关系,因此需要使用Dispathcer进行流量管理并使用waitFor解析依赖关系。

另一方面,Redux不会将Store分开,因为它是Single State。 由于该体系结构要划分更新状态的过程,因此存在状态变得庞大的问题。 因此,我按页面(容器组件)单元划分了Bdash。

好处是Stores之间没有依赖关系,State可以用易于理解的粒度划分,并且很容易理解,因为它全部是以Page为单位的。

但是,页面之间的数据共享变得麻烦。 为了解决这个问题,页面之间共享的数据存储在域逻辑层中,并且使其从域逻辑层重新获得并在每次切换页面时更新。

这与服务器端思维相同。 但是,如果商店可以做的层是昂贵的处理,例如API,则页面切换时的过程变得更复杂和更慢,所以它似乎不太好。 它不适用于一页处理非常大或复杂的应用程序。

您不需要像Immutable.js这样的丰富功能。 只想简化嵌套状态更新。 因此,我们创建了一种机制来轻松更新嵌套状态,并将其合并到Store中。 Bdash似乎是在GitHub上发布的,所以请参考它。

LT3“HyperApp-1KB视图库”

第三步是增量项目工程师Jorge Bucaran。 主题是“HyperApp-1KB View Library”。

1

责任编辑:和瀹庞