react组件类型及深入理解react高阶组件

React中常见的组件类型及分类：

1、展示组件(Presentational component) 与容器组件(Container component)
2、类组件(Class component) 与函数式组件(Functional component)
3、受控组件（Controlled Component ）与非受控组件（Uncontrolled Component ）
4、高阶组件(higher order component)

1、展示组件(Presentational component) 与容器组件(Container component)

展示组件：

关注UI呈现
仅通过props接收数据与回调函数。
不定义数据如何加载与变化。
仅通过props接收数据与回调函数。
即便拥有状态也只是UI的状态而非data。
如果不需要拥有状态、生命周期函数、或者性能优化，展示组件通常以函数组件方式呈现。

容器组件：

关注运作。
为展示组件／容器组件提供数据与行为
通常是有状态的，往往会被作为其他组件的数据源使用。
通常由高级组件而非手写生成。高级组件包括Redux的connect()，Relay的createContainer()或Flux的Container.create()。

不需要教条地区分展示组件与容器组件。有些时候并不需要也很难划出一条分界线。如果你对一个具体组件应该是容器组件还是展示组件感到疑惑，那说明此时区分还尚早。继续做下去。

2、类组件(Class component) 与函数式组件(Functional component)

区别	类组件	函数组件
语法上	js函数定义的组件	class定义的组件
状态管理上	无状态组件，不能在组件中使用setState()	组件直接访问 store 并维持状态
生命周期钩子	不能在函数组件中使用生命周期钩子生命周期钩子都来自于继承的React.Component中。	生命周期钩子函数
调用方式	无需实例化	实例化

调用方式：
如果SayHi是一个函数，React需要调用它：

// 你的代码
function SayHi() { return <p>Hello, React</p>
}
// React内部
const result = SayHi(props) // » <p>Hello, React</p>

如果SayHi是一个类，React需要先用new操作符将其实例化，然后调用刚才生成实例的render方法：

// 你的代码
class SayHi extends React.Component { render() { return <p>Hello, React</p> }
}
// React内部
const instance = new SayHi(props) // » SayHi {}
const result = instance.render() // » <p>Hello, React</p>

可想而知，

函数组件重新渲染：将重新调用组件方法返回新的react元素。
类组件重新渲染：将new一个新的组件实例，然后调用render类方法返回react元素，这也说明为什么类组件中this是可变的。

3、受控组件（Controlled Component ）与非受控组件（Uncontrolled Component ）

受控组件：
1、在React中，每当表单的状态发生变化时，都会被写入到组件的state中
2、在受控组件中，组件渲染出的状态与它的value或checked的prop相对应
3、state的更新是由react的setState()来控制更新

非受控组件：
简单的说，如果一个表单组件没有value的props（单选按钮和复选框对应的是checked props）就可以称为非受控组件。这样，我们可以使用defaultValue和defaultChecked来表示组件的默认状态。
在React中，非受控组件是一种反模式，它的值不受组件自身的state或者props控制，通常需要为其添加ref的prop属性来访问渲染后的底层DOM元素。

受控组件和非受控组件的对比：

// 受控组件
<inputvalue={this.state.value}onChange={(e) => this.setState({value: e.target.value})}
>// 非受控组件
<input defaultValue={this.state.value}onChange={e => {this.setState({value: e.target.value})}}
>

受控组件的值来源于state。在受控组件中，可以将输入的内容输出展示。

非受控组件状态并不会受组件应用状态的控制，应用中也多了局部组件状态defaultValue，通过defaultValue或者defaultChecked来设置表单的默认值，它仅会被渲染一次，在后续的渲染时并不起作用。

4、高阶组件HOC (higher order component)

高阶函数概念：
高阶组件是（参数为组件，返回值为新组件）的函数，是将一个组件转换为另一个组件。

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

高阶组件需要注意的几个点：

高价组件是个函数，也可以说是一种设计模式。
高阶组件不是react的API。
高阶组件用于复用组件逻辑。

深入理解React高阶组件