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

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 函数会被调用，所以这个函数适合做一些请理性的工作。

转载于:https://www.cnblogs.com/SyMind/p/10226592.html