React，关于redux的一点小见解

阳光穿透心脏的1/2处 2022-05-23 02:04 150阅读 0赞

最近项目做多页面应用使用到了，react ＋ webpack + redux + antd 架构去构建多页面的应用.所以在这里分享一下我自己对于redux的一些见解与看法。

redux是状态管理的一个工具，或者称之为状态机，它的数据流的是单向的。虽然它本身受到Flux的影响很大，但是它的核心概念很简单，就是reduce合并一样等同于是ES5中Array.prototype.reduce，这个reduce用于合并数组的元素，它是基于一个react的component的接口，getChildContext接口实现的。下面是ReactClass的interface：

var ReactClassInterface = { mixins: SpecPolicy.DEFINE_MANY, statics: SpecPolicy.DEFINE_MANY, propTypes: SpecPolicy.DEFINE_MANY, contextTypes: SpecPolicy.DEFINE_MANY, childContextTypes: SpecPolicy.DEFINE_MANY, // ==== Definition methods ==== getDefaultProps: SpecPolicy.DEFINE_MANY_MERGED, getInitialState: SpecPolicy.DEFINE_MANY_MERGED, getChildContext: SpecPolicy.DEFINE_MANY_MERGED, render: SpecPolicy.DEFINE_ONCE, // ==== Delegate methods ==== componentWillMount: SpecPolicy.DEFINE_MANY, componentDidMount: SpecPolicy.DEFINE_MANY, componentWillReceiveProps: SpecPolicy.DEFINE_MANY, shouldComponentUpdate: SpecPolicy.DEFINE_ONCE, componentWillUpdate: SpecPolicy.DEFINE_MANY, componentDidUpdate: SpecPolicy.DEFINE_MANY, componentWillUnmount: SpecPolicy.DEFINE_MANY, // ==== Advanced methods ==== updateComponent: SpecPolicy.OVERRIDE_BASE, };

Redux认为，一个应用程序中，所有的应用模块之间需要共享访问的数据，都应该在Store的State里面。这点和React的state和props的概念是一致的。外面的props尽量不去改变，而改变的只是内部的状态state,而有shouldComponentUpdate这个生命周期函数，我们可以优化react

但是有一个原则是没有改变的，就是在你不知道你是否需要redux的时候，你肯定是不需要它。就像Flux的作者说的那样，Flux就像眼镜，你会知道你在什么时候需要它。

下面介绍一些本人对于redux的一些使用经验：最好保证State的每个节点都是[immutable][](外部不可变)的，这样确保在消费State的时候只需要进行简单的引用就可以了。从而避免Deep Equal 的遍历过程。也就是说你的state最好是键值的对象形式，避免数组形式的非state最底层值的形式。reducers为纯函数，如果判断太多，可以使用combineReducers(),去组合reducer,分离reducer合理管理你的state.并不需要所有的数据都在State里面，虽然这也是可以，总之一句话，合适你的才是最好的，适用需要的代码才是最好的。建议所以的asyncAction都应该被管理。这很大程度上，可以提高用户体验。建议适用Promise async/await 去实现异步的管理。在redux中有很多的中间件，可以加快开发效率。

总结：说白了就是你可以把redux当作是mvc中的model,controller层,react它就是mvc中view层

[immutable]: https://github.com/facebook/immutable-js