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

最新推荐文章于 2024-08-04 13:48:58 发布

祥哥的说

最新推荐文章于 2024-08-04 13:48:58 发布

阅读量839

点赞数

分类专栏： React 文章标签：高阶组件展示组件与容器组件函数组件与类组件受控组件与非受控组件

本文链接：https://blog.csdn.net/qq_39207948/article/details/112999052

版权

React 专栏收录该内容

43 篇文章 5 订阅

订阅专栏

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元素。

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

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

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