标签: reactjs-flux

在我看来,最简单的方法是在实际渲染开始之前填充我的所有商店.这意味着在组件层次结构之外的某个地方(例如,挂钩到我的路由器).这种方法的问题是我必须两次定义页面结构.考虑一个更复杂的页面,例如一个包含许多不同组件的博客页面(实际的博客帖子,评论,相关帖子,最新帖子,推特流......).我必须使用React组件设计页面结构,然后在其他地方我必须定义为当前页面填充每个所需存储的过程.这似乎不是一个很好的解决方案.不幸的是,大多数同构教程都是以这种方式设计的(例如,这个伟大的通量教程).
React-async.这种方法很完美.它让我只需在每个组件的特殊函数中定义如何初始化状态(无论是同步还是异步),并在层次结构呈现为HTML时调用这些函数.它的工作方式是在状态完全初始化之前不会呈现组件.问题是它需要Fibers,据我所知,这是一个改变标准JavaScript行为的Node.js扩展.虽然我非常喜欢这个结果,但在我看来,我们并没有找到解决方案,而是改变了游戏规则.而且我认为我们不应该被迫这样做来使用React.js的这个核心功能.我也不确定这个解决方案的一般支持.是否可以在标准Node.js虚拟主机上使用Fiber？
我自己在思考一点.我没有真正想过通过实现细节,但一般的想法是我会以类似于React-async的方式扩展组件,然后我会在根组件上重复调用React.renderComponentToString().在每次传递过程中,我会收集扩展回调,然后在传递和传递中调用它们来填充商店.我将重复此步骤,直到填充当前组件层次结构所需的所有存储.有很多事情需要解决,我对性能特别不确定.

我错过了什么？还有其他方法/解决方案吗？现在我正在考虑采用react-async/fiber方式,但我并不完全确定它,如第二点所述.

关于GitHub的相关讨论.显然,没有官方方法甚至解决方案.也许真正的问题是如何使用React组件.像简单的视图层(几乎是我的建议第一)或像真正的独立和独立组件？

flux node.js reactjs reactjs-flux

tob*_*bik

2016 09-09

111
推荐指数

2
解决办法

1万
查看次数

在哪个嵌套级别,组件应从Flux中的Stores读取实体？

我正在重写我的应用程序以使用Flux,我在从商店检索数据时遇到问题.我有很多组件,它们很多.其中一些是大(Article),一些是小而简单(UserAvatar,UserLink).

我一直在努力应对组件层次结构中应该从Stores读取数据的地方.
我尝试了两种极端的方法,我都不喜欢这两种方法:

所有实体组件都读取自己的数据

需要来自Store的某些数据的每个组件只接收实体ID并自行检索实体.
例如,Article传递articleId,UserAvatar并UserLink传递userId.

这种方法有几个明显的缺点(在代码示例下讨论).

var Article = React.createClass({
  mixins: [createStoreMixin(ArticleStore)],

  propTypes: {
    articleId: PropTypes.number.isRequired
  },

  getStateFromStores() {
    return {
      article: ArticleStore.get(this.props.articleId);
    }
  },

  render() {
    var article = this.state.article,
        userId = article.userId;

    return (
      <div>
        <UserLink userId={userId}>
          <UserAvatar userId={userId} />
        </UserLink>

        <h1>{article.title}</h1>
        <p>{article.text}</p>

        <p>Read more by <UserLink userId={userId} />.</p>
      </div>
    )
  }
});

var UserAvatar = React.createClass({
  mixins: [createStoreMixin(UserStore)],

  propTypes: { …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs reactjs-flux

Dan*_*mov

2016 12-08

88
推荐指数

2
解决办法

1万
查看次数

如何使用react.js中的Enter键提交表单？

这是我的表单和onClick方法.我想在按下键盘的Enter按钮时执行此方法.怎么样？

注意:没有赞赏jquery.

 comment: function (e) {
        e.preventDefault();
        this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value})
    },


 <form className="commentForm">
     <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text"  /><br />
    <input type="text" placeholder="userPostId" ref="userPostId" /> <br />
     <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button>
    </form>

Run Code Online (Sandbox Code Playgroud)

reactjs reactjs-flux

Jas*_*rne

lucky-day

81
推荐指数

4
解决办法

7万
查看次数