React Tabs延迟加载

Question

我是jquery的React初学者。假设我有三个标签。我正在寻找一种延迟加载3个tab内容的方法，这样，当我第一次单击Tab1时，将仅加载tab1内容​​并保留在DOM中（而不是tab2和tab3内容）。当我单击Tab2时，将加载tab2的内容（而不是tab3的内容）。当我再次单击Tab1时，原始的tab1内容​​将保留在DOM中，而无需重新加载和重新呈现。

这是代码：

            String json = "{
              "Classes": {
                "Primary": {
                  "Classes": {
                    "1": {
                      "section": [
                        "a",
                        "b"
                      ]
                    },
                    "2": {
                      "sections": [
                        "a",
                        "b"
                      ]
                    }
                  }
                }
              }
            }";

            try {
                JSONObject jsonObject = new JSONObject(json);
                Log.d("jsonObj", jsonObject.toString());

                JSONObject classJsonObj = jsonObject.optJSONObject("Classes");
                JSONObject primaryJsonObj = classJsonObj.optJSONObject("Primary");
                JSONObject internalClassJsonObj = primaryJsonObj.optJSONObject("Classes");

                if(internalClassJsonObj != null){
                    int i = 1;
                    JSONObject dynmaicInternalJsonObj = null;
                    while (true){
                        dynmaicInternalJsonObj = internalClassJsonObj.optJSONObject(i+"");
                        if(dynmaicInternalJsonObj != null){
                            JSONArray sectionJsonArr = dynmaicInternalJsonObj.optJSONArray("sections");
                            Log.d("SectionArr", sectionJsonArr.toString());

                            // Finally you got your section data here...
                            if(sectionJsonArr != null){
                                for(int j=0; j<sectionJsonArr.length(); j++){
                                    System.out.println("Dynamic Sections Data is: - " + sectionJsonArr.opt(j));
                                }

                                System.out.println("\n\n");
                            }

                        }else{
                            break;
                        }

                        i++;
                    }

                }

            } catch (JSONException e) {
                e.printStackTrace();
            }

它可以工作，但是问题在于所有三个组件（tab1，component，tab2.component和tab3.component）是同时加载的，即使用户从不单击tab2或tab3，也导致服务器中的处理浪费

tab2和tab3中的内容都需要在服务器上进行“昂贵”的处理，这就是为什么我要避免这种情况。

谢谢。