第二章 设计高质量的React组件

 

第二章 设计高质量的React组件

高质量React组件的原则和方法：

划分组件边界的原则；

React组件的数据种类；

React组件的生命周期。

2.1 易于维护组件的设计要素

1、高内聚：指的是把逻辑紧密相关的内容放在一个组件中。用户界面包括：内容、交互行为、样式。

2、低耦合：指的是不同组件之间的依赖关系要尽量弱化，也就是第个组件要尽量独立。

2.2 React组件的数据

React组件的数据分两种，prop和state，作何一个改变，都可能引发组件的重新渲染。

选prop or state，这是一个问题，哈哈，皮一下，很开心嘛！！！

prop是组件的对外接口，state是组件的内部状态。

接下来让我们实现一个父组件包含子组件

2.2.1 React的prop

1.如何传递prop给子组件

import React, {Component} from 'react'
import Counter from './Counter'
class ControlPanel extends Component {
    render() {
        return (
            <div>
                <Counter caption='first' initValue={0}></Counter>
                <Counter caption='second' initValue={10}></Counter>
                <Counter caption='third' initValue={20}></Counter>
            </div>
        )
    }
}

export default ControlPanel

caption、initValue就是要传递的prop值

2.读取prop值

import React, {Component} from 'react'

const buttonStyle = {
    margin: '10px'
}

export default class Counter extends Component {
    constructor(props) {
        super(props)

        console.log(props,'props')
　　　　　//给两个函数绑定当前this的执行环境，ES6方法创造的React组件类并不自动给我们绑定this到当前实例对象
        this.onClickIncrementButton = this.onClickIncrementButton.bind(this)
        this.onClickDecrementButton = this.onClickDecrementButton.bind(this)
        this.state = {
            count: props.initValue || 0 
        }
    }
    onClickIncrementButton() {
        this.setState({count: this.state.count + 1})
    }
    onClickDecrementButton() {
        this.setState({count: this.state.count - 1})
    }
    render(){

        return(
            <div>
                <button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
                <button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button>
                <span>count: {this.state.count}</span>
            </div>
        )
    }
}

　首先要定义自己的构造函数，一定要通过super调用父类也就是React.Component的构造函数。如果没有调用super(props)，那么组件实例被构造后，类实例的所有成员函数无法通过this.props访问到父组件传递过来的props值。给this.props赋值是React.Component构造函数的工作之一。

3.propTypes检查

对接口的规范：

每个组件支持哪些prop;

每个prop应该是什么样的格式。

从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。只是辅助开发，不会改变组件行为，prop Types 检查

也是要消耗CPU 计算资源的。

Counter.propTypes = {
    //caption必须是string
    //initValue必须是number
    //带上isRequired，表示组件必须要指定caption
    caption: PropTypes.string.isRequired,
    initValue: PropTypes.number
}
//给props的initValue一个初始值，这样可以不用把逻辑判断都放到组件的构造函数中，毕竟这样不美观
//让代码更容易读懂
Counter.defaultProps = {
    initValue: 0
}

　2.2.2 React的state

state是记录自身数据变化的

1、初始化state

通常在组件类的构造函数尾部初始化state，本例通过this.state完成state的初始化。

注意以下几点：

state必须是一个javascript对象，不能是string或number这样简单的数据类型。

state的历史：在React 创建之初，使用的是React.createClass -7J 法创建纽件类，这种方式下，通过定义组件类的一个getlnitialState 方法来获取初始state 值，但是这种做法已经被废弃了，我们现在都用ES6 的语法定义组件类，所以不再考虑定义getlnitia!State 方法。

2、读取和更新state

this.setState({name:value})，不能用this.state.name = value

直接修改this.state 的值，虽然事实上改变了组件的内部状态，但只是野蛮地修改了state ，却没有驱动组件进行重新渲染，既然组件没有重新渲染，当然不会反应this.state值的变化；而this.setState （）函数所做的事情，首先是改变this.state 的值，然后驱动组件经历更新过程，这样才有机会让this.state 里新的值出现在界面上。

3、prop和state对比

区别：

prop用于定义外部接口，state用来记录内部状态；

prop的赋值在外部使用组件时，state的赋值在组件内部；

组件不应该改变prop的值，而state存在的目的就是让组件来改变的。

2.3 组件的生命周期

装载过程(Mount)，也就是把组件第一次在DOM树中渲染的过程。

更新过程(Update)，当组件被重新渲染的过程。

卸载过程(Unmount)，组件从DOM中删除的过程。

2.3.1 装载过程

constructor

getInitialState

getDefaultProps

componentWillMount

render

componentDidmount

1、constructor

ES6每个类的构造函数，要创造一个组件类的实例，调用对应的构造函数。

无状态的组件不需要定义构造函数。

一个React组件调用构造函数的目的：

初始化state；

绑定成员函数的this环境。在ES6语法中，类的每个成员函数在执行时的this并不是类实例自动绑定的。

2、getInitialState 和 getDefaultProps

getlnitialState 这个函数的返回值会用来初始化组件的this.state ，getDefaultProps 函数的返回值可以作为props 的初始值，但是，这两个方法只有用React. createClass 方法创造的组件类才会发生作用，本书中我们一直使用的ES6 语法，所以这个函数根本不会产生作用。

3、render

render函数是React组件中最得要的函数，一个React组件可以忽略其它所有函数都不实现，但是一定要实现render函数，因为所有React组件的父类React.Component类对除render外的生命周期函数都有默认实现。

render函数不做实际的渲染动作，只是返回一个JSX描述的结构，最终由React来操作渲染过程。

如果不渲染，那就让render返回一个null或者false，告诉React这个组件不需要渲染任何DOM元素。

4、componentWillMount和componentDidmount

在装载过程中，componentWillMount会在render函数之前调用，”将要装载“没有任何渲染出来的结果，即使调用this.setState修改状态也不会发生重新绘制，在componentWillMount中做的事情，都可以提前到constructor中去做，componentWillMount的存在就是为了和componentDidMount对称。

componentDidMount会在render函数之后调用，这个兄弟的作用比较大，render函数被调用之后，componentDidMount不会立刻被调用，componentDidMount函数被调用的时候，render函数返回的东西已经引发了渲染，组件已经被装载到了DMO树上。

class Counter extends Component{
    constructor(props){
        super(props)
        console.log('enter constructor',props.caption)

        this.add = this.add.bind(this)
        this.math = this.math.bind(this)
        this.state={
            count: props.initValue || 0
        }
    }
    componentWillMount(){
        console.log('enter componentWillMount', this.props.caption)
    }

    componentDidMount(){
        console.log('enter componentDidMount', this.props.caption)
    }

    add(){
        this.setState({count: this.state.count + 1})
    }

    math() {
        this.setState({ count: this.state.count - 1 })
    }

    render(){
        console.log('enter render', this.props.caption)
        return(
            <div>
                <button style={buttonStyle} onClick={this.add}>+</button>
                <button style={buttonStyle} onClick={this.math}>-</button>
                <span>count:{this.state.count}</span>
                {/* <span>props:{this.props}</span> */}
            </div>
        )
    }
}

　　

之所以会出现所有组件的render函数被调用后，组件的componentDidMount才连在一起被调用，是因为render函数本身并不往DOM树上渲染或者装载内容，它只是返回一个JSX表示的对象，然后由React库来根据返回的对象决定如何渲染。而React库肯定要把所有组件返回的结果综合起来，才能知道如何产生对应的DOM修改。

componentWilIMount 和componentDidMount 这对兄弟函数还有一个区别，就是componentWillMount可以在服务器端被调用，也可以在浏览器端被调用；而component-DidMount
只能在浏览器端被调用，在服务器端使用React 的时候不会被调用。 

2.2.3 更新过程

当组件被挂载到DOM树上之后,为了更好的交互体验，当props和state被修改的时候，就会引发组件的更新过程。

componentWillReceiveProps

shoudComponentUpdate

cpmponentWillUpdate

render和装载过程一样

componentDidUpdate

并不是所有的更新过都会执行全部函数。

1、componentWillReceiveProps(nextProps)

当父组件的render函数被调用，在render函数里面渲染的子组件就会经历更新过程，不管父组件传给子组件的props有没有改变，都会触发子组件的componentWillReceiveProps函数。通过this.setState方法触发的更新过程不会调用这个函数。

class ControlPanel extends Component{
    render() {
        console.log('enter controlPanel render')
        return (
            <div>
                {/* this.forceUpdate() 强制引发一次重绘 */}
                <button onClick={()=>this.forceUpdate()}>Click me to repaint!</button>
                <Counter caption='first' initValue={10} />
                <Counter caption='second' initValue={20} />
                <Counter caption='third' initValue={30} />
            </div>
        )
    }
}

　子组件添加这个函数

    componentWillReceiveProps(){
        console.log('enter counter componentWillReceiveProps')
    }

　　

引发forceUpdate之后，首先调用父组件的render函数，接着调用第一个子组件的componentWillReceiveProps函数，然后再调用子组件的render函数，第二个第三个依次进行。

在此例中，渲染三个子组件的时候，props的值一直没有变化，可见componentWillReceiveProps并不是当props值变化的时候才去调用，nextProps代表的是第一次渲染传入的props值，this.props代表的是上一次渲染时props的值，只有两者有变化的时候才有必要调用this.setState更新内部状态。this.setState不会引发componentWillReceiveProps函数。

2、nextProps)(nextProps, nextState)

　　除了render函数，nextProps)可能是React组件生命周期中最重要的一个函数了。

　　render函数重要，是因为它决定了该渲染什么，nextProps)函数重要，是因为它决定了一个组件什么时候不需要渲染。

　　render和nextProps)函数，也是React生命周期中唯二两个要求有返回结果的函数。render函数返回的结果用于构造DOM对象，而nextProps)函数返回一个布尔值，告诉React库这个组件在这次更新过程中是否要继续。

　　在更新过程中，React首先调用nextProps)函数，如果这个函数返回true，那就会继续更新过程，接下来调用render函数；反之得到一个false，那就会停止更新，也就不会引发后续的渲染了。只要使用恰当，shouldComponentUpdate能大大提高React组件的性能，没必要重新渲染的就不要渲染了，速度会更快。

    shouldComponentUpdate(nextProps, nextState){
        //nextProps、nextstate、this.props、this.state之间做对比，没有变化就没有必要重新渲染
        return (nextProps.caption !== this.props.caption || nextState.count !== this.state.count)
    }

　　

只有第一次调用了子组件的render函数，刷新之后并不有改变caption或initvalue的值，没有引发组件内部状态改变，所以完全没有必要重绘。

3、componentWillUpdate和componentDidUpdate

　　如果组件的shoudComponentShouldUpdate函数返回true，React接下来依次调用的函数有componentWillUpdate、render、componentDidUpdate。

　　componentWillMount和componentDidMount，componentWillUpdate和componentDidUpdate这两对函数，一前一后把render函数夹在中间。

2.3.3 卸载过程

　　React卸载过程只涉及到一个函数componentWillUnMount，当React组件要DOM树上删除掉之前，就会调用componentWillUnMount函数，此函数适合做一些清理性的工作。

componentWillU nmount 中的工作往往和componentDidMount 有关，比如，在componentDidMount 中用非React 的方法创造了一些DOM 元素，如果撒手不管可能会造成内存泄露，那就需要在componentWillUnmount 中把这些创造的DOM 元素清理掉。

2.4 组件向外传递数据

子组件如何把数据传递给父组件。

通过函数传递，啥也不说，上代码：

class ControlPanel extends Component{
    constructor(props){
        super(props)
        this.initValues = [10, 20, 30]
        const initSum = this.initValues.reduce((a,b)=>a+b,0)
        this.onCounterUpdate = this.onCounterUpdate.bind(this)
        this.state = {
            initSum
        }
    }
    onCounterUpdate(newValue,previousValue){
        const valueChange = newValue - previousValue
        this.setState({initSum:this.state.initSum+valueChange})
    }
    render() {
        // console.log('enter controlPanel render')
        return (
            <div>
                {/* this.forceUpdate() 强制引发一次重绘 */}
                <button onClick={()=>this.forceUpdate()}>Click me to repaint!</button>
                <Counter onUpdate={this.onCounterUpdate} caption='first' initValue={this.initValues[0]} />
                <Counter onUpdate={this.onCounterUpdate} caption='second' initValue={this.initValues[1]} />
                <Counter onUpdate={this.onCounterUpdate} caption='third' initValue={this.initValues[2]} />
                <span>sum:{this.state.initSum}</span>
            </div>
        )
    }
}

　子组件

    add(){
        this.updateCount(true)
    }

    math() {
        this.updateCount(false)
    }

    updateCount(state){
        const previousValue = this.state.count
        const newValue = state ? previousValue + 1 : previousValue -1
        this.setState({count: newValue})
        this.props.onUpdate(newValue, previousValue)
    }

　2.5 React组件state和prop的局限