type
status
date
slug
summary
tags
category
icon
password
前言
我要的 “状态” 是这个 “状态” 吗?
提出需求
点击按钮大于等于5次后展示在此之间
render
的次数很简单的完成(可能是你的第一直觉)
从代码中看出此时我们为了直观,展示了点击的次数
我们不需要展示点击的次数
此时我们移除当前点击的次数
那还不简单移除下面这段代码不就行了
看依然管用
思考
当我们移除这个
div
的时候此时我们还需要count
这个state
吗?回溯
仔细查看需求中有两个条件
- 点击次数大于 5 次
- 切换展示状态
第二个片段已经解决这个问题,但是总共
render
了5次但当页面此时不需要展示当前点击的次数时:
状态
与UI
之间的关系被切断了
没错,此时
state
应该切换成 ref
了我们需要的新状态应该是
切换展示状态
清楚了思路,我们再次重构
Amazing !!!
依然正常工作,而且此时仅仅
render
了 1 次结论
当
状态
与UI
无关后应该考虑将 state
转换为 ref
, 思考清楚页面中变与不变
的状态到底是什么