What is the main difference between using React-Redux Hooks and React-Redux Connect()?

前端 未结 4 1827
醉话见心
醉话见心 2021-01-02 00:17

I am about to start a project with React-Redux. For the APIs references there are Hooks and connect(). Since, Hooks are the alternate of connect APIs. What is the difference

4条回答
  •  鱼传尺愫
    2021-01-02 01:04

    What is the difference between using hooks and connect to my React-Redux project

    There are two major differences:

    • Scope
      connect can be used with both React class components and function components whereas hooks can be used with function components only.

    • Performance vs simplicity
      Using hooks is simpler. The simplicity comes at a price: you have less performance tweaks at your disposal in comparison with connect. Which is more complex: you call it passing in configuration options (few or many) and get back the 'configured flavor' of connect. This flavor is the HOC that you call passing in your component to get it back wrapped.

      One of the main configuration options is the already mentioned mapStateToProps function. You don't have to use it but it most cases you will. There are 4 other functions that exist solely to give you various opportunities to improve the performance of the component you are going to wrap around using connect. The functions are called:
      areStatesEqual
      areStatePropsEqual
      areOwnPropsEqual
      areMergedPropsEqual

      All 4 are optional. You can pass in as the connect configuration options either none or some or all of them and tweak the performance. It's worth noting that even if you pass in none, then the default implementations of those functions (which are effectively performance helpers) will apply and as a result, you will get the wrapped component that is more optimised performance-wise than its hooks-using counterpart.

提交回复
热议问题