一、react组件定义的3种方式：

1、es5原生方式

1
var reactComponent = React.createClass({ ...})

2、es6的class继承方式

1
class reactComponent extends React.Component({...})

3、无状态函数式

1
function reactComponent(props) {...}

二、各类常见组件

1、从setState来分：受控组件和非受控组件

1
2
3
4
5
6
7
8
9

// 非受控组件
class reactComponent extends React.Component({
    render() {
        return (
            <input type="text"/>
        )
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//受控组件
class reactComponent extends React.Component({
    constructor() {
        super(props);
        this.state = {
            value: '',
        }
        
    }
    
    handleChange(e) {
        this.setState({
            value: e.target.value,
        })
    }
    
    render() {
        return (
            <input type="text"
                value={this.state.value}
                onChange={e => this.handleChange(e)}
                />
        )
    }
});

2、从组件返回来分：高阶组件

1
2
3
4
5
6
7
//  高阶组件
class reactComponent = class extends Component {
      render() {
          if (!this.props.data) return <div>高阶组件...</div>;
          return <div>{this.data}</div>;
      }
}

3、从整体的功能来分：容器组件和展示组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
* 引入redux connect连接组件与store,
* 这里使用es6的装饰器来实现
*/
@connect(stateMapProps, distpathMapProps)
class reactComponent extends Component {
    render() {
        return (
            <div>...</div>
        )
    }
}

/**
* 只负责数据渲染
*/
const InputComponent = ({value}) => {
    return (
        <div>
            <input value={value}/>
        </div>
    )
}

组件之间也不是绝对划分的，而是根据实际功能去创建。