标签：control 开发 stat targe 定义 自动 开心 com 低耦合
第二章 设计高质量的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
}
标签：control 开发 stat targe 定义 自动 开心 com 低耦合
原文地址：https://www.cnblogs.com/huyanluanyu/p/10158642.html
