javascript - 将获取的数据存储在父组件中，标准的 React 实践是什么？

Question

在 React 中将数据存储在父组件中以传递给子组件的常见做法是什么？例如:

export default class Main extends Component{
    async componentWillMount(){
         let data = await fetch(some data);
    }
}

如果我打算将“let data”传递给子组件，应该将其存储在哪里？我不想将其置于某种状态，因为我觉得它仅在需要重新渲染时使用。以上是获取数据的正确方法吗？假设我刚刚登录，当我重定向到这个主类时，我希望它获取数据然后渲染。什么是标准做法？

Answer 1

您应该想要将其放入状态。当然，当状态改变时它会重新渲染，因此你的子组件在获得新的 props 时会更新。除此之外，您无法更新您的子组件。这是正确的做法。

您可以在 componentDidMount 中获取数据，因为 componentWillMount 将在未来版本 (v17) 中弃用。因此，您可以在那里获取数据而不是设置状态:

export default class Main extends Component{
    async componentDidMount(){
         let data = await fetch(some data);
         this.setState({data: some data});
    }
}