仿照react文档中的react编程思想实现计时器

功能:
可以添加计时器到计时器列表中
可以删除计时器列表中的计时器
可以修改计时器的内容
可以开始或停止计时

首先:step1:组件划分
注意:组件单一功能 理清层级关系 二选一的情况为同级关系 组件要重复利用 总分关系

step2:用 React 构建一个静态版本
只使用 props 从根节点到叶结点构建静态页面

step3:找出props里是state的情况 根据实际UI,区别事件触发 三个原则
判断哪些数据是 state 的标准:
Is it passed in from a parent via props? If so, it probably isn't state.
Does it remain unchanged over time? If so, it probably isn't state.
Can you compute it based on any other state or props in your component? If so, it isn't state.

step4:确定state所在区域 根据实际的功能确定,并不是代码开始的地方

决定每个 state 由哪个 component 负责管理(初始化、更新等)。 对于每个 state 决策标准如下:
Identify every component that renders something based on that state.
Find a common owner component (a single component above all the components that need the state in the hierarchy).
Either the common owner or another component higher up in the hierarchy should own the state.
If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.

step5:state所在区域里面的props改为state

Step 6: Add inverse data flow

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • **2014真题Directions:Read the following text. Choose the be...
    又是夜半惊坐起阅读 13,447评论 0 23
  • 测试结论 常量字符串在正式赋值之前就存在,会保留到整个程序运行期间,无法清除。 在调用函数结束的时候NSStrin...
    ncnocure阅读 4,028评论 0 0
  • 有一段时间 我把葛老头的活着 每晚都嚼一遍 就像忆苦思甜般的填头 想着生活哲理 人生苦乐 行在前方 但我明白坐在这...
    橘子山阅读 1,417评论 0 1
  • 梦回初见 却是经年 多少情殇。 八月的天空弥漫桂花香 你粉红连衣裙飘舞眼睦。 信手拈一枚花瓣,放在我手心,轻声的一...
    Mr橘子阅读 1,703评论 0 2