深入浅出React之第二章：如何设计高质量的react组件

如何设计高质量的react组件？

易于维护的高质量组件的设计要素

一个组件最好只做一件事，并做好
组件的prop和state

react组件的数据分为两种，prop和state。无论哪一个属性改变都会引起组件的重新渲染。那么，在设计一个组件的时候，什么时候选用prop,什么时候选用state呢？原则很简单：prop是对外的接口，state是组件的内部状态。

2.1 react的prop

在react中，prop是从外部传递给组件的数据，一个react组件通过定义自己能够接受的prop就定义了自己的对外公共接口。

当外部世界要传递一些数据给React组件，一个最直接的方式就是通过prop,同样，React要反馈数据给外部世界，也可以用prop,因为prop的类型并不限于纯数据，还可以是函数，函数类型的prop相当于让父组件给子组件一个回调函数。子组件在恰当的时机调用函数类型的prop，可以带上必要的参数，这样就可以把信息传递给外部世界。

2.2 propTypes检查

propTypes检查提供了一种方式让组件声明自己的接口规范，声明自己支持哪些prop，每个prop应该是什么样的格式。
```
Counter.propTypes={
    caption:PropTypes.string.isRequired,
    value:PropTypes.number
}
```
2.3 react的state

驱动组件渲染的除了prop,还有state,state代表组件的内部状态。由于react组件不能修改传入的prop,所以需要记录自身数据变化，就需要用到state.
- 初始化state
```
    constructor(props){
this.state={
            count:props.value||0
        }
}
```
- 读取和更新state
```
    onClickIncrementButton(){
this.setState({
        count:this.state.value+1
    })    
}
```
  禁止使用this.state.count = this.state.count+1的方式进行更新。
prop 和 state 的对比
- prop用于定义外部接口，state用于记录内部状态
- prop的赋值是在外部世界使用组件时，state的赋值是在组件内部
- 组件不应该改变prop的值，而state存在的目的就是用来让组件改变的。
组件的生命周期

react严格定义了组件的生命周期，每个组件的生命周期都可能会经历如下三个过程：
- 装载过程(Mount)，也就是组件第一次在DOM树中渲染的过程
- 更新过程(Update),也就是组件被重新渲染的过程
- 卸载过程(Unmount)，组件从DOM中删除的过程。
- 当首次挂载组件时，按顺序执行getDefaultProps,getInitialState,componentWillMount,render,componentDidMount.
- 当卸载组件时，执行componentWillUnmount
- 当重新挂载组件时，此时按顺序执行getInitialState,componentWillMount,render,componentDidMount,并不执行getDefaultProps.
- 当再次渲染组件时，组件接受到更新状态，此时按顺序执行componentWillReceiveProps(nextProps),shouldComponentUpdate(nextProps,nextState),componentWillUpdate(nextProps, nextState),render,componentDidUpdate(prevProps, prevState).

tip:getDefaultProps,getInitialState只有在使用React.createClass方法创建组件时才会用到，我们在使用ES6语法创建时其实并不会用到。

下表详尽列出了组件生命周期的执行顺序

First Render	Unmount	Props Change	State Change
getDefaultProps	componentWillUnmount	componentWillReceiveProps	shouldComponentUpdate
getInitialState	Second Render	shouldComponentUpdate	componentWillUpdate
componentWillMount	getInitialState	componentWillUpdate	render
render	componentWillMount	render	componentDidUpdate
componentDidMount	render	componentDidUpdate
`null`	componentDidMount

5.React组件state和prop的局限

我们都知道，React是一个view层框架，只专注于渲染。那么，我们应该如何处理多个组件之间的数据管理问题呢？如果多个组件之间的数据发生重复，带来的一个问题就是如何保证重复的数据一致，如果数据存在多份而且不一致，那就很难决定到底使用哪一个数据作为正确的结果进行展示了。

目前最流行的思路是：把数据源放在react组件之外形成全局状态，让各个组件保持和全局状态保持同步，这样更容易控制。此时，全局状态就是唯一可靠的数据源。

秒客网

深入浅出React之第二章：如何设计高质量的react组件

如何设计高质量的react组件？

相关文章