如何從重構轉換為鈎子？

Question

我的公司正在使用重構作為我們的狀態管理工具。 我們正在重構我們的應用程序以使用鈎子。 對於下面的代碼，如何用反應鈎子組件替換重構組件？

據我所知，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

引用丹阿布拉莫夫：

為了提高效率，您需要“思考效果”，並且他們的心理模型更接近於實現同步而不是響應生命周期事件。

我們不能以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`);
  }
}

Answer 2

你是對的， 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非常好用。