英文:
Which Life cycle method should be preferred when using redux?
问题
哪种生命周期方法应该优先使用来从 Redux 存储中获取数据并将其传递给 props？
英文:
Which life cycles method should be preferred while getting data from redux store in props?
答案1
得分: 1
我不确定你的组件具体是如何编写的，但遵循的一般模式是将你的组件连接到redux存储，并将存储中的值映射到你的组件属性中。
从那里，你的组件将订阅来自存储的数据，你可以在componentDidMount生命周期挂钩中访问它，存储的任何其他更新都可以在componentDidUpdate挂钩中访问。类似地，props的任何更改都将触发你的组件重新渲染。
const mapStateToProps = (state) => ({
data: state.data,
});
class Checkbox extends React.Component {
componentDidMount() {
const { data } = this.props;
}
componentDidUpdate(prevProps, prevState,) {
}
}
export default connect(mapStateToProps)(Checkbox);
英文:
I am not sure how exactly is your component written, but the general pattern to follow would be to connect your component to your redux store, and map the value from your store to your components props.
From there, your component will be subscribed to the data from your store, which you can access on componentDidMount lifecycle hook, and any other updates to the store can be accessed in the componentDidUpdate hook. Similarly, any changes on your props will trigger re-rendering on your component.
const mapStateToProps = (state) => ({
data: state.data,
});
class Checkbox extends React.Component {
componentDidMount() {
const { data } = this.props;
}
componentDidUpdate(prevProps, prevState,) {
}
}
export default connect(mapStateToProps)(Checkbox);
答案2
得分: 1
通常情况下，您不需要任何生命周期方法，但这取决于您的用例以及您希望如何使用来自Redux存储的数据。通常的流程可能如下：
- 将您的组件与Redux存储连接起来。
- 将状态映射到属性，获取您在组件中需要的数据。
- 在
componentDidMount()中，您将在属性中获取数据。 - 如果您想要检查数据是否从存储中更改，那么您可以使用
componentDidUpdate(prevProps, prevState)方法来检查。
这里是一个简单的演示：
class YourComponent extends React.Component {
componentDidMount() {
console.log("您将在这里获取您的数据：", this.props.data);
}
componentDidUpdate(prevProps, prevState) {
// 在这里您可以比较数据是否已更改。
if (prevProps.data !== this.props.data) {
console.log("您的数据已更改。");
}
}
}
// 将状态映射到属性
const mapStateToProps = store => {
const data = store.data;
return {
data
};
};
// 将您的组件与Redux存储连接起来
export default connect(mapStateToProps)(YourComponent);
英文:
Generally you will not need any life cycle method but it depends on your usecase and how you want to use your data that is coming from redux store.Generally flow can be like this:
- Connect your component with redux store.
- Map your state to props and get the that you want in component.
- In componentDidMount(),you will get the data in props.
- And if you want to check if your data is changed or not from store then you can use componentDidUpdate(prevProps,prevState) method to check.
Here is a little demo:
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);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论