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

最新推荐文章于 2022-09-10 22:05:06 发布

胖猫的夏天

最新推荐文章于 2022-09-10 22:05:06 发布

阅读量655

点赞数

分类专栏： React 文章标签： react 前端

本文链接：https://blog.csdn.net/qq_26708777/article/details/78178726

版权

React 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

如何设计高质量的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