Question

许多关于Apollo如何涉及

的例子

<Mutation
     mutation={YOUR_MUTATION}
     update={(cache, { data }) => {
         // do stuff to update Apollo store
     }}
 >
   { mutate => ( <UI mutate={mutate} /> ) }

  </Mutation>

这两条规则在ESLint规则和实践中都存在冲突。我们也知道JSX props should not use .bind() - how to avoid using bind? JSX道具在每个渲染上实例化新箭头函数都不是好习惯。

您如何/在何处编写update处理程序？
如果目标是尽可能多地制作“纯”函数，那么将处理程序附加到update道具的正确方法是什么？

Answer 1

在调用Mutation组件的组件中创建更新功能。像这样：

class Root extends React.Component {
  update = (cache, { data }) => {
    // do stuff to update Apollo store
  };

  render() {
    return (
      <Mutation
        mutation={YOUR_MUTATION}
       update={this.update}
      >
        {mutate => (<UI mutate={mutate} />)}
      </Mutation>
    )
  }
}

这样，只有在安装Root组件时，您才会在每次渲染时都不创建新函数。

编辑：

如果update是一个纯函数，你可以把它放在类声明之外。

Answer 2

这里的问题是每个组件重新渲染的新处理程序，它会影响性能并导致子级重新渲染。

我认为你应该使用以下方法之一：

1）如果不需要

中的类上下文，则将函数解压缩到模块全局const

const handler = () => {//asdfasdf}
const component = () => {
  return <Mutation
     mutation={YOUR_MUTATION}
     update={handler}
 >
   { handler ) }

  </Mutation>
}

2）带箭头属性的课程

class Component extends React.Component {
  update = (u) => this.props.update;
  render () {
    return <Mutation
     mutation={YOUR_MUTATION}
     update={this.update}
 >
   { etc... }

  </Mutation>
  }
}

使用箭头功能渲染道具，Apollo和JSX道具

2 个答案: