HOC ⇒ 高階組件

https://hsien-w-wei.medium.com/react-higher-order-component-高階組件-4110c03043ba

react複用組建邏輯的技巧，是一種接收元件為參數返回元件的函式，將共用的邏輯移出元件可以專注處理自身的邏輯及畫面。

例如 Redux的connect() ⇒ HOC ，js的map(), filter(), forEach() ⇒ HOF

import React from 'react'

function withMouse(WrappedComponent) {
  return class WithMouseComponent extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        x: 0,
        y: 0,
      }
      this.handleMouseMove = this.handleMouseMove.bind(this)
    }

    handleMouseMove(event) {
      this.setState({
        x: event.clientX,
        y: event.clientY,
      })
    }

    render() {
      const mouse = {
        x: this.state.x,
        y: this.state.y
      }
      return (
        <div style={{ height: 300, borderWidth: 1, borderStyle: 'solid' }} onMouseMove={this.handleMouseMove}>
          <h1>移动您的鼠标</h1>
          <div>鼠标当前坐标为:({this.state.x},{this.state.y})</div>
          <WrappedComponent {...this.props} text={"High-order-Component"} mouse={mouse} />
        </div>
      )
    }
  }
}

export default withMouse

import Hoc from './Hoc'
import Page from './Page'

const Wrapper = Hoc(Page)

https://codesandbox.io/s/hoc-test-hgtiq?file=/src/Hoc/index.js

Render Props ⇒ 指一種用其值為函式的prop，在components共享代碼的技巧

使用render-props的fromwork ⇒ react-router, formik

render props的components接收一個函示，此函式不會實作自身的render邏輯，而是呼叫React element，透過props傳遞參數渲染的結果

<Mouse children={mouse => (
  <p>The mouse position is {mouse.x}, {mouse.y}</p>
)}/>

把主要要顯示的畫面透過props傳遞在render的方式

import React from 'react'
import Page from '../page1';

class MouseWithPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      x: 0,
      y: 0,
    }
    this.handleMouseMove = this.handleMouseMove.bind(this)
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    })
  }

  render() {
    const mouse = {
      x: this.state.x,
      y: this.state.y
    }
    return (
      <div style={{ height: 300, borderWidth: 1, borderStyle: 'solid' }} onMouseMove={this.handleMouseMove}>
        <h1>移动您的鼠标</h1>
        <div>鼠标当前坐标为:({this.state.x},{this.state.y})</div>
        <Page text={'render_props'} mouse={mouse} />
      </div>
    )
  }
}

export default MouseWithPage