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)就可以称为非受控组件。这样,我们可以使用defaultValuedefaultChecked来表示组件的默认状态。
在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})}}
>
  • 受控组件的值来源于state。在受控组件中,可以将输入的内容输出展示。
  • 非受控组件状态并不会受组件应用状态的控制,应用中也多了局部组件状态defaultValue,通过defaultValue或者defaultChecked来设置表单的默认值,它仅会被渲染一次,在后续的渲染时并不起作用。

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

高阶函数概念:
高阶组件是(参数为组件,返回值为新组件)的函数,是将一个组件转换为另一个组件。

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

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

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

深入理解React高阶组件
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页