源码学习

# 深入了解组件

接下来仔细看看组件的一些相关内容

# 设计组件的原则

组件设计的时候按照“分而治之”的策略，把一个复杂的功能拆成多个小组件，每个组件只关注单个功能，避免组件变得臃肿和难以维护。

拆分组件最关键的就是确定组件的边界。每个组件都应该可以独立存在，如果两个组件逻辑太紧密，难以清晰的划分格子的责任，那么需要组件本身就不应该拆开，作为一个组件更加合理。

在划分组件时，需要满足高内聚（High Cohesion）和低耦合（Low Coupling）的原则。

  1. 高内聚：逻辑紧密的相关内容放到一个组件中。React 组件天生具有高内聚的特点。内容展示的 JSX，定义行为的 JavaScript，以及样式，都可以放在一个 JavaScript 文件中
  2. 低耦合：指的是不同组件之间的依赖关系尽量弱化，也就是每个组件尽量保持独立。这需要我们对系统的功能有充分的认识，根据功能去划分模块，让不同组件去实现不同的功能。

# 组件的数据

React 组件的数据分两种 props 和 state。它们的修改都可能引发组件的重新渲染。

  • prop 是组件的对外接口
  • state 是组件的内部状态

# Prop

  1. 给 prop 赋值
<SampleButton
 id="sample"
 borderWidth={2}
 onClick={onButtonClick}
 style={{color: "red"}}
/>

prop 看起来和 HTML 的属性很像，不过 HTML 的属性值都是字符串，而 prop 能可以使用任何 JavaScript 的数据类型。当 prop 的类型不是字符串的时候，在 JSX 中必须用花括号 {} 来包住。

可以通过 prop 将外部数据传给 React 组件。同样 React 要将数据传给外部，也可以使用 prop，因为 prop 也可以函数。这种 prop 相当于是父组件给子组件传了一个回调函数，子组件调用函数类型的 prop 的时候，可以带上对应的参数，这样就反过来将子组件的数据传到了外部。

# 组件的生命周期

← 深入 redux →