我该何时使用 state ？

lxy

前言

我要的 “状态” 是这个 “状态” 吗？

提出需求

点击按钮大于等于5次后展示在此之间 render 的次数

很简单的完成（可能是你的第一直觉）

从代码中看出此时我们为了直观，展示了点击的次数 我们不需要展示点击的次数

此时我们移除当前点击的次数

那还不简单移除下面这段代码不就行了

那还不简单移除下面这段代码不就行了

   ...
   <div>点击了 {count} 次</div>
   ...

看依然管用

思考

当我们移除这个 div 的时候此时我们还需要count这个state吗？

回溯

仔细查看需求中有两个条件

  • 点击次数大于 5 次

  • 切换展示状态

第二个片段已经解决这个问题，但是总共 render 了5次

但当页面此时不需要展示当前点击的次数时：

*状态与UI之间的关系被切断了*

没错，此时 state 应该切换成 ref 了

我们需要的新状态应该是切换展示状态

清楚了思路，我们再次重构

Amazing !!!

依然正常工作，而且此时仅仅 render 了 1 次

结论

当状态与UI无关后应该考虑将 state 转换为 ref, 思考清楚页面中变与不变的状态到底是什么

评论