React HOC and React Hooks

Dmitry Grigorov, Gazprombank @ React Moscow Meetup 5
Dec 11, 2019, Gazprombank

Вы когда-нибудь сталкивались с дублированием кода в компонентах? Пытались ли вы сделать так, чтобы компонент был комбинируемый и был максимально переиспользуемым другими компонентами? В своем докладе Дмитрий расскажет о некоторых приемах использования компонентов высшего порядка (High Order Components) и сравним их с приемами, которые принесли хуки в "синтаксис" Реакта. Все думают, что одно пришло заменить другое, но на данном докладе мы попытаемся разобраться – действительно ли это так?

Transcript

2. 1.HOC (High Order Component) 2.Recompose 3.Hooks 4.Заменяют ли хуки хоки ? Содержание доклада 2
3. const statelessComponent = ({name}) => <div>{name}</div> Как называется компонент, у которого нет стейта? 3
4. Как называется компонент, у которого есть cтейт? class StatefullComponent extends Component { state = { date: new Date() } componentDidMount() { ... } componentWillUnmount() { ... } tick() { ... } render() { return ( <div> ... </div> ); } }
5. А как можно назвать функцию, которая принимает компонент и возвращает новый компонент? 5
6. Что такое HOC ? 6
7. HOC (High Order Component) — это функция, которая принимает компонент и возвращает новый компонент. 7
8. (arg1, arg2) => (Component) => EnhancedComponent 8
9. const hoc = (overrideProps) => { return (BaseComponent) => { return (props) => { return <BaseComponent {...props} {...overrideProps} /> }; } } Stateless Component 9
10. const hoc = (overrideProps) => { return (BaseComponent) => { return class extends React.Component { shouldComponentUpdate() { return false; } render() { return ( <BaseComponent {...this.props} {...overrideProps} /> ); } } } } Stateful Component 10
11. Arguments Component 11 hoc({ name: "Bob" })(User)
12. Recompose 12
13. Recompose 13
14. Recompose 14
15. compose 15
16. func1(x) 16
17. func2(func1(x)) 17
18. func3(func2(func1(x))) 18
19. compose( func3, func2, func1 )(x); 19
20. Приведение stateful компонентов к statless компонентам 20
21. class Status extends Component { state = { isToggle: false }; toggle = () => { const { isToggle } = this.state; this.setState({ isToggle: !isToggle }) }; render() { const { isToggle } = this.state; const { status } = this.props; return ( <span onClick={this.toggle} > { status } { isToggle && <StatusList /> } </span> ); }; } 21 class Tooltip extends Component { state = { isToggle: false }; show = () => { this.setState({ isToggle: true }) }; hide = () => { this.setState({ isToggle: false }) }; render() { const { isToggle } = this.state; const { children, text } = this.props; return ( <span onMouseEnter={this.show} onMouseLeave={this.hide}> { isToggle && <div className="Tooltip">{ text }</div>} <span>{ children }</span> </span> ); }; }
22. class Tooltip extends Component { state = { isToggle: false }; show = () => { this.setState({ isToggle: true }) }; hide = () => { this.setState({ isToggle: false }) }; render() { const { isToggle } = this.state; const { children, text } = this.props; return ( <span onMouseEnter={this.show} onMouseLeave={this.hide}> { isToggle && <div className="Tooltip">{ text }</div>} <span>{ children }</span> </span> ); }; } class Status extends Component { state = { isToggle: false }; toggle = () => { const { isToggle } = this.state; this.setState({ isToggle: !isToggle }) }; render() { const { isToggle } = this.state; const { status } = this.props; return ( <span onClick={this.toggle} > { status } { isToggle && <StatusList /> } </span> ); }; } 22
23. class Status extends Component { state = { isToggle: false }; toggle = () => { const { isToggle } = this.state; this.setState({ isToggle: !isToggle }) }; render() { const { isToggle } = this.state; const { status } = this.props; return ( <span onClick={this.toggle} > { status } { isToggle && <StatusList /> } </span> ); }; } 23 class Tooltip extends Component { state = { isToggle: false }; show = () => { this.setState({ isToggle: true }) }; hide = () => { this.setState({ isToggle: false }) }; render() { const { isToggle } = this.state; const { children, text } = this.props; return ( <span onMouseEnter={this.show} onMouseLeave={this.hide}> { isToggle && <div className="Tooltip">{ text }</div>} <span>{ children }</span> </span> ); }; }
24. class Status extends Component { state = { isToggle: false }; toggle = () => { const { isToggle } = this.state; this.setState({ isToggle: !isToggle }) }; render() { const { isToggle } = this.state; const { status } = this.props; return ( <span onClick={this.toggle} > { status } { isToggle && <StatusList /> } </span> ); }; } 24 class Tooltip extends Component { state = { isToggle: false }; show = () => { this.setState({ isToggle: true }) }; hide = () => { this.setState({ isToggle: false }) }; render() { const { isToggle } = this.state; const { children, text } = this.props; return ( <span onMouseEnter={this.show} onMouseLeave={this.hide}> { isToggle && <div className="Tooltip">{ text }</div>} <span>{ children }</span> </span> ); }; }
25. withState('stateName', 'stateUpdaterName', 'initialState'); 25
26. const Tooltip = withState('isToggle', 'toggle', false)( ({ text, children, isToggle, toggle }) => <span onMouseEnter={ () => toggle(true) } onMouseLeave={ () => toggle(false) } > { isToggle && ( <div className="Tooltip">{ text }</div> )} <span>{ children }</span> </span> ); 26
27. const Tooltip = withState('isToggle', 'toggle', false)( ({ text, children, isToggle, toggle }) => <span onMouseEnter={ () => toggle(true) } onMouseLeave={ () => toggle(false) } > { isToggle && ( <div className="Tooltip">{ text }</div> )} <span>{ children }</span> </span> ); 27
28. const Tooltip = withState('isToggle', 'toggle', false)( ({ text, children, isToggle, toggle }) => <span onMouseEnter={ () => toggle(true) } onMouseLeave={ () => toggle(false) } > { isToggle && ( <div className="Tooltip">{ text }</div> )} <span>{ children }</span> </span> ); 28
29. const Tooltip = withState('isToggle', 'toggle', false)( ({ text, children, isToggle, toggle }) => <span onMouseEnter={ () => toggle(true) } onMouseLeave={ () => toggle(false) } > { isToggle && ( <div className="Tooltip">{ text }</div> )} <span>{ children }</span> </span> ); 29
30. withState('stateName', 'stateUpdaterName', 'initialState') withHandlers({...ObjectHandlers}) 30 30
31. const withToggle = compose( withState('toggledOn', 'toggle', false), withHandlers({ show: ({ toggle }) => (e) => toggle(true), hide: ({ toggle }) => (e) => toggle(false), toggle: ({ toggle }) => (e) => toggle(x => !x) }) ) 31 31
32. const withToggle = compose( withState('toggledOn', 'toggle', false), withHandlers({ show: ({ toggle }) => (e) => toggle(true), hide: ({ toggle }) => (e) => toggle(false), toggle: ({ toggle }) => (e) => toggle(x => !x) }) ) 32 32 withToggle(Component)
33. class Status extends Component { state = { isToggle: false }; toggle = () => { const { isToggle } = this.state; this.setState({ isToggle: !isToggle }) }; render() { const { isToggle } = this.state; const { status } = this.props; return ( <span onClick={this.toggle} > { status } { isToggle && <StatusList /> } </span> ); }; } 33 class Tooltip extends Component { state = { isToggle: false }; show = () => { this.setState({ isToggle: true }) }; hide = () => { this.setState({ isToggle: false }) }; render() { const { isToggle } = this.state; const { children, text } = this.props; return ( <span onMouseEnter={this.show} onMouseLeave={this.hide}> { isToggle && <div className="Tooltip">{ text }</div>} <span>{ children }</span> </span> ); }; } Before
34. const withToggle = compose( withState('toggledOn', 'toggle', false), withHandlers({ show: ({ toggle }) => (e) => toggle(true), hide: ({ toggle }) => (e) => toggle(false), toggle: ({ toggle }) => (e) => toggle((current) => !current) }) ) const Status = withToggle(({ status, toggledOn, toggle }) => <span onClick={ toggle }> { status } { toggledOn && <StatusList /> } </span> ); const Tooltip = withToggle(({ text, children, toggledOn, show, hide }) => <span> { toggledOn && <div className="Tooltip">{ text }</div> } <span onMouseEnter={ show } onMouseLeave={ hide }>{ children }</span> </span> ); 34 34 After
35. Плюсы 1. Композиция/декомпозиция 2. Можем пользоваться только stateless компонентами 3. HOCs позволяют создавать нечто похожее на декораторы и добавлять примеси в компонент 4. Небольшие утилиты HOCs могут быть скомпонованы в большие и полезные HOCs 35 35
36. Минусы 1. Производительность 2. Не передаются рефы 3. Нужно копировать статические методы 4. Wrapper Hell 36 36
39. Hooks 41
43. class Status extends Component { state = { isToggle: false }; toggle = () => { const { isToggle } = this.state; this.setState({ isToggle: !isToggle }) }; render() { const { isToggle } = this.state; const { status } = this.props; return ( <span onClick={this.toggle} > { status } { isToggle && <StatusList /> } </span> ); }; } 43 class Tooltip extends Component { state = { isToggle: false }; show = () => { this.setState({ isToggle: true }) }; hide = () => { this.setState({ isToggle: false }) }; render() { const { isToggle } = this.state; const { children, text } = this.props; return ( <span onMouseEnter={this.show} onMouseLeave={this.hide}> { isToggle && <div className="Tooltip">{ text }</div>} <span>{ children }</span> </span> ); }; }
44. const withToggle = compose( // теперь используем withState & withHandlers в методе compose withState('toggledOn', 'toggle', false), withHandlers({ // withHandlers принимает объект обработчиков событий show: ({ toggle }) => (e) => toggle(true), hide: ({ toggle }) => (e) => toggle(false), toggle: ({ toggle }) => (e) => toggle((current) => !current) }) ) const Status = withToggle(({ status, toggledOn, toggle }) => <span onClick={ toggle }> { status } { toggledOn && <StatusList /> } </span> ); const Tooltip = withToggle(({ text, children, toggledOn, show, hide }) => <span> { toggledOn && <div className="Tooltip">{ text }</div> } <span onMouseEnter={ show } onMouseLeave={ hide }>{ children }</span> </span> ); Before Using Hooks 44 44
45. After Using Hooks 45 45 const Status =({ status }) => { const [ state, setState ] = useState(false); return ( <span onClick={ () => setState(!state) }> { status } { state && <StatusList /> } </span> ) } const Tooltip = ({ text, children }) => { const [ state, setState ] = useState(false); return ( <span> { state && <div className="Tooltip">{ text }</div> } <span onMouseEnter={ () => setState(true) } onMouseLeave={ () => setState(false) }>{ children }</span> </span> ); }
46. After Using Hooks 46 46 const Status =({ status }) => { const [ state, setState ] = useState(false); return ( <span onClick={ () => setState(!state) }> { status } { state && <StatusList /> } </span> ) } const Tooltip = ({ text, children }) => { const [ state, setState ] = useState(false); return ( <span> { state && <div className="Tooltip">{ text }</div> } <span onMouseEnter={ () => setState(true) } onMouseLeave={ () => setState(false) }>{ children }</span> </span> ); }
47. After Using Hooks 47 47 const useHook = (initialState) => { const [state, setState] = useState(initialState); const show = () => setState(true); const hide = () => setState(false); const toggle = () => setState(!state); return [state, { show, hide, toggle }] } const Status = ({ status }) => { const [state, { toggle }] = useHook(false); return ( <span onClick={ toggle }> { status } { state && <StatusList /> } </span> ); } const Tooltip = ({ text, children }) => { const [state, { show, hide }] = useHook(false); return ( <span> { state && <div className="Tooltip">{ text }</div> } <span onMouseEnter={ show } onMouseLeave={ hide }>{ children }</span> </span> ); }
48. After Using Hooks 48 48 const useHook = (initialState) => { const [state, setState] = useState(initialState); const show = () => setState(true); const hide = () => setState(false); const toggle = () => setState(!state); return [state, { show, hide, toggle }] } const Status = ({ status }) => { const [state, { toggle }] = useHook(false); return ( <span onClick={ toggle }> { status } { state && <StatusList /> } </span> ); } const Tooltip = ({ text, children }) => { const [state, { show, hide }] = useHook(false); return ( <span> { state && <div className="Tooltip">{ text }</div> } <span onMouseEnter={ show } onMouseLeave={ hide }>{ children }</span> </span> ); }
49. After Using Hooks 49 49 const useHook = (initialState) => { const [state, setState] = useState(initialState); const show = () => setState(true); const hide = () => setState(false); const toggle = () => setState(!state); return [state, { show, hide, toggle }] } const Status = ({ status }) => { const [state, { toggle }] = useHook(false); return ( <span onClick={ toggle }> { status } { state && <StatusList /> } </span> ); } const Tooltip = ({ text, children }) => { const [state, { show, hide }] = useHook(false); return ( <span> { state && <div className="Tooltip">{ text }</div> } <span onMouseEnter={ show } onMouseLeave={ hide }>{ children }</span> </span> ); }
50. useState = withState 50 50 useCustomHook = withHandlers
51. 51 Вывод 1. Композиция/декомпозиция 2. Меньше кода 3. Избавились от Wrapper Hell-a 4. Небольшие утилиты в хуках могут быть скомбинированы в собственные хуки 51
52. 1.HOC (High Order Component) 2.Recompose 3.Hooks 4.Заменяют ли хуки хоки? Содержание доклада 52
53. Шутка
54. Ответ из документации React
55. Cпасибо за внимание! Материалы к докладу: https://bit.ly/38t8wzZ Контакты: 55