vi
new
+4
Avatar
Minh Do @MinhDT
1.1K 41 46
Đã đăng vào thg 6 27, 2018 9:33 SA 4 phút đọc
2.0K

Recompose library for React.

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

  1. 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

  2. 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
    1. 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
    1. 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
    1. 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);

    1. 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);

    1. withHandlers handlers các funtion
       withHandlers(
  handlerCreators: {
    [handlerName: string]: (props: Object) => Function
  } |
  handlerCreatorsFactory: (initialProps) => {
    [handlerName: string]: (props: Object) => Function
  }
): 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, 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);
      1. 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);
      1. 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

ReactJS

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí