react组件设计原则_React从0到1--组件设计原则

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

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

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

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

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

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

保持整个系统的低搞合度，需要对系统中的功能有充分的认识，然后根据功能点划分模

块，让不同的组件去实现不同的功能，这个功夫还在开发者身上，不过， React 组件的对

外接口非常规范，方便开发者设计低耦合的系统。3、组件的数据

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

4、React 的 prop

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(

Click Me

Click Count:{this.state.count}

);

}

在组件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 (

+

-

{caption} count:{this.state.count}

)

}

}

//书写检验规则

Counter.propTypes = {

caption: propTypes.string.isRequired,

initValue: propTypes.number

}

export default Counter;

6、React 的 state

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

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