Как преобразовать рекомпозицию в хуки?
Моя компания использует recompose в качестве инструмента управления состоянием. Мы рефакторим наше приложение, чтобы использовать хуки. Для приведенного ниже кода, как бы вы заменили компонент recompose на компоненты react hook?
Я понимаю, что 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.info(`I need help`);
}
}),
lifecycle({
componentDidMount() {
},
componentDidUpdate() {
}
})
);
export default hoistStatics(enhancer)(myComponent);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы правы, withState можно заменить на useState.
Что касается части Redux, React рекомендует продолжать использовать API так же, как вы его использовали, но вы должны исключить это из compose. В react-redux v7 для этого будет реализован новый хук.
Теперь withHandlers можно заменить простыми функциями javascript, добавить в свой компонент или любой другой файл.
До:
withHandlers({
myFunc() => () => {console.info('hello')}
})
Сейчас:
const myFunc = () => {console.info('hello')}
И последнее, но не менее важное: componentDidMount и componendDidUpdate необходимо заменить на использованиеЭффект. Здесь будет немного чтения, чтобы понять, как это работает, но это не сложно. Вы будете создавать эффекты, которые в основном являются функциями, которые запускают каждый отдельный рендеринг, вы можете передать второй параметр, если хотите, чтобы он запускался только тогда, когда что-то изменилось, подобно componentDidUpdate, или пустой массив, если вы хотите запускать только один раз, аналогично componentDidMount. Не думайте об эффектах как о замене событий жизненного цикла, но вы можете добиться тех же результатов. Взгляните на эта статья, я нашел его весьма полезным.
Есть несколько других доступных хуков, я нашел useContext, useCallback и useReducer очень удобными в использовании.
Цитируя Дэна Абрамова:
To get productive, you need to “think in effects”, and their mental model is closer to implementing synchronization than to responding to lifecycle events.
Мы не можем заменить хуки и hocs 1:1, так как это разные модели программирования. Тем не менее, мы можем попробовать выполнить миграцию:
withProps - можно заменить как const внутри компонента
withHandlers - можно заменить как стрелочную функцию внутри компонента
lifecycle - https://stackoverflow.com/a/55502524/3439101
Простой пример (не со всеми случаями):
с носки
const enhancer = compose(
withProps(props => ({
myProp: props.myProp,
})),
withState('something', 'setSomething', null),
withHandlers({
myFunction: () => () => {
console.info(`I need help`);
}
}),
lifecycle({
componentDidMount() {
console.info('mounted')
}
})
);
с хуки
const MyComponent = props => {
const [something, setSomthing] = useState(null)
useEffect(() => {
console.info('mounted')
}, [])
const myProp = props.myProp
const myFunction = () => {
console.info(`I need help`);
}
}
const myProp = props.myProp -> если опора связана с расчетом других опор, и эти опоры необходимо обновить до последней версии? потому что это const, его не следует обновлять, я ошибаюсь.???
Большое спасибо! Ваш ответ и статьи очень полезны. У вас есть идеи, чем можно заменить
withPropsиhoistStatics?