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

Z时代
2024-01-10
分类：综合

react

作者：胡子大哈

原文链接： http://huziketang.com/books/react/lesson17

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

上一个评论功能的案例中，可能会有些同学会对一个地方感到疑惑： 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 (
      <div>
        {this.state.comments.map((comment, i) =>
          <Comment comment={comment} key={i} />
        )}
      </div>
    )
  }
}

如果把这个 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 当中。

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