Recopose Compnents Syntax

Component.js

// 1
// cons：the component name appears twice
const Component = compose(
  // HOC
)(({
  // ...destructured props
}) =>
  // react element
);

export default Component;



// 2
// cons：
// - The component name appears twice.
// - The HOC apperas after the componet.
const Component = ({
  // ...destructured props
}) =>
  // react element

export default compose(
  // HOC
)(Component);




// 3
// cons：introduce setDisplayname
export defacult compose(
  setDisplayname('Component'),
  // HOC
)(({
  // ...destructured props
}) =>
  // react element
);

// 4
// cons：Both the component name and the container name appears twice.
export const container = compose(
  // HOC
)

export const Component = ({
  // ...destructured props
}) =>
  // react element

export default container(Component)

2的優點，可單獨 export Component

export const Component;
export default compose(HOCs)(Component)

改良的 2，HOC 搬到前面
缺點 Component name 出現兩次，container name 出現兩次

export const container = compose(
  // HOC
)

export const Component = ({
  // ...destructured props
}) =>
  // react element

export default container(Component)

寫4的話感覺未來只要獨立一個component就盡量開新的file
保持一個file一個component的原則會比較好閱讀