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