Как преобразовать перекомпоновку в хуки?

Моя компания использует перекомпоновку в качестве инструмента государственного управления. Мы проводим рефакторинг нашего приложения для использования хуков. В приведенном ниже коде, как бы вы заменили компонент перекомпоновки на компоненты перехвата реакции?

Я понимаю, что withState становится useState, например:

withState('something', 'setSomething', null)

становится

const [something, setSomething] = useState(null);

Что изменится на withProps, withHandlers, compose, hoistStatics и lifecycle?

Как будут работать mapStateToProps и mapDispatchToProps?

import { compose, hoistStatics, withHandlers, withState, withProps, lifecycle } from 'recompose';
import { connect } from 'react-redux'
import myComponent from './myComponent'

const mapStateToProps = (state, props) => {
  return {

  }
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({

  }, dispatch)
};

const enhancer = compose(
  connect(mapStateToProps,mapDispatchToProps),
  withProps(props => ({
    myProp: props.myProp,
  })),
  withState('something', 'setSomething', null),
  withState('somethingElse', 'setSomethingElse', null),
  withHandlers({
    myFunction: () => () => {
      console.log(`I need help`);
    }
  }),
  lifecycle({
    componentDidMount() {

    },
    componentDidUpdate() {

    }
  })
);

export default hoistStatics(enhancer)(myComponent);

react-native reactjs javascript react-hooks recompose
person Darron    schedule 02.04.2019    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Цитируя Дэна Абрамова:

Чтобы работать продуктивно, вам нужно «мыслить эффектами», а их ментальная модель ближе к реализации синхронизации, чем к реагированию на события жизненного цикла.

Мы не можем заменить хуки и крючки 1: 1, так как это разные модели программирования. Тем не менее, мы можем попробовать выполнить миграцию:

withProps - можно заменить как const внутри компонента

withHandlers - можно заменить стрелкой внутри компонента

lifecycle - https://stackoverflow.com/a/55502524/3439101

Простой пример (не во всех случаях):

с hocs

const enhancer = compose(
  withProps(props => ({
    myProp: props.myProp,
  })),
  withState('something', 'setSomething', null),
  withHandlers({
    myFunction: () => () => {
      console.log(`I need help`);
    }
  }),
  lifecycle({
    componentDidMount() {
      console.log('mounted')
    }
  })
);

с крючками

const MyComponent = props => {
  const [something, setSomthing] = useState(null)

  useEffect(() => {
    console.log('mounted')
  }, [])

  const myProp = props.myProp

  const myFunction = () => {
    console.log(`I need help`);
  }
}
person Edan Chetrit    schedule 03.04.2019
comment
const myProp = props.myProp - ›если опора связана с вычислением других опор, и эти реквизиты нужно обновить до последней версии? потому что это константа, она не должна обновляться, я ошибаюсь. ??? - person Ido Bleicher; 26.04.2020

arrow_upward
3
arrow_downward

Вы правы, withState можно заменить на useState.

Что касается Redux, React рекомендует продолжать использовать API так же, как вы его использовали, но вы должны убрать это из compose. В react-redux v7 для этого будет реализован новый перехватчик.

Теперь withHandlers, можно заменить простыми функциями javascript, добавить его в свой компонент или любой другой файл.

До:

withHandlers({
    myFunc() => () => {console.log('hello')}
})

В настоящее время:

const myFunc = () => {console.log('hello')}

И последнее, но не менее важное: componentDidMount и componendDidUpdate необходимо заменить на useEffect. Здесь будет немного чтения, чтобы понять, как это работает, но это несложно. Вы создадите эффекты, которые в основном являются функциями, которые запускают каждый рендер. Вы можете передать второй параметр, если хотите, чтобы он запускался только тогда, когда что-то изменилось, например componentDidUpdate, или пустой массив, если вы хотите запускать только один раз, аналогично componentDidMount. Не думайте о эффектах как о замене событий жизненного цикла, но вы можете добиться тех же результатов. Взгляните на эту статью, она мне показалась весьма полезной.

Доступно несколько других крючков, useContext, useCallback и useReducer очень удобны в использовании.

person estebane97    schedule 02.04.2019
comment
Большое спасибо! Ваш ответ и статьи очень полезны. Есть ли у вас идеи, чем можно заменить withProps и hoistStatics? - person Darron; 02.04.2019