React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

newtrek 发布于2019-08-21 17:34 / 645人阅读

摘要：在实际项目当中状态提升并不是一个好的解决方案，所以我们后续会引入这样的状态管理工具来帮助我们来管理这种共享状态，但是在讲解到之前，我们暂时采取状态提升的方式来进行管理。

React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson17

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

上一个评论功能的案例中，可能会有些同学会对一个地方感到疑惑： CommentList 中显示的评论列表数据为什么要通过父组件 CommentApp 用 props 传进来？为什么不直接存放在 CommentList 的 state 当中？例如这样做也是可以的：

class CommentList extends Component {
  constructor () {
    this.state = { comments: [] }
  }

  addComment (comment) {
    this.state.comments.push(comment)
    this.setState({
      comments: this.state.comments
    })
  }

  render() {
    return (
      
        {this.state.comments.map((comment, i) =>
          
        )}
      
    )
  }
}

如果把这个 comments 放到 CommentList 当中，当有别的组件也依赖这个 comments 数据或者有别的组件会影响这个数据，那么就带来问题了。举一个数据依赖的例子：例如，现在我们有另外一个和 CommentList 同级的 CommentList2 ，也是需要显示同样的评论列表数据。

CommentList2 和 CommentList 并列为 CommentApp 的子组件，它也需要依赖 comments 显示评论列表。但是因为 comments 数据在 CommentList 中，它没办法访问到。

遇到这种情况，我们将这种组件之间共享的状态交给组件最近的公共父节点保管，然后通过 props 把状态传递给子组件，这样就可以在组件之间共享数据了。

在我们的例子当中，如果把 comments 交给父组件 CommentApp ，那么 CommentList 和 CommentList2 都可以通过 props 获取到 comments，React.js 把这种行为叫做“状态提升”。

但是这个 CommentList2 是我们临时加上去的，在实际案例当中并没有涉及到这种组件之间依赖 comments 的情况，为什么还需要把 comments 提升到 CommentApp？那是因为有个组件会影响到 comments ，那就是 CommentInput。CommentInput 产生的新的评论数据是会插入 comments 当中的，所以我们遇到这种情况也会把状态提升到父组件。

总结一下：当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props 传递数据或者函数来管理这种依赖或着影响的行为。

我们来看看状态提升更多的例子，假设现在我们的父组件 CommentApp 只是属于更大的组件树 PostApp 的一部分：

而这个更大的组件树的另外的子树的 CommentsCount 组件也需要依赖 comments 来显示评论数，那我们就只能把 comments 继续提升到这些依赖组件的最近公共父组件 PostApp 当中。

现在继续让我们的例子极端起来。假设现在 PostApp 只是另外一个更大的父组件 Index 的子树。而 Index 的某个子树的有一个按钮组件可以一键清空所有 comments（也就是说，这个按钮组件可以影响到这个数据），我们只能继续 commenets 提升到 Index 当中。

你会发现这种无限制的提升不是一个好的解决方案。一旦发生了提升，你就需要修改原来保存这个状态的组件的代码，也要把整个数据传递路径经过的组件都修改一遍，好让数据能够一层层地传递下去。这样对代码的组织管理维护带来很大的问题。到这里你可以抽象一下问题：

如何更好的管理这种被多个组件所依赖或影响的状态？

你可以看到 React.js 并没有提供好的解决方案来管理这种组件之间的共享状态。在实际项目当中状态提升并不是一个好的解决方案，所以我们后续会引入 Redux 这样的状态管理工具来帮助我们来管理这种共享状态，但是在讲解到 Redux 之前，我们暂时采取状态提升的方式来进行管理。

对于不会被多个组件依赖和影响的状态（例如某种下拉菜单的展开和收起状态），一般来说只需要保存在组件内部即可，不需要做提升或者特殊的管理。

下一节中我们将介绍《React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）》。

云服务器 GPU云服务器状态管理应用程序运行状态监控 asp状态管理系统工作状态

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89686.html

写一本关于 React.js 的小书

摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huzi...

Scorpion 2019-08-21 11:39 评论0 收藏0
React.js 小书 Lesson16 - 实战分析：评论功能（三）

摘要：但是给传递的评论数据并没有传递给，所以现在发表评论时没有反应的。包括实现功能之前先理解分析需求，划分组件。到此为止，小书的第一阶段已经结束，你可以利用这些知识点来构建简单的功能模块了。 React.js 小书 Lesson16 - 实战分析：评论功能（三）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson16 转载请注明出处...

Gilbertat 2019-08-21 17:34 评论0 收藏0
React.js 小书 Lesson12 - state vs props

摘要：的主要作用是用于组件保存控制修改自己的可变状态。它们都可以决定组件的行为和显示形态。但是它们的职责其实非常明晰分明是让组件控制自己的状态，是让外部对组件自己进行配置。下一节中我们将介绍小书渲染列表数据。 React.js 小书 Lesson12 - state vs props 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesso...

call_me_R 2019-08-21 17:33 评论0 收藏0
React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作

摘要：一个组件的显示形态由多个状态决定的情况非常常见。我们顺利地消除了手动的操作。非一般的暴力，因为每次都重新构造新增删除元素，会导致浏览器进行大量的重排，严重影响性能。下一节小书前端组件化三抽象出公共组件类我们把这个通用模式抽离到一个类当中。 React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作本文作者：胡子大哈本文原文：http://huziketang....

Drinkey 2019-08-21 17:32 评论0 收藏0
React.js 小书 Lesson5 - React.js 基本环境安装

摘要：工具地址在安装之前要确认你的机器上安装了环境包括。安装好环境以后，只需要按照官网的指引安装即可。所以可以把的源改成国内的的源，这样会加速下载过程。接下来我们会探讨的组件的基本写法小书使用描述信息。 React.js 小书 Lesson5 - React.js 基本环境安装本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson5 ...

zilu 2019-08-21 17:32 评论0 收藏0