[英]How to convert from recompose to hooks?
我的公司正在使用重构作为我们的状态管理工具。 我们正在重构我们的应用程序以使用钩子。 对于下面的代码,如何用反应钩子组件替换重构组件?
据我所知,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);
引用丹阿布拉莫夫:
为了提高效率,您需要“思考效果”,并且他们的心理模型更接近于实现同步而不是响应生命周期事件。
我们不能以1:1替换hooks和hocs,因为它们是不同的编程模型。 不过,我们可以尝试迁移:
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.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`);
}
}
你是对的, 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
非常好用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.