步入React正殿 - React组件设计模式-Toy模板网

这篇具有很好参考价值的文章主要介绍了步入React正殿 - React组件设计模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

扩展学习资料

高阶组件

@/src/components/hoc/withTooltip.js

@/src/components/hoc/itemA.jsx

@/src/components/hoc/itemB.jsx

@/src/App.js

函数作为子组件【Render pprops】

函数作为子组件

@/src/components/rp/itemC.jsx【父组件】

@/src/components/rp/withTooltip.js【子组件】

练习

扩展学习资料

资料名称	链接
扩展阅读	React组件Render Props VS HOC 设计模式 - 简书
扩展阅读	React Hooks 之于 HoC 与 Render Props - 知乎

高阶组件

复用业务逻辑：判断用户是否是vip：是->有列表，有推荐

一个组件—高阶函数—>新的逻辑的组件

高阶组件是对已有组件的封装形成新的组件之后有自己的状态和逻辑并可以传递已有的组件

const NewComponent = higherOrderComponent(OldComponent)

hoc【higherOrderComponent】

@/src/components/hoc/withTooltip.js

import React from 'react';
// 带工具提示【函数组件】
const withTooltip = (Component) => {
  class HOC extends React.Component {
    state = {
      showToolTip: false,
      content: '',
    };
    handleOver = (event) => {
      this.setState({
        showToolTip: true,
        content: event.target.innerText,
      });
    };
    handleOut = () => {
      this.setState({
        showToolTip: false,
        content: '',
      });
    };
    render() {
      return (
        <div onMouseOver={this.handleOver} onMouseOut={this.handleOut}>
          <Component action={this.state} {...this.props} />
        </div>
      );
    }
  }
  return HOC;
};
export default withTooltip;

@/src/components/hoc/itemA.jsx

import React from 'react';
import withTooltip from './withTooltip';
// 一个简单的带工具提示-业务组件A
const ItemA = (props) => {
  return (
    <div className='container'>
      <button className='btn btn-primary' type='btn'>
        Tooltip A
      </button>
      {props.action.showToolTip && (
        <span className='badge badge-pill badge-primary ml-2'>
          {props.action.content}
        </span>
      )}
    </div>
  );
};
export default withTooltip(ItemA);

@/src/components/hoc/itemB.jsx

import React from 'react';
import withTooltip from './withTooltip';
// 一个简单的带工具提示-业务组件B
const ItemB = (props) => {
  return (
    <div className='container'>
      <button className='btn btn-danger' type='btn'>
        Tooltip B <i>斜体</i>、<b>粗体</b>
      </button>
      {props.action.showToolTip && (
        <span className='badge badge-pill badge-danger ml-2'>
          {props.action.content}
        </span>
      )}
    </div>
  );
};
export default withTooltip(ItemB);

@/src/App.js

import React, { PureComponent } from 'react';
import ItemA from './components/hoc/itemA';
import ItemB from './components/hoc/itemB';
class App extends PureComponent {
    render() {
        console.log('App - rendering');
        return (
          <>
            <ItemA id="1" />
            <ItemB id="2" />
          </>
     	 );
    }
}
export default App;

ItemA,ItemB都需要相同的withTooltip【props.action】显示逻辑，只需要将withTooltip封装就能得到一个将已有组件封装为高阶组件的高阶(封装)函数

一个函数，传入一个组件，返回一个新组件
一般不会有UI展现
提供一些可复用的功能

函数作为子组件【Render pprops】

解决复用逻辑的问题

函数作为子组件

步入React正殿 - React组件设计模式,React相关,react.js,设计模式,前端

1.定义子组件

// 子组件
render () {
    return (
        <div>
        	{this.props.render(this.state)}
         </div>                
    )
}

2.使用函数作为Props

// 父组件
<RenderPropComponent render={(state)=>(
    <div>
       content
    </div>
)}>

@/src/components/rp/itemC.jsx【父组件】

import React from 'react';
import WithTooltip from './withTooltip';
// 一个简单的带工具提示-业务组件A
const ItemC = (props) => {
  return (
    <div className='container'>
      <WithTooltip
        render={({ showToolTip, content }) => (
          <div>
            <button className='btn btn-primary' type='btn'>
              Tooltip C
            </button>
            {showToolTip && (
              <span className='badge badge-pill badge-primary ml-2'>
                {content}
              </span>
            )}
          </div>
        )}>
        {({ showToolTip, content }) => (
          <div>
            <button className='btn btn-primary' type='btn'>
              Tooltip D
            </button>
            {showToolTip && (
              <span className='badge badge-pill badge-primary ml-2'>
                {content}
              </span>
            )}
          </div>
        )}
      </WithTooltip>
    </div>
  );
};
export default ItemC;

@/src/components/rp/withTooltip.js【子组件】

import React from 'react';
class WithTooltip extends React.Component {
  // // eslint-disable-next-line no-useless-constructor
  // constructor(props) {
  //  super(props);
  // }
  state = {
    showToolTip: false,
    content: '',
  };
  handleOver = (event) => {
    this.setState({
      showToolTip: true,
      content: event.target.innerText,
    });
  };
  handleOut = () => {
    this.setState({
      showToolTip: false,
      content: '',
    });
  };
  render() {
    return (
      <div onMouseOver={this.handleOver} onMouseOut={this.handleOut}>
        {this.props.render && this.props.render(this.state)}
        {this.props.children && this.props.children(this.state)}
      </div>
    );
  }
}
export default WithTooltip;