创建React Hooks的心智模型

个人在一开始接触react hooks的时候，觉得代码的执行有点违背常识，在对react构建合理的心智模型花了不少时间。函数组件(Functional Component)没有生命周期的概念，React控制更新，频繁的更新但是值有的会变，有的不变，反而使得程序的可理解性变差了。

不过在后来不断地学习以及运用之后，我个人觉得hooks其实是一种非常轻量的方式，在项目构建中，开发自定义的hooks，然后在应用程序中任意地方调用hook，类似于插件化(可插拔)开发，降低了代码的耦合度。但随之也带来了一些麻烦的事情，有的同学在一个hook里写了大量的代码，分离的effect也冗杂在一起，再加上多维度的变量控制，使得其他同学难以理解这个hook到底在干嘛。

针对hook的内部代码冗杂的问题，首先得明确当前hook的工作，是否可拆分工作，在hook里可以调用其他的hook，所以是否可以进行多个hook拆分?或者组织(梳理)好代码的运行逻辑?

React中每次渲染都有自己的effect

React中的hooks更新，笔者认为可以把其看作是一个“快照”，每一次更新都是一次“快照”，这个快照里的变量值是不变的，每个快照会因为react的更新而产生串行(可推导的)差异，而effect中的函数每一次都是一个新的函数。

我对于hooks的心智模型，简单来讲，就是一种插件式、有状态、有序的工具函数。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!