Redux总结

setState方式更新

image

这种状态带来的后果，两方面分析：

性能：祖父子组件之间多余的状态传递，导致宝贵的内存资源浪费，同时界面渲染的速度也会变慢，自然用户体验就变差了。

状态管理：当程序不断的迭代，界面布局越来越复杂，必然就会产生许多的state状态，那你是如何有效的管理这些状态？是什么原因导致UI多次渲染？是哪一步操作导致的UI组件的变化？在没有使用redux前你可能已经发现可以使用生命周期函数中的shouldComponentUpdate来减少子组件中没必要的渲染，但终究解决不了状态管理复杂的难题。

当你使用redux后，复杂的应用程序状态流程是这样的：

Redux方式更新

image
image.png

Redux 不是必须的，它的使用场景是当你觉得项目内的组件通信太过于繁琐的时候使用，比如你有很多页面，很多组件，他们之间的通信很麻烦，或者说有些数据你需要保存起来供所有组件使用,这时候 Redux 的作用就体现出来了。

从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux：

某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

示例：

action:

export const addTodo = text => ({
    type: ADD_TODO,
    id: nextTodoId++,
    text
});

reducer（纯函数，接收state，action，返回state）:

const todos = (state = [], action) => {
    let {id, text, type} = action;
    switch (type) {
        case ADD_TODO:
            return [
                ...state,
                {
                    id: id,
                    text: text,
                    completed: false
                }
            ];
        case TOGGLE_TODO:
            return state.map(todo => (todo.id === id) ? {...todo, completed: !todo.completed} : todo);
        default:
            return state;
    }
};

多个reducer合成一个reducer：

export default combineReducers({
    todos,
    visibilityFilter
})

onPress中使用action：

import React, { Component } from 'react'
import {
    View,
    TextInput,
    Button,
} from 'react-native'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

class AddTodo extends Component {
    constructor(props){
        super(props);
        this.inputValue = '';
    }

    render(){
        let { dispatch } = this.props;
        return (
            <View style={{flexDirection: 'row'}}>
                <TextInput
                    style={{flex:1, borderWidth: 1, borderColor: '#cccccc', textAlign: 'center'}}
                    onChangeText={text => this.inputValue = text}
                />
                <Button title="Add Todo" onPress={() => dispatch(addTodo(this.inputValue))}/>
            </View>
        )
    }
}

export default connect()(AddTodo)

文件入口传入store：
App.js

import React, { Component } from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import Group from './js/components/Group'
import rootReducer from './js/reducers'

export default class App extends Component {
    render() {
        const store = createStore(rootReducer);
        return (
            <Provider store={store}>
                <Group />
            </Provider>
        );
    }
}

释：

入口文件传入 Store

创建store传入reducers。
使用Provider组件包裹 Group组件, store作为属性传入Provider。

refer: https://juejin.im/post/5bac26ad6fb9a05d353c8040
reactnative 性能优化：https://react.docschina.org/docs/optimizing-performance.html