将 graphQL 突变函数作为道具传递还是将其注入子组件?

Question

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

我应该在顶部成分中注射突变并将其传递给所有孩子(示例 2)，还是应该将突变注射到需要的地方(示例 1)？

使用示例 1，在突变调用后更新现有数据更容易，而传递父组件的doMutation()-function 会使更新 mor 对我来说变得复杂。

---

示例1(多次注射)

父母

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)

---

示例 2(将函数传递为道具)

父母

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>
)
}
}

Answer 1

这主要归结为首选项，但避免将查询结果作为 props 传递有一些优点，即：

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