[笔记]《深入浅出React和Redux》- 设计高质量的React组件

时间:2022-10-10 16:23:21

1. 易于维护组件的设计要素

作为软件设计的通则,组件的划分要满足高内聚(High Cohesion)和低耦合(Low Coupling)的原则。

 

高内聚指的是将逻辑紧密相关的内容放在一个组件中。用户界面无外乎内容、交互行为和样式。传统上,内容由 HTML 表示,交互放在 JavaScript 代码文件中,样式放在 CSS 文件中定义。这虽然满足一个功能模块的需要,却要放在三个不同的文件中,这其实不满足高内聚的原则。React 却不是这样,展示内容的 JSX、定义行为的 JavaScript 代码,甚至定义样式的 CSS,都可以放在一个 JavaScript 文件中,因为它们本来就是为了实现一个目的存在的,所以说 React 天生具有高内聚的特点。

 

低耦合指的是不同组件之间的依赖关系要尽量弱化,也就是每个组件要尽量独立。

 

2. React 组件的数据

prop 和 state 的对比

  • prop 用于定义外部接口,state 用于记录内部状态;
  • prop 的赋值在外部世界使用组件时,state 的赋值在组件内部;
  • 组件不应该改变 prop 的值,而 state 存在的目的就是让组件来改变的。

组件绝不应该去修改传入的 props 的值,加入父组件包含多个子组件,然后把一个 JavaScript 对象作为 props 值传给这一个子组件,而某个子组件居然改变了这个对象的内部值,那么,接下来其他子组件读取这个对象会得到什么值呢?当时读取了修改过的值,但是其他子组件是每次渲染都读取这个 props 的值呢?还是只读一次以后就用那个最初值呢?一切皆有可能,完全不可预料。也就是说,一个子组件去修改 props 中的值,可能让程序陷入一团混乱之中,这完全违背了 React 设计的初衷。

 

3. 组件的生命周期

3.1 装载过程

  • constructor
  • getInitialState
  • getDefaultProps
  • componentWillMount
  • render
  • componentDidMount

在装载过程中,componentWillMount 会在调用 render 函数之前被调用,componentDidMount 会在调用 render 函数之后被调用。

 

通常我们不用定义 componentWillMount 函数,顾名思义 componentWillMount 发生在“将要装载”的时候,这个时候没有任何渲染出来的结果,即使调用 this.setState 修改状态也不会引发重新绘制,一切都迟了。

 

render 函数被调用完之后,componentDidMount 函数并不是会被立刻调用,componentDidMount 被调用的时候,render 函数返回的东西已经引发了渲染,组件已经被“装载”到了 DOM 树上。

 

componentWillMount 可以在服务器端被调用,也可以在浏览器端被调用;而 componentDidMount 只能在浏览器端被调用,在服务器端使用 React 的时候不会被调用。

 

3.2 更新过程

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

1. componentWillReceiveProps(nextProps)

只要是父组件的 render 函数被调用,在 render 函数里面被渲染的子组件都会经历更新过程,不管父组件传给子组件的 props 有没有改变,都会触发子组件的 componentWillReceiveProps 函数。

 

2. shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate 函数决定了一个组件什么时候不需要渲染。

 

3. componentWillUpdate 和 componentDidUpdate

和装载过程不同的是,当在服务器端使用 React 渲染时,这一对函数中的 Did 函数,也就是 componentDidUpdate 函数,并不是只在浏览器端才执行的,无论更新过程发生在服务器端还是浏览器,该函数都会被调用。

 

使用 React 做服务器端渲染时,基本不会经历更新过程,因为服务器端只需要产出 HTML 字符串,一个装载过程就足够产出 HTML 了,所以正常情况下服务器端不会调用 componentDidMount 函数,如果调用了,说明我们的程序有错误,需要改进。

 

3.3 卸载过程

React 组件卸载过程只涉及一个函数 componentWillUnmount,当 React 组件要从 DOM 树上删除掉之前,对应的 componentWillUnmount 函数会被调用,所以这个函数适合做一些请理性的工作。