TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Best practices for building large React applications

153 点作者 mtschopp将近 10 年前

9 条评论

guscost将近 10 年前
Some great ideas, especially the examples of breaking down UI into smaller components. Thanks for writing this.<p>I&#x27;ve been using Flux to manage pretty much all of the application state, and pass it to the top-level component and down through the tree of components as props. This idea was very well described in an older article[0]. I would add that this approach makes shouldComponentUpdate very important, since more of the tree is rendered on every change.<p>Your example of the dropdown state is a great counter-example where Flux is not necessary or even helpful, and in fact I&#x27;ve used the same example when explaining it myself.<p>One thing I&#x27;m not sure about is whether the save action should use a callback (or Flux ActionCreator), or whether it should be triggered by comparing the values in componentDidUpdate as you suggest. Making that behavior declarative is certainly appealing, but I&#x27;d be worried that an action like a save could be idempotent, with unpredictable side effects, and therefore makes more sense to be explicit&#x2F;imperative? I&#x27;m not sure which one would be easier to work with at very large scale, and it looks like your application is larger than any of mine, so perhaps the declarative style works better. If anyone has more to say about this I&#x27;m curious to hear opinions.<p>[0] <a href="http:&#x2F;&#x2F;aeflash.com&#x2F;2015-02&#x2F;react-tips-and-best-practices.html" rel="nofollow">http:&#x2F;&#x2F;aeflash.com&#x2F;2015-02&#x2F;react-tips-and-best-practices.htm...</a>
评论 #10042496 未加载
findjashua将近 10 年前
I like me some React, but my only gripe w it is the synthetic events, which can result in a single model&#x27;s state being updated by multiple listeners.<p>I have replaced synthetic events w event streams, and couldn&#x27;t be happier w how much cleaner the code has become as a result of replacing setters with stream-combinators.<p>The architecture roughly follows Elm&#x27;s Model-View-Update, by splitting each component into view.jsx and update.js.<p>1. Update contains the eventstreams (replacement for synthetic events), and are transforms them into update-streams.<p>2. The model combines multiple update streams to return a model-stream.<p>3. The view combines multiple model streams, and the subscriber at the end does a `setState` to trigger the re-render<p>Using streams also has the side-benefit of not needing the didUpdate, shouldUpdate etc lifecycle hooks.<p>Here&#x27;s a gist w the eventstream code: <a href="https:&#x2F;&#x2F;gist.github.com&#x2F;findjashua&#x2F;e78063e6591a2c234919" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;findjashua&#x2F;e78063e6591a2c234919</a><p>Happy to answer any questions.<p>Edit: special thx to Andre Staltz for the insightful discussions.
jxm262将近 10 年前
&gt; Flux is also quite verbose, which makes it inconvenient for data state, state that is persisted to the server. We currently use a global Backbone model cache for data fetching and saving but we’re also experimenting with a Relay-like system for REST apis. (Stay tuned for more on this topic).<p>What do they mean by this? I _think_ I&#x27;ve been doing something similar on my projects lately. Using Meteor as my backend pub&#x2F;sub model, and React.js as my front end. Ties together pretty nicely although there&#x27;s a range of other issues I&#x27;m still trying to work out (1 test frameworks for both React and Meteor code, etc..)
评论 #10042761 未加载
评论 #10041810 未加载
porker将近 10 年前
Here&#x27;s the link to last time it was discussed (3 months ago): <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9515392" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9515392</a>
hellbanner将近 10 年前
Any examples of good tile-based board games written in React (or other JS frameworks)?
评论 #10042844 未加载
评论 #10044170 未加载
评论 #10044313 未加载
vkjv将近 10 年前
&quot;If you find yourself duplicating&#x2F;synchronizing state between a child and parent component, then move that state out of the child component completely.&quot;<p>I have exactly one exception to this rule and I would love is someone could provide a recommended way to <i>not</i> make it an exception. Debouncing. For example, if you have a input field that lets you type a number for pagination, debouncing the change of that value with the displayed copy of it.<p>This is implemented with a debounced input field type that uses props to get and update the value, but maintains it&#x27;s own state for what is displayed. It uses `componentWillReceiveProps` to stay in sync.<p>EDIT:<p>After re-reading, it looks like the author uses this exact same exception for the &quot;select&quot;. This is considered UI state and should be fine.
Sir_Cmpwn将近 10 年前
For what it&#x27;s worth, there&#x27;s also a componentWillUpdate, which I find better than componentDidUpdate and comparing with the previous state.
dmk46将近 10 年前
@Sir_Cmpwn I agree, only it&#x27;s a shame you can&#x27;t set state in componentWillUpdate, only in componentDidUpdate.
aikah将近 10 年前
never understood why React needed flux on top. Or does that mean React doesn&#x27;t solve the problem it is supposed to solve on its own ? or flux should have been baked in react? never understand what flux was about anyway.
评论 #10043674 未加载