React 组件模式

react

感谢 Michael Chan 分享

我们可以将 React 中出现的组件形式进行抽象，我们这里用五种形式来表示，我们通过这五种基本组件的任意组合可以搭建出复杂的大型应用。

形状

5 种组件

组合

有关这五种组件各种分别都有什么特点我会随后详细介绍，大家可以简单想象为形状。然后今天的重点是我们用这 5 种基本组件的组合来的得出平时开发所需要的组件形式。通过他们的组合得到了以下的组件形式

pattern composition

组件的属性

在 React 组件中我们需要考虑一下这些属性，有时候我们需要将这些关注点放入不同 react 组件来将职责分清。作为容器的组件，可以说作为控制器的组件我们更加关注 state 和 lifecycle 这样组件属性或方法。而在有些仅是作为表现层的组件中我们关注点就落在 render 和可以用于传入数据的 props 和 context 属性上了。

组件

• render : 渲染界面
• props ：在表现层组件接收数据方法
• state : 控制表现层更新的状态，状态对应页面
• context ：组件的上下环境
• lifecycle events ：组件的生命周期

状态组件（大圈）和无状态组件（小圈）

组件图1

import React, { Component } from 'react'

export default class Circle extends Component{
    constructor(){
        super();
        this.state = {}
    }
    render(){
        return (
            <div>
                <dir>circle</dir>
            </div>
        )
    }
}

import React from 'react'

 const SmallCircle = props => 
  <div>{props.smarts}</div>

export default SmallCircle;

大圈套小圈

可以通过大圈套小圈的形式来实现状态与表现分离。

大圈套小圈

import React, { Component } from 'react'
import SmallCircle from './SmallCircle';

export default class SmallCirclInCircle extends Component {
  render() {
    return (
      <div>
        <SmallCircle smarts="small circle"/>
      </div>
    )
  }
}

我们可以通过外层大圈来改变小圈表现形式，通过更换不同大圈可以自由组合出多种多样的表现形式。

高阶组件

HOC
如果我们想复用上面的组合组件（大圈套小圈）时，我们可以用一个函数来接收组件作为参数，返回函数返回一个在传入组件添加行为或属性的新组件作为函数的返回值来使用。听起来有点耳熟，对这就是高阶组件

import React, {Component} from 'react'
export default function DottedCircle(AnyCircle) {
    return class Circle extends Component{
        constructor(){
            super();
            this.state = { smarts: "smarts"}
        }
        render(){
            return <AnyCircle {...this.state}/>
        }
    }
}

渲染回调

组合组件

通过一个函数将外层组件状态传入给子组件，这样在子组件内部就可以控制外部组件 state 状态从而控制外部组件，这种行为类似于回调。

import React, { Component } from 'react'
import SmallCircle from './SmallCircle';

export default class CircleInDashCircle extends Component {
    constructor(){
        super();
        this.state = {smarts:'smarts'}
    }
  render() {
    return this.props.dashedCirle(this.state)
    
  }
}

const SmallCircleInDashCircl = <CircleInDashCircle
    dashedCirle={state=>(
        <SmallCircle{...state}/>
    )}
/>

以上列出五种组件，他们都是我们平时在 react 开发中会使用到的，可能大家已经用到了，就是没有发觉，其实有的时候我们需要停下来思考一下，总结我们写过的和学过的。这样也是一种进步的方式。