react全局状态管理_鲸技术：浅谈React的状态管理

0 前言

随着鲸钱包的不断壮大，用户规模的不断增加，项目变得越来越庞大，业务逻辑也越来越复杂。与此同时，前端技术也在迅猛发展。对前端工程师来说，这既是机遇，也是挑战。如何给用户提供更流畅的交互？如何更好的进行代码维护和扩展？为了解决此类问题，我们选择了React。

React是Facebook开源的一款JavaScript库，其具有以下优点：

1. 目前前端使用的技术栈是Express + jQuery + Hbs。当我们动态展示网页时，需要使用jQuery对DOM进行操作，但复杂或频繁的DOM操作会大大降低网页性能。而React采用Virtual DOM机制，不会直接操作实际DOM，每当数据变化时，React都会重新构建整个虚拟DOM，然后对比当前虚拟DOM和原先的虚拟DOM，最后根据前后的差异更新真实DOM，大大的提高了网页性能，让交互更流畅。

2. Virtual DOM不仅简化了DOM操作，同时也带来了组件化开发的思想。所谓组件，即封装起来的具有独立功能的UI部件。为此React提供了JSX语法，简单的说就是可以在JavaScript中写HTML。使用jQuery操作DOM时，我们需要说明具体怎么做，比如先定位到网页元素，再绑定事件，再添加事件回调函数。而使用JSX，是声明式编程，只要表明想要实现什么目的，应该做什么，不需指定具体怎么做。

3. 目前前端使用的是MVC软件架构，虽然可以在Control中进行数据处理，但是由于是双向数据流，以及有时jQuery会改变页面数据，无法清晰精确的把握页面数据的变化，也不利于后期的代码维护。而React采用单向数据流，数据的传递只能是从父组件传递给子组件。数据都是存储在state中，也只能通过setState方法更新数据。这样的状态管理方式，能让前端工程师精确把握页面数据的变化，于是页面也就成了数据的可视化快照，数据和页面一一对应。

从上述优点，可以总结出React的核心思想：UI=render(state)。React是根据state(或者props)去渲染页面的，类似于一个函数，输入state，输出UI。所以状态管理是React的重中之重。

那么如何做好状态管理呢？接下来我将介绍React自身和一些优秀的第三方库是如何进行状态管理的，让你打好使用React的基础。