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

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

作者: Cola1993a | 来源:发表于2017-07-12 21:29 被阅读11次

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

    首先: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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/ltamhxtx.html