React前端状态管理心得

1. 没有银弹,redux也好,mobx也好,react-easy-state也好,能力加强的同时,学习成本,浏览器兼容成本也加大

2. 绝大大数页面的状态理清后,其实也想象中不那么复杂,首要的应该是注意以下几点:
(1)尽可能减少所需的状态(哪些才是真正需要的),很多数据了包含多维度的状态,不要制造状态(混乱),真正重要的是数据,而非状态。深入理解,吃透你的数据。
(2)哪些是计算属性,计算属性(仅get,非set)尤其要提出来,不应该set的一定不要set的,逻辑上可能是同样的状态,但搞好两个状态,并同时去set,会导致真实世界混乱。

3. 组件拆分、属性的传递的逻辑性、正确性和清晰性也是状态管理的一部分,而且其重要性丝毫不亚于纯数据的状态。
(1)正确决定组件的从属关系,并尽量减少不必要的组件。(如同节约dom标签一样)
(2)在上面的前提下,属性的传递可以尽量控制在不要超过2层,这样props的数据流向也一目了解
(3)在jsx里,属性传递的写法应采取始终解构的写法,这样最接近函数参数传递的感觉,如:
<BtnGroup$ {...{ pageTitle, survey }} />
const BtnGroup$ = ({ pageTitle, survey }) => {})
(4)计算属性应尽量由上级组件传给下级,从而使尽可能多的组件成为仅接受props并渲染的纯函数组件。
(5)函数属性传递时有意义的命名至关重要。

4. 勿过度追求完美,尤其是在UI与交互上(最难处理的是动画),要做到完美,需要极其复杂的状态管理,应先有一些效果,在保证不至于把状态搞得一团糟,在完全想清楚了数据的逻辑后,逐步加强。

5. react-global-state-hook的非reducer的用法,细粒度的get、set其实基本够用,尤其对状态变化的跟踪(从代码层面跟踪,选中所有get或set)比redux并不差。

6. 一个应用程序,最最核心的,最最复杂的逻辑,就那么几个,绝不会多,所以对这部分页面代码一定要精益求精,逻辑、结构一定要优雅如水。
展开
3