Recompose library for React.
This post hasn't been updated for 6 years
Giới thiệu
Recompose Library là 1 React utility cho các function components và higher-order components. Hiểu đơn giản nó gần giống như lodash cho React
Cài đặt
Đầu tiên chúng ta phải tạo 1 project react đã
- npm install -g create-react-app
- create-react-app my-app
- cd my-app
- npm start
(Nếu dùng npm version 5.2.0+ bạn có thể dùng npx create-react-app my-app) Sau đó cài recompose :
- npm install recompose --save
Trong file App.js
chỉnh sửa 1 chút ^^:
import React, { Component } from 'react';
const App = () => (
<div>
<h1>Demo Recompose</h1>
</div>
);
export default App;
Ok vậy là các bước setup môi trường đã xong. giờ mình sẽ đi chi tiết vào các function trong recompose nhé ^^
Chi tiết các function trong recompose
-
defaultProps
defaultProps( props: Object ): HigherOrderComponent
- example:
import React from 'react'; import { defaultProps } from 'recompose' //import const enhance = defaultProps({ counter: 0 }) const App = ({couter}) => ( <div> <h1>Demo Recompose {couter}</h1> </div> ); export default enhance(App);
- display
-
renameProp
renameProps( nameMap: { [key: string]: string } ): HigherOrderComponent
- example:
import React from 'react'; import { defaultProps, renameProps } from 'recompose' //import const enhance = defaultProps({ counter: 0 }) const enhance1 = renameProps({ counter: 'counterX' }) const App = ({counterX}) => ( <div> <h1>Demo Recompose {counterX}</h1> </div> ); export default enhance(enhance1(App));
- display
- compose
Như VD 2: nếu cứ dùng function trong recompose ta lại định nghĩa 1 function rồi export nó như vậy sẽ rất bất biện
enhance(enhance1(enhance2)...)
Recompse cung cấp cho ta 1 function compose để gộp các function lại
compose(...functions: Array<Function>): Function
- example:
import React from 'react'; import { defaultProps, renameProps, compose } from 'recompose' //import // gộp các recompose function const enhance = compose( defaultProps({ counter: 0 }), renameProps({ counter: 'counterX' }) ) const App = ({counterX, ...rest}) => ( <div> <h1>Demo Recompose {counterX}</h1> </div> ); export default enhance(App);
- display
- withProps()
withProps( createProps: (ownerProps: Object) => Object | Object ): HigherOrderComponent
- example:
import React from 'react'; import { defaultProps, renameProps, compose, withProps } from 'recompose' //import const enhance = compose( defaultProps({ counter: 0 }), renameProps({ counter: 'counterX' }), withProps({ user: { name: 'Minh', age: 30 } }) ) const App = ({counterX, user, ...rest}) => ( <div> <h1>Demo Recompose {counterX}</h1> {user.name} - {user.age} </div> ); export default enhance(App);
- display
- flattenProp
nếu bạn không muốn viết {user.name} - {user.age}
flattenProp( propName: string ): HigherOrderComponent
- example:
import React from 'react'; import { defaultProps, renameProps, compose, withProps, lifecycle, flattenProp } from 'recompose' //import const enhance = compose( defaultProps({ counter: 0 }), renameProps({ counter: 'counterX' }), withProps({ user: { name: 'Minh', age: 30 } }), flattenProp('user'), ) const App = ({counterX, name, age, ...rest}) => ( <div> <h1>Demo Recompose {counterX}</h1> {name} - {age} </div> ); export default enhance(App);
-
withState
withState( stateName: string, stateUpdaterName: string, initialState: any | (props: Object) => any ): HigherOrderComponent
withState function có 3 tham số truyền vào (props khởi tạo, function, giá trị khởi tạo)
-
example:
import React from 'react'; import { compose, withState } from 'recompose' //import const enhance = compose( withState('counter', 'updateCounter', 0) ) const App = ({counter, updateCounter}) => ( <div> <h1>Demo Recompose {counter}</h1> <button onClick={() => updateCounter(counter = counter + 1)} >Counter</button> </div> );
export default enhance(App);
- withHandlers
handlers các funtion
withState function có 3 tham số truyền vào (props khởi tạo, function, giá trị khởi tạo)withHandlers( handlerCreators: { [handlerName: string]: (props: Object) => Function } | handlerCreatorsFactory: (initialProps) => { [handlerName: string]: (props: Object) => Function } ): HigherOrderComponent
-
example:
import React from 'react'; import { compose, withState, withHandlers } from 'recompose' //import const enhance = compose( withState('counter', 'updateCounter', 0), withHandlers({ increment: ({updateCounter}) => (counter) => {updateCounter(counter => counter + 1)} }) ) const App = ({counter, increment}) => ( <div> <h1>Demo Recompose {counter}</h1> <button onClick={increment} >Counter</button> </div> ); export default enhance(App);
- mapProps
-
example:
import React from 'react'; import { compose, defaultProps, mapProps } from 'recompose' //import const enhance = compose( defaultProps({ counter: 0 }), mapProps(({counter, ...rest}) => { return { ...rest, counter: 1 } }) ) const App = ({counter, increment}) => ( <div> <h1>Demo Recompose {counter}</h1> </div> ); export default enhance(App);
- lifecycel() 1 statefull (React.Component()) nó sẽ support toàn thể các ComponentAPI Đi sâu hơn về 1 vòng đời (lifecycel component):
- constructor
- componentWillMount()
- render()
- componentDidMount()
(ở bài sau mình sẽ đi cụ thể về khái niệm và ví dụ của lifecycle method sau)
lifecycle( spec: Object, ): HigherOrderComponent
example:
import React from 'react'; import { compose, defaultProps, lifecycle } from 'recompose' //import const enhance = compose( defaultProps({ counter: 0 }), lifecycle({ componentWillMount(){ console.log(this.props); } }) ) const App = ({counter, increment}) => ( <div> <h1>Demo Recompose {counter}</h1> </div> ); export default enhance(App);
9, branch() và renderComponent() Gộp chung 2 thằng này làm VD cho dễ hiểu branch() là để xử lý có thể xảy ra nhiều TH, kiểu như if else vậy
branch( test: (props: Object) => boolean, left: HigherOrderComponent, right: HigherOrderComponent ): HigherOrderComponent
nó có 3 đối số:
- test 1 function và trả về true flase
- left nếu true
- right nếu false
example
import React from 'react'; import { compose, defaultProps, branch, renderComponent } from 'recompose' const enhance = compose( defaultProps({ counter: 0 }), branch( ({counter}) => counter < 1, renderComponent(under), renderComponent(over) ) ) const App = ({counter}) => ( <div> <h1>Demo Recompose {counter}</h1> </div> ); function under({counter}){ return ( <div> <h1>{counter} is less than 1</h1> </div> ) } function over({counter}){ return ( <div> <h1>{counter} is greater than 1</h1> </div> ) } export default enhance(App);
Kết Luận
Mới tìm hiểu và làm việc với React. Nên sẽ có 1 số chố mình hiểu sai khái niệm.... Trên là những ví dụ khá hay và cơ bản của recompose. Mình sẽ cố gắng tìm hiểu nhiều hơn và update thêm vào bài viết này. Mọi người có thể tham khảo ở : https://github.com/acdlite/recompose/blob/master/docs/API.md
- example:
All Rights Reserved