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

Posted 2021-01-28 huyanluanyu

第二章 设计高质量的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。只是辅助开发，不会改变组件行为

Counter.propTypes = {
    //caption必须是string
    //initValue必须是number
    //带上isRequired，表示组件必须要指定caption
    caption: PropTypes.string.isRequired,
    initValue: PropTypes.number
}
Counter.defaultProps = {
    initValue: 0
}