React从0到1--组件设计原则

1、高内聚指的是把逻辑紧密相关的内容放在一个组件中 。

用户界面无外乎内容 、交互行为和样式 。 传统上，内容由 HTML 表示，交互行放在 JavaScript 代码文件中，

样式放在 css 文件中定义 。 这虽然满足一个功能模块的需要，却要放在三个不同的文件中，

这其实不满足高内聚的原则 。 React 却不是这样，展示内容的 JSX、定义行为的 JavaScript

代码，甚至定义样式的 css ，都可以放在一个 JavaScript 文件中，因为它们本来就是为

了实现一个目的而存在的，所以说 React 天生具有高内聚的特点 。
2、低耦合指的是不同组件之间的依赖关系要尽量弱化，也就是每个组件要尽量独立 。

     保持整个系统的低搞合度，需要对系统中的功能有充分的认识，然后根据功能点划分模
块，让不同的组件去实现不同的功能，这个功夫还在开发者身上，不过， React 组件的对
外接口非常规范，方便开发者设计低耦合的系统 。
3、组件的数据

react数据分为两种分别时prop和state，prop是对外的数据接口，而state则是对内的数据接口

4、React 的 prop
<SampleButton id=” sample” borderWidth={2} onClick={onButtonClick}

style={{color:”red”}}
/ :>

比如在上面的 SampleButton 中， borderWidth 就是数字类型， onClick 是函数类型，

style 的值是一个包含 color 字段的对象，当 prop 的类型不是字符串类型时，在 JSX 中必
须用花括号｛｝把 prop 值包住，所以 style 的值有两层花括号，外层花括号代表是 JSX 的
语法，内层的花括号代表这是一个对象常量。
5、React的propTypes 检查

首先组件ClickCounter.js里面引入Counter组件

render(){
    const counterStyle={
        color:'red'
    };
    return(
         <div>
             <button onClick={this.onClickButton} style={counterStyle}> Click Me</button>
             <div>
                 Click Count:{this.state.count}
             </div>
             <div>
                 <Counter caption = "First" initValue = {0} />
                 <Counter caption = "Second" initValue = {10} />
                 <Counter caption = "Third" initValue = {20} />
             </div>
         </div>

    );
}

在组件Counter文件下面

import React, {Component} from 'react';
import propTypes from 'prop-types';//引入propTypes
class Counter extends Component {


    constructor(props) {
        super(props);

        console.log(props)
        this.onClickIncButton = this.onClickIncButton.bind(this);
        this.onClickDecButton = this.onClickDecButton.bind(this);
        this.state = {
            count: props.initValue || 0
        }
    }

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

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

    render() {

        const buttonStyle = {
            color: 'red'
        };
        const {caption} = this.props;
        return (
            <div>
                <button style={buttonStyle} onClick={this.onClickDecButton}>+</button>
                <button style={buttonStyle} onClick={this.onClickIncButton}>-</button>
                <span>{caption} count:{this.state.count}</span>

            </div>
        )
    }

}
//书写检验规则
Counter.propTypes = {
    caption: propTypes.string.isRequired,
    initValue: propTypes.number
}
export default Counter;

6、React 的 state

state数据必须在state()函数里面进行改变，若直接通过

this.state.count = this.state.count +1;的方式改变将不能实时反应数据