跳到主要内容

React哲学

React哲学​

把用户界面拆分成一个个组件，然后把组件连接在一起，最后让数据流经它们。

从原型开始​

步骤一：将 UI 拆解为组件层级结构​

使用单一功能原理进行程序设计，一个组件理想的情况是仅作一件事情，后面如果功能变得臃肿应该进行拆解，把其拆成更小的组件，避免成为巨石组件

步骤二：使用 React 构建一个静态版本​

拥有了组织层级之后开始进行应用程序的实现，最直接的办法是根据前面给出的数据模型，构建一个静态的页面（没有交互只有UI），目前只需要给组件静态的数据，使其渲染即可。

tip：在这部分中，你不需要使用任何 state

有两种构建思路

  1. 从层级结构更高的组件向下构建（在简单的例子中，自上而下构建更加简单）
  2. 从层级结构更低的组件向上构建（在大型项目中，自下而上构建更简单）

步骤三：找出 UI 精简且完整的 state 表示​

为了让UI交互，需要用户可以更改数据结构。可以使用state进行实现。

让state成为应用程序需要记住改变数据的最小集合。组织 state 最重要的一条原则是保持它 DRY（不要自我重复）

state的原则:

  • 随着时间推移 保持不变，便不是 state。
  • 通过 props 从父组件传递，便不是 state。
  • 是否可以基于已存在于组件中的 state 或者 props 进行计算，不是state！

步骤四：验证 state 应该被放置在哪里​

需要验证哪个组件是通过改变 state 实现可响应的，或者 拥有 这个 state。React 使用单向数据流，通过组件层级结构从父组件传递数据至子组件。要搞清楚哪个组件拥有哪个 state

为你应用程序中的每一个 state:

  1. 验证每一个基于特定 state 渲染的组件。
  2. 寻找它们最近并且共同的父组件——在层级结构中，一个凌驾于它们所有组件之上的组件。
  3. 决定 state 应该被放置于哪里:
    1. 通常情况下，你可以直接放置 state 于它们共同的父组件。
    2. 你也可以将 state 放置于它们父组件上层的组件。
    3. 如果你找不到一个有意义拥有这个 state 的地方，单独创建一个新的组件去管理这个 state，并将它添加到它们父组件上层的某个地方。

步骤五：添加反向数据流​

为了子组件也可以更改父组件的state，将父组件的setState传递到子组件中调用