状态管理

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

如果把 comments 交给父组件 CommentApp ,那么 CommentListCommentList2 都可以通过 props 获取到 commentsReact.js 把这种行为叫做“状态提升”。

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

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

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

百分比换算器


See the Pen
百分比换算器
by whjin (@whjin)
on CodePen.