时间戳

首页 > 解决方案 > 使用 redux 时应该首选哪种生命周期方法？

javascript - 使用 redux 时应该首选哪种生命周期方法？

问题描述

从 props 中的 redux store 获取数据时，应该首选哪种生命周期方法？

标签： javascriptreactjsreduxreact-redux

解决方案

通常，您不需要任何生命周期方法，但这取决于您的用例以及您希望如何使用来自 redux 存储的数据。通常流程可以是这样的：

  1. 将您的组件与 redux 存储连接。
  2. 将您的状态映射到 props 并在组件中获取您想要的。
  3. 在 componentDidMount() 中，您将获取 props 中的数据。
  4. 如果您想检查您的数据是否从存储中更改，那么您可以使用 componentDidUpdate(prevProps,prevState) 方法进行检查。

这是一个小演示：

class YourComponent extends React.Component {


  componentDidMount() {
    console.log("You will get your data here:",this.props.data);
  }

  componentDidUpdate(prevProps, prevState,) {
    //Here you can compare data if it is changed or not.
    if(prevProps.data !== this.props.data){
        console.log("Your data is changed.");   
    }
  }

}

//Map your state to props
const mapStateToProps = store =>{
    const data = store.data
    return {
        data
    }
};

//Connect your component with redux store.
export default connect(mapStoreToProps)(YourComponent);

推荐阅读