React native inter-component communication local refresh

Component is one of the greatest advantages of react-native, because we can do partial refreshes to improve performance.

The parent component, as shown in the figure, contains a child component addition that can dynamically add subcomponents

Log output:

Add key code:

_onpress () {
        if (show) {/* Display cannot add */
           return when deleted;
        }
        Let arr = this.state.list;
        Arr.push (This._renderitem ());
        This.setstate ({
            list:arr,
        });
    };
    _renderitem () {
        count = this.id+1;
        This.id = count;
        Return (<ceilitem ref={(component) =>{
                This.reflist.push (component)
            }}
                          Id={count}
                          Onchildhanlder={this.onchildhanlder}
            >
            </CeilItem>
        );
    }

Click Show to dynamically update subcomponents without refreshing the parent component

As shown below:

Log

Only the child view is refreshed without refreshing the parent view

Show Key code:

Parent component:

  /* Change the item layout *
    /_show () {
        show = Show?false:true;
        for (let i=0;i<this.reflist.length;i++) {
            this.reflist[i].change (show);
        }
    }
    Onchildhanlder (inputID) {let
        len = this.reflist.length;
        for (let i=0;i<len;i++) {let
            id=this.reflist[i].props.id;
            if (inputid==id) {
                del++;
                Console.log ("Delete I:", i);
                This.reflist[i].delete ();
            }
        }
        /* All deleted before you can add */
        show = Del==count?false:show;
    }

Sub-component code:

  Change (flag) {this.setstate ({flag:flag});
    } delete () {this.setstate ({delete:true});
        } hide () {Let centerpart_right = 0;
        Let rightpart_width = 0; Return (<view style={styles. item}> <view style={styles.leftpart}> </View> <view style={[styles.c Enterpart, {marginright:centerpart_right}]}> </View> <view style={[styles.rightpart,{w
    Idth:rightpart_width,position: ' absolute ', right:0}]}> </View> </View>);
        } show () {Let id=this.props.id;
        Let Onchildhanlder=this.props.onchildhanlder;
        Let centerpart_right = 70;
        Let rightpart_width = 60; Return (<view style={styles. item}> <view style={styles.leftpart}> </View> <view style={[styles.c
      Enterpart, {marginright:centerpart_right}]}> </View>      <view style={[styles.rightpart,{width:rightpart_width,position: ' Absolute ', right:0},{justifycontent: ' Center ',
                    Alignitems: ' Center '}]}> <touchableopacity onpress={() =>{onchildhanlder (ID)}}>
                <text style={[styles.textstyle]}> del </Text>
    </TouchableOpacity> </View> </View>); }

GitHub Full code: Https://github.com/wuyunqiang/react-/tree/master/test/view