Javascript 将graphQL变异函数作为prop传递还是将其注入子组件？

我在我的reactJS/graphQL应用程序中使用react apollo。 有时我确实需要对多个成分进行相同的突变。那么，调用突变后使用突变和更新数据的最佳方法是什么

我应该将突变注入顶部成分并将其传递给所有儿童吗？例2，还是应该在需要的地方注入突变？例1

对于示例1，在变异调用后更新现有数据更容易，而传递父组件的domutate函数会使更新mor变得复杂

示例1多次注入

母公司

Cild

格兰奇尔德

示例2作为道具传递函数

母公司

Cild

格兰奇尔德

---

这主要取决于偏好，但避免将查询结果作为道具传递有一些好处，即：

更好的性能。避免自上而下的道具流意味着减少不必要的中间组件重新渲染。 更简单的数据流。无需追踪道具的来源。 更灵活。即使两个组件最初需要相同的数据，需求也会随着时间而变化。让每个组件使用它们自己的钩子意味着您可以为一个组件更改传递给钩子的参数，而不会影响另一个组件。 减少父组件和子组件之间的耦合。您可以重构父组件或将子组件添加到应用程序的其他部分，而无需担心必须确保将数据传递给子组件。 相关：请注意，graphql HOC和render props组件都已被弃用。您应该改用新的hooks API。

import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import { Button } from 'semantic-ui-react'
import Child from './Child'
import { MUTATION } from 'graphql/'

export class Parent extends Component {
    doMutation (event, { name, value }) {
        const { someMutation } = this.props
        return someMutation({
            variables: {
                value
            }
        })
    }

    render () {
        const { data } = this.props

        return (
            <>
                <Button onClick='this.doMutation.bind(this')>Click me to manipulate data</Button>
                <Child data={data} />
            </>
        )
    }
}
export default graphql(MUTATION, { name: 'someMutation' })(Parent)

import React, { Component } from 'react'
import GrandChild from './GrandChild'

export default class Child extends Component {
    render () {
        return <GrandChild data={this.props.data} />
    }
}

import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import { Button } from 'semantic-ui-react'
import { MUTATION } from 'graphql/'

export class GrandChild extends Component {
    doMutation (event, { name, value }) {
        const { someMutation } = this.props
        return someMutation({
            variables: {
                value
            }
        })
    }

    render () {
        const { data } = this.props

        return (
            <Button onClick='this.doMutation.bind(this')>Click me to manipulate data</Button>
        )
    }
}
export default graphql(MUTATION, { name: 'someMutation' })(GrandChild)

import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import { Button } from 'semantic-ui-react'
import Child from './Child'
import { MUTATION } from 'graphql/'

export class Parent extends Component {
    doMutation (event, { name, value }) {
        const { someMutation } = this.props
        return someMutation({
            variables: {
                value
            }
        })
    }

    render () {
        const { data } = this.props

        return (
            <>
                <Button onClick='this.doMutation.bind(this')>Click me to manipulate data</Button>
                <Child doMutation={this.doMutation.bind(this)} data={data} />
            </>
        )
    }
}
export default graphql(MUTATION, { name: 'someMutation' })(Parent)

import React, { Component } from 'react'
import GrandChild from './GrandChild'

export default class Child extends Component {
    render () {
        return <GrandChild doMutation={this.props.doMutation} data={this.props.data} />
    }
}

import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import { Button } from 'semantic-ui-react'
import { MUTATION } from 'graphql/'

export default class GrandChild extends Component {
    render () {
        const { doMutation } = this.props

        return (
            <Button onClick='doMutation.bind(this')>Click me to manipulate data</Button>
        )
    }
}