目錄

擴(kuò)展學(xué)習(xí)資料

高階組件

@/src/components/hoc/withTooltip.js

@/src/components/hoc/itemA.jsx

@/src/components/hoc/itemB.jsx

@/src/App.js

函數(shù)作為子組件【Render pprops】

函數(shù)作為子組件

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

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

練習(xí)

擴(kuò)展學(xué)習(xí)資料

高階組件

復(fù)用業(yè)務(wù)邏輯：判斷用戶是否是vip：是->有列表，有推薦

一個(gè)組件—高階函數(shù)—>新的邏輯的組件

高階組件是對(duì)已有組件的封裝形成新的組件之后有自己的狀態(tài)和邏輯并可以傳遞已有的組件

const NewComponent = higherOrderComponent(OldComponent)

hoc【higherOrderComponent】

@/src/components/hoc/withTooltip.js

import React from 'react';
// 帶工具提示【函數(shù)組件】
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';
// 一個(gè)簡(jiǎn)單的帶工具提示-業(yè)務(wù)組件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';
// 一個(gè)簡(jiǎn)單的帶工具提示-業(yè)務(wù)組件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封裝就能得到一個(gè)將已有組件封裝為高階組件的高階(封裝)函數(shù)

• 一個(gè)函數(shù)，傳入一個(gè)組件，返回一個(gè)新組件
• 一般不會(huì)有UI展現(xiàn)
• 提供一些可復(fù)用的功能

函數(shù)作為子組件【Render pprops】

解決復(fù)用邏輯的問題

函數(shù)作為子組件

?1.定義子組件

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

2.使用函數(shù)作為Props

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

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

import React from 'react';
import WithTooltip from './withTooltip';
// 一個(gè)簡(jiǎn)單的帶工具提示-業(yè)務(wù)組件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;

練習(xí)

【題目1】分別使用Render Props和HOC模式實(shí)現(xiàn)購(gòu)物車ToolTips功能；

【題目2】說明Render Props 和 HOC設(shè)計(jì)模式的優(yōu)缺點(diǎn)分別是什么；文章來源地址http://www.zghlxwxcb.cn/news/detail-654117.html

到了這里，關(guān)于步入React正殿 - React組件設(shè)計(jì)模式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！