From 296d13308f656f025af66a440cbd7e8d94338e9f Mon Sep 17 00:00:00 2001 From: Martin Konicek Date: Wed, 7 Dec 2016 10:40:59 -0800 Subject: [PATCH] Upselling ListView in ScrollView's docs Summary: Internal research at FB has shown that many devs don't know why they should use ListView instead of ScrollView, or that ListView even exists. This PR changes ScrollView's docs to upsell ListView. I could put this as a separate guide in the docs, but I think this place will have the best possible reach for target audience. Suggestions welcome. Let me know if it doesn't make sense or is too verbose. Closes https://github.com/facebook/react-native/pull/11349 Differential Revision: D4292109 Pulled By: mkonicek fbshipit-source-id: e4a14e5a55333c9282d0e407461505e71e850b20 --- Libraries/Components/ScrollView/ScrollView.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index eaaa2e86f94..3f39492a4fd 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -44,6 +44,21 @@ const requireNativeComponent = require('requireNativeComponent'); * * Doesn't yet support other contained responders from blocking this scroll * view from becoming the responder. + * + * + * `` vs `` - which one to use? + * ScrollView simply renders all its react child components at once. That + * makes it very easy to understand and use. + * On the other hand, this has a performance downside. Imagine you have a very + * long list of items you want to display, worth of couple of your ScrollView’s + * heights. Creating JS components and native views upfront for all its items, + * which may not even be shown, will contribute to slow rendering of your + * screen and increased memory usage. + * + * This is where ListView comes into play. ListView renders items lazily, + * just when they are about to appear. This laziness comes at cost of a more + * complicated API, which is worth it unless you are rendering a small fixed + * set of items. */ const ScrollView = React.createClass({ propTypes: {