Question

因此，我对构建React或Vue应用程序时传递数据的最佳方法感到困惑。

方法1）我的子组件调用了一些函数，这些函数通过API调用来获取/刷新组件上的数据。

方法2）我最近在所有可能的子组件中进行了切换，以将这些API调用置于父组件中，并且子组件调用在父组件中调用该API的函数，并将新数据作为prop传入。
这些是处理数据的首选方式吗？方法2对我来说有点干净，不可能在所有地方都可以，但是感觉到父母应该在可能的情况下负责刷新数据，但这也使孩子依赖于父母，因此我不确定

方法1

<template>

      <div>
          <div v-for="(prod,index) in this.products" :key=index><
              {{ prod.name }}
          </div>
      </div>
</template>

<script>
        data() {
            return {
                products: []    
            }
        },
        mounted() {
             this.getProducts();
        },  
        methods: {
            getProducts: function() {
                axios.post('api/########', { 
                        this.products: response.data, 
                })

        }
</script>

方法2

<template>
      <div>
          <div v-for="(prod,index) in products" :key=index><
              {{ prod.name }}
          </div>
      </div>
</template>

<script>
        props: {
            products: {type: Array}
        }  
        methods: {
            getProducts: function() {
                this.$parent.handleGetProducts()
               *** PARENT WOULD HAVE FUNCTION HANDLEGETPRODUCTS TO MAKE THE API CALL AND PASS DOWN AND REFRESH THE PROPS GOING INTO THIS COMPONENTU**
        }
</script>

Answer 1

当涉及Vue.js和React都基于的单向数据架构时，应考虑以下准则：

子级永远不要直接访问父级组件数据或功能。
父级组件负责将数据作为 props 传递给其子级
通常，应将API调用（或副作用）之类的东西放到较高级的组件（即父母）中。
在某些情况下，如果子组件需要告诉父组件刷新数据，则应通过Vue.js中的事件和React中的回调来完成。除非父母已将其作为回调道具传递，否则不要真正访问父组件方法。
当数据需要由不同视图中的多个组件共享时，请考虑使用状态容器，例如Vuex，Redux或MobX。再次请记住，状态容器应由高阶组件访问，并且在叶子或低阶子组件的情况下，将对状态容器的访问控制到最小。
或者，Vue.js提供插件和提供-注入机制，用于从指定子级开始跨组件树共享数据。在React世界中，Context API是等效的。同样，这种方式会产生强烈的耦合，因此应减少使用频率。

因此，对方法2所做的工作是长期解决方案，牢记上述准则。

Answer 2

您可以在React中以两种方式传递数据。

使用道具-将数据父级传递给子级
使用回调和状态-将数据子级传递给父级时

有关详细信息，您可以在中等Passing Data Between React Components中查看这篇文章

Vue / React：调用函数传递数据的正确方法？

2 个答案: