美文网首页
高性能React数据容器WatermelonDB

高性能React数据容器WatermelonDB

作者: wlchn | 来源:发表于2018-11-07 12:45 被阅读0次
WatermelonDB

简介

WatermelonDB是React Native和React Web一种新的数据状态容器,虽然称作DB但意义和传统DB还是有些区别的,它的作用更像Redux,同Redux类似,WatermelonDB也是单一数据源原则,并且数据流单向的形式,UI会根据记录的变化而相应的改变。
WatermelonDB比Redux的优势在于,对于数据记录较大的React应用,能提供更好的性能表现。同时WatermelonDB也能比Redux更友好的管理数据流。

示例

首先,定义Models

class Post extends Model {
  @field('name') name
  @field('body') body
  @children('comments') comments
}

class Comment extends Model {
  @field('body') body
  @field('author') author
}

然后connect数据到components(和Redux connect比较像)

const Comment = ({ comment }) => (
  <View style={styles.commentBox}>
    <Text>{comment.body} — by {comment.author}</Text>
  </View>
)

// This is how you make your app reactive! ✨
const enhance = withObservables(['comment'], ({ comment }) => ({
  comment: comment.observe()
}))
const EnhancedComment = enhance(Comment)

render

const Post = ({ post, comments }) => (
  <View>
    <Text>{post.name}</Text>
    <Text>Comments:</Text>
    {comments.map(comment =>
      <Comment key={comment.id} comment={comment} />
    )}
  </View>
)

const enhance = withObservables(['post'], ({ post }) => ({
  post: post.observe(),
  comments: post.comments.observe()
}))

现在添加、更新、删除操作一条数据记录,绑定的component就会自动重新render了。
对于数据流大、应用复杂又比较追求性能的React应用,可以尝试一下WatermelonDB了。

安装文档:https://github.com/Nozbe/WatermelonDB/blob/master/docs/Installation.md

相关文章

  • 高性能React数据容器WatermelonDB

    简介 WatermelonDB是React Native和React Web一种新的数据状态容器,虽然称作DB但意...

  • 前端页面上预览pdf

    1建一个容器··· ···2 渲染数据···const historyRef = React.useRef()...

  • react

    React框架学习 React的起源和发展 React的出发点 React与传统MVC的关系 React高性能的体...

  • redux学习

    组件之间数据传递 redux是js状态容器,提供可以预测的状态管理 react中安装 npm install --...

  • 2018.9月React-Native优质开源项目

    首发于个人博客 CoderMiner技术博客 Nozbe/WatermelonDB stars:3886 for...

  • React 进阶一

    React适合做什么 React是facebook开源的前端开发框架,以高性能,易用性著称,而作为React本身,...

  • 什么是阿里云容器服务?

    关于阿里云容器服务的详细内容:阿里云容器服务使用教程 容器服务(Container Service)提供高性能可伸...

  • Redux中间件原理

    Redux提供了非常强大的数据流管理功能,是一个可预测的状态容器,解决数据在 React 应用中的流动方式及过程 ...

  • JavaScript 的状态容器 Redux

    Redux JavasSript 的状态容器跟 React 没有关系,Redux 支持 React、Angular...

  • Docker数据管理

    容器管理数据方式: 数据卷:容器内数据直接映射到本地主机环境; 数据卷容器:使用特定容器维护数据卷。 数据卷 类似...

网友评论

      本文标题:高性能React数据容器WatermelonDB

      本文链接:https://www.haomeiwen.com/subject/pyamxqtx.html