Skip to content

Drawback

Jump to bottom
awmleer edited this page Dec 6, 2018 · 2 revisions

遗憾

学习成本

由于依赖了rx.js，会带来一定的学习成本。

什么是Observable？什么是Subject？什么又是BehaviorSubject？

rx.js中各式各样的操作符都是什么？

嵌套地狱

render props是React中的一个非常美妙的特性，但是过量的使用，会导致“嵌套地狱”：

<Consumer of={PostBloc}>
  {postBloc => (
    <div>
      <Subscribe to={postBloc.post$}>
        {post => (
          <div>
            <h1>{post.title}</h1>
            <Subscribe to={postBloc.replies$}>
              {replies => replies.map(reply => (
                <div key={replie}>
                  ...
                </div>
              ))}
            </Subscribe>
          </div>
        )}
      </Subscribe>
    </div>
  )}
</Consumer>

层层的缩进构成了一个大大的“>”，在实际项目中，如此复杂的嵌套不仅仅不便于阅读，也难以维护。

不过，在0.4版本中，我们加入了useBloc和useStream这两个hook，可以很好的解决嵌套地狱问题。

闭包局限性

在一个简单的Consumer中：

<Consumer of={PostBloc}>
  {postBloc => (
    <div>...</div>
  )}
</Consumer>

Consumer组件的children属性是一个render prop，也就是说它本质上是一个匿名函数，而postBloc是这个匿名函数的参数。这意味着，我们只能在这个函数的闭包作用域内，访问到postBloc。

这听起来好像不是什么大问题，但是假如我们想增加一个回复帖子的功能：

export class Post extends React.Component {
  state = {
    inputContent: ''
  }

  reply = () => {
    // 如何获取到postBloc？
    postBloc.reply(this.state.inputContent)
  }

  render() {
    return (
      <Consumer of={PostBloc}>
        {postBloc => (
          <div>
            ...
            <button onClick={this.reply} />
          </div>
        )}
      </Consumer>
    )
  }
}

可以发现，我们无法在reply方法中，非常自然的拿到postBloc实例。

好在我们可以在未来使用useBloc和useStreamhook解决这个问题。

Clone this wiki locally