Thinking in React
文章目录

Thinking in React

就是React项目流程的rethinking

Step 1: Break The UI Into A Component Hierarchy

  1. draw boxes around every component (and subcomponent) in the mock and give them all names
    • 使用一些规则(比如单一原则)判断元素应该属于哪些部分

      Component diagram

  2. 得到Component层次列表
  3. 决定数据模型

Step 2: Build A Static Version in React

  1. 先写个静态的
    • 重用的Component要准备好
    • 静态的部分应该不需要用到任何State, State应该仅仅用于动态的Component
    • 从上往下或者从下往上建立都可以, 小型项目从上往下会快一些, 大型项目反之
  2. 改为动态模型
    • 一般最大的那个Component会接受数据作为全部数据源

Step 3: Identify The Minimal (but complete) Representation Of UI State

  1. 建立项目的时候, 最好能先确定minimal set of mutable state, 也就是最小动态模块
  2. 判断一下动态模块是否可以设置成state

    之前提到过的三个原则进行判断:

    1. Is it passed in from a parent via props? If so, it probably isn’t state.
    2. Does it remain unchanged over time? If so, it probably isn’t state.
    3. Can you compute it based on any other state or props in your component? If so, it isn’t state.

Step 4: Identify Where Your State Should Live

  1. 决定哪些Component应该拥有这些State, 哪些Component应该让State进行变化

    React从头到尾就只有一条数据流有这些需要注意的:

    1. 可以通过自身State进行render的Component
    2. 最大的那个Component应该拥有State, 用于流程管理之类的业务, 这个State可能包含所有动态成分的内容
    3. 如果无法找到一个值得拥有一个State的Component, 那就写个新的, 可能可以放在最大的State的更上一层

Step 5: Add Inverse Data Flow

就是数据的各种交互呗

一个重要的概念:

有些时候parent class可能会给child class提供一个eventHandler()

这玩意可以当做一种callback, 赋值给child class的onchange, child class通过调用这个onChange使得parent class的state变化.

如果只有一个值的情况下甚至可以不用给child class设置任何的state