Writing codes without mindset is a mess. Use one of React advanced patterns to enhance your code base by Higher Order Component.
Please check demo repo for more detail: https://github.com/xJkit/trendmicro-fed-talk-pattern-hoc
Enhance react app with patterns - part 1: higher order component
1. Enhance React app with patterns
part 1: Higher Order Component
Jay Chung (xJkit)
https://github.com/xJkit
2. https://github.com/xJkit
Sr. Front End Developer
About Me
https://linkedin.com/in/xjkit54780
https://slideshare.net/JOEYCHUNG2
https://twitter.com/xJkit
Jay Chung
14. Props
render() {
const { a, b, c } = functionA(9,4,8,7);
let d;
switch (a) {
case BLUE:
….
d = functionB(5);
break;
case RED:
….
d = functionC(6);
break;
default:
d = “default value”;
break;
}
// ….otherHeavyCompute(9,4,8,7)
20. Higher Order Component
• Takes one or more components as arguments
• Returns a component as its result
21. Higher Order Component
const BaseComponent = props => {...}
let EnhancedComponent = pure(BaseComponent)
EnhancedComponent = mapProps(/*...args*/)(EnhancedComponent)
EnhancedComponent = withState(/*...args*/)(EnhancedComponent)
const composedHoc = BaseComponent => hoc1(hoc2(hoc3(BaseComponent)))
or you can compose them:
22. Higher Order Component
const App = React.createClass({
render() {
// Instead of maintaining our own state,
// we get the mouse position as a prop!
const { x, y } = this.props.mouse
return (
<div style={{ height: '100%' }}>
<h1>The mouse position is ({x}, {y})</h1>
</div>
)
}
})
const withMouse = (Component) => {
return class extends React.Component {
state = { x: 0, y: 0 }
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
<Component {...this.props} mouse={this.state}/>
</div>
)
}
}
}
App.js withMouse.js
Enhance you
23. Higher Order Component
• Code reuse, logic and bootstrap abstraction
• Render Highjacking
• State abstraction and manipulation
• Props manipulation
const AppWithMouse = withMouse(App)
24. A React utility belt for function components and higher-order components.
Recompose
Think of it like lodash for React.
25. Recompose
• …lift state into functional wrappers
• ...perform the most common React patterns
• ...optimize rendering performance
• ...interoperate with other libraries
31. Recompose
• Separate logics to the HoCs (enhancers)
• Make base component to be pure (if no defaultProps)
• Make base component more readable
• Make base component easier to test
32. HoCs 的使⽤用場景
• Lift States Up
• Common Tasks
• Performance Optimizations
• Observables
33. Lift States Up
• withProps
• withState
• withHandlers
• withStateHandlers
42. Ref in HoCs
• If you add a ref to a HOC, the ref will refer to the
outermost container component, not the wrapped
component.
• That’s because ref is not a prop. Like key, it’s handled
differently by React.
43. Ref in HoCs
• Rename ref prop -> innerRef, otherRef, … whatever
• React v16.3 comes to the rescue: forwardRef
44. babel-plugin-lodash
import compose from ‘recompose/compose’
import withState from ‘recompose/withState’
import { compose, withState } from ‘recompose’
==== equals to ====