如何从重构转换为钩子?

Question

我的公司正在使用recompose作为我们的状态管理工具。我们正在重构我们的应用程序以使用钩子。对于下面的代码，您将如何用 react 钩子组件替换重构组件？

我知道 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);

Answer 1

引用Dan Abramov的话：

为了获得生产力，您需要"以效果思考"，以及他们的心理 模型更接近于实现同步而不是响应 生命周期事件。

我们不能 1：1 替换钩子和 hoc，因为它们是不同的编程模型。 不过，我们可以尝试通过以下方式进行迁移：

withProps- 可以更换为组件内部的常量

withHandlers- 可以替换为组件内的箭头函数

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

一个简单的例子(并非适用于所有情况)：

与hoc

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`);
}
}

Answer 2

你是对的，withState可以用useState代替。

对于 Redux 部分，React 建议继续以与使用它相同的方式使用 API，但您应该将其从compose中删除。在react-reduxv7 中，将为此实现一个新的钩子。

现在withHandlers，可以用普通的javascript函数替换，将其添加到您的组件或任何其他文件中

以前：

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

现在：

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

最后但并非最不重要的一点是，componentDidMount和componendDidUpdate将需要替换为useEffect。在这里，将有一点阅读来了解它是如何工作的，但这并不难。您将创建基本上是运行每个渲染的函数的效果，如果您希望仅在某些内容发生变化时才运行，则可以传递第二个参数，类似于componentDidUpdate或者如果您只想运行一次，则可以传递空数组类似于componentDidMount。不要将效果视为生命周期事件的替换，但您可以获得相同的结果。看看这篇文章，我发现它非常有用。

其他钩子很少，我发现useContext，useCallback和useReducer非常好用。