如何从重新组合转换为挂钩？

Question

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

我理解withState变为useState，例如：

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

变成了

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

使用道具的，使用处理程序的，组合的，提升静态的和生命周期的将更改为什么？

MapStateTrops和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

您是对的，with state可以替换为use state。

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

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

之前：

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

现在：

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

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

有几个可用的其他钩子，我发现useContext，useCallback和useReduer非常好用。

Answer 2

引用丹·阿布拉莫夫的话：

为了提高效率，您需要“考虑效果”，他们的心智模型更接近于实现同步，而不是响应生命周期事件。

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

withProps-可作为组件内部的常量替换

with Handler-可以替换为组件内部的箭头函数

生命周期-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`);
  }
}