react-native 之 redux、react-redux

Component 中 state 和 props 的区别；

组件Component中状态state和属性props的区别

state	props
state是在组件内部定义的一个特殊对象{}， 既起到组件内部的一种缓存作用， 也具备由于state变化而激发生命周期中渲染的方法 render()被回调的作用。且使用域仅限于组件内部。	props是组件属性，连接了外部父组件和组件内部的使用域。 它的改变激发声明周期方法componentWillReceiveProps(nextProps) 和渲染的方法render()逐次被回调。连接外部父组件， 可以通过父组件向其传递value、function等，连接内部组件， this.props缓存了当前组件的所有props属性内容 即{value, function}=this.props;

代码解释 props

 /**
   * 通过封装 FlatList 自定义一个列表组件
   */
export default class MyFlatList extends Component {
    constructor(props) {
        super(props);

    }

   ...
    /**
     *象组件FlatList中的
     *ref、ListHeaderComponent、ItemSeparatorComponent、
     *data、keyExtractor、onRefresh、refreshing等都是props属性；
     *
     * 象这种样式的定义 this.props.itemSeparator、
     * this.props.onRefresh、this.props.refreshing、this.props.onLoadMore等
     * 属于自定义组件MyFlatList的属性，是我们依照FlatList所定义的。
     * 类似象外部开放的接口一样，就像这里FlatList使用自己的
     * 属性ListHeaderComponent、ItemSeparatorComponent、data等一样来使用；
     * @returns {XML}
     */
    render() {
        return (<View style={{flex: 1, backgroundColor: Colors.bg}}>
            <FlatList
                ref={(flatlist) => this.flatlist = flatlist}
                ListHeaderComponent={this._header} 
                renderItem={this._renderItem}
                ItemSeparatorComponent={this.props.itemSeparator}
                data={this.props.data}
                keyExtractor={this._keyExtractor}
                onRefresh={this.props.onRefresh}
                refreshing={this.props.refreshing}
                onEndReachedThreshold={0.1}
                onEndReached={this.props.onLoadMore}
                initialNumToRender={3}
                getItemLayout={(data, index) => ({
                length: 250, offset: (250 + 10) * index, index
                })}
            />
        </View>);
    }
}

这是使用MyFlatList，来看下它的这个props

export default class FlatlistScreen extends Component {
 ...
    /**
     *这里MyFlatList的 itemSeparator、data、onRefresh 、refreshing 、onLoadMore 
     *就是FlatList中使用this.props.xxx来定义的。 
     * @returns {XML}
     */
    render() {
        return (<View style={styles.container}>
           ...
            <MyFlatList
                {...this.props}
                itemSeparator={() => this.separator()}
                data={this.state.dataSource}
                onRefresh = {()=>this.onRefresh()}
                refreshing = {this.state.isRefresh}
                onLoadMore = {()=>this.onLoadMore()}
            />
        </View>);
    }
}

除了以上，如果是对数据内容的props属性的变化，如上面代码的data变化，必然会激发MyFlatList组件生命周期方法componentWillReciveProps回调，这里我们可以在render方法回调前，对数据再次进行判断处理。
**这就是props属性功能和作用！！**

代码解释 state

export default class FlatlistScreen extends Component {
    constructor(props) {
        super(props);
        this.unmount = false;
        this.state = ({
            dataSource : [],
            isRefresh: true,
        });
    }
    ...
    /**
     * 功能：使用箭头函数，不使用bind；因为bind函数每调用一次就会创建一个新的函数
     */
    onRefresh() {
        this.setState({
            isRefresh: true,
        });

        //功能：制造刷新效果
        this.interval = setInterval(() => {
            clearInterval(this.interval);
            //功能：制造上拉加载更多的效果
            const data = [];
            for (let i = 0; i < 8; i++) {
                data.push({id: i, title: '亲子旅游日带娃儿玩' + i + '折起', state: '已过期', date: '2018/06/0' + (i - 8)},)
            }
            this.setState({
                dataSource: data,
                isRefresh: false,
            });

        }, 2000)
    }

   ...

    render() {
        return (<View style={styles.container}>
           ...
            <MyFlatList
                {...this.props}
                itemSeparator={() => this.separator()}
                data={this.state.dataSource}
                onRefresh = {()=>this.onRefresh()}
                refreshing = {this.state.isRefresh}
                onLoadMore = {()=>this.onLoadMore()}
            />
        </View>);
    }
}

看构造方法这里

this.state = ({
            dataSource : [],
            isRefresh: true,
        });

这就是state的定义方式。通过改变dataSource、isRefresh的值就能激发render再次渲染组件。
比如这里的onRefresh方法使用了

 this.setState({
      dataSource: data,
      isRefresh: false,
 });

来控制改变state的时机，来控制组件渲染的时机。
**这就是状态state的使用！！**

---

react-native 与 Redux 的配合使用；

在Redux使用中，一些必知的概念

Redux	state	action	reducers
Redux 是 JavaScript 状态容器， 提供可预测化的状态管理。 使用 Redux 的一个益处, 就是它让 state 的变化过程变的可预知和透明。	以一个对象树的形式储存在于一个单一的 store 中， 惟一改变 state 的办法是触发 action。	一个描述发生什么的指示器对象。 action 内必须使用一个字符串类型的 type 字段, 来表示将要执行的动作。 且应该尽量减少在 action 中传递的数据；	描述 action 如何改变 state 树。 reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。

这里是我基于Redux实现的已给简单操作流程源码