Question

从prop中的redux存储获取数据时，应首选哪种生命周期方法？

Answer 1

我不确定组件的编写方式如何，但是遵循的一般模式是将组件连接到redux商店，并将商店中的值映射到组件props。

从那里，您的组件将被订阅到商店中的数据，您可以在componentDidMount生命周期钩子上访问它，并且可以在componentDidUpdate钩子中访问商店的任何其他更新。同样，对道具的任何更改都会触发对组件的重新渲染。

const mapStateToProps = (state) => ({
  data: state.data,
});

class Checkbox extends React.Component {

  componentDidMount() {
    const { data } = this.props;
  }

  componentDidUpdate(prevProps, prevState,) {

  }

}

export default connect(mapStateToProps)(Checkbox);

Answer 2

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

将您的组件与redux存储连接。
将状态映射到props并在组件中获取所需的内容。
在componentDidMount（）中，您将在道具中获取数据。
如果要从存储中检查数据是否已更改，则可以使用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);

使用Redux时应首选哪种生命周期方法？

2 个答案: