react native 组件间通信 局部刷新

组件化是react-native的最大优点之一，因为组件化我们可以做到局部刷新，提高性能。

如图所示 父组件包含连个子组件 添加可以动态增加子组件

log输出：

add关键代码：

_onPress() {        if(show){/*显示删除时 不能添加*/           return ;        }        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>        );    }

点击show动态更新子组件 但不刷新父组件 

如下所示：

log:

只刷新了子view 没有刷新父view

show关键代码：

父组件：

  /*改变item布局*/    _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();            }        }        /*全部删除后才可以添加*/        show = del==count?false:show;    }

子组件代码：

  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.centerPart, {marginRight:centerPart_right}]}>            </View>            <View style={[styles.rightPart,{width: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.centerPart, {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完整代码：https://github.com/wuyunqiang/react-/tree/master/test/view