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

sturuby40443
1,204 阅读3分钟

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

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

    一个组件最好只做一件事，并做好

  2. 组件的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的方式进行更新。

  3. prop 和 state 的对比

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

  1. 组件的生命周期

    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组件之外形成全局状态，让各个组件保持和全局状态保持同步，这样更容易控制。此时，全局状态就是唯一可靠的数据源。

avatar
文章
阅读
粉丝