Сохранение ссылки на дочернюю функцию в родительской

У меня есть интересный вариант использования для хранения ссылок на функцию, принадлежащую дочернему компоненту. Кстати, я использую новый контекстный API React для передачи данных глубоко вложенным дочерним компонентам.

Я нашел ряд других ответов, посвященных аналогичным проблемам, но они не совсем соответствуют моему варианту использования. См. здесь и здесь.

Это проблема высокого уровня:

1. Компонент Provider под названием <Parent /> содержит логику и состояние, которые передаются всем компонентам <Child />, которые являются Consumers.
2. Компоненты Child получают опору verify, которая, по сути, является своего рода функцией валидатора для этого конкретного Child. Каждый вызов verify создает verificationResult на основе изменений входящего состояния от Parent.
3. Важно отметить, что все остальные компоненты Child должны быть уведомлены или знать результат каждого verificationResult, произведенного его братьями и сестрами.
4. Чтобы сделать вещи более интересными, я бы предпочел не хранить так называемый verificationResult каждого дочернего элемента в родительском состоянии, если мне это не нужно, поскольку это по сути производное состояние и может быть вычислено в Parentrender().

Решение 1:

хранить verificationResult каждого ребенка в Parent. Это можно сделать, дождавшись изменения соответствующего значения в Child каждого componentDidUpdate(), например:

// Child.js
...
componentDidUpdate(pp) {
  const { hash, value, verify, setVerificationResult } = this.props

  // this check is a little more involved but 
  // the next line captures the gist of it. 
  if (pp.value[pp.hash] !== value[hash]) {
    setVerificationResult(hash, verify(value[hash], value))
  }
}
...

// Parent.js
...
setVerificationResult(hash, result) {
 this.setState(({ verificationResults }) => ({
    ...verificationResults, [hash]: result
 })) 
}
...

Примечание:

• this.props.value и this.props.setVerificationResult принимаются от Parent, который является контекстом Provider, в то время как

• this.props.hash и this.props.verify передаются компоненту Child напрямую.

this.props.hash захватывает часть value, о которой этот конкретный Child должен знать.

// MyComponent.js

render() {
  return (
    ...
    <Child 
      hash = "someHash"
      verify = {(value, allValues) => {
        return value === 42 && allValues["anotherHash"] === 42
      }}
      render = {({ verificationResults }) => (
        <pre>{JSON.stringify(verificationResults["someHash"], null, ' ')}</pre>
      )}
    /> 
   ...
)

Решение 1 соответствует принципу однонаправленного потока данных, который поощряет реагирование. Однако у меня есть 2 проблемы с этим решением. Во-первых, мне нужно сохранить то, что по сути является состоянием, которое можно вывести. Во-вторых, вызов setVerificationResult() приведет к нежелательному повторному рендерингу. Не говоря уже о дополнительной логике в componentDidUpdate

Решение 2

Следующие варианты выглядят примерно так. Обратите внимание, что я попытался показать только важные части:

// Child.js
...
componentDidMount() {
  const { register } = this.props
  register(this.verify)
}

verify(values) {
  const { hash, verify } = this.props
  return { [hash]: verify(values[hash], values) }
}
...

// Parent.js
constructor(props)
  super(props)
  this.tests = [] 
  this.state = { 
    value: null, 
    // other initial state
  }
  ...
}

register(verifyFunc) {
  this.tests.push(verifyFunc)
}

render() {
  const { value } = this.sate
  let result = {}
  this.tests.forEach(test => result = { ...result, ...test(value) })
  return (
    <Provider 
      value = {{
        ...this.state,
        verificationResults: result,
        register: this.register,
        // other things...
     }}
    >
      {this.props.children}
    </Provider>
  )
}

Обратите внимание, что во втором решении я не сохраняю никакого дополнительного состояния, так как оно просто вычисляется на лету. Однако я храню ссылки на функцию в дочернем компоненте.

Может кто подскажет, зачем НЕТ использовать решение 2? Любые альтернативные предложения о том, как заставить эту работу работать?

Дополнительные замечания:

• Почему бы не передать функцию проверки родительскому элементу напрямую? Я мог бы, но это не сделало бы очень чистый API.
• Вы можете предположить, что я выполняю необходимую очистку при размонтировании и т. д.
• Проблема более сложна, чем показано здесь - на самом деле существуют глубоко вложенные потребители, которые общаются с «локальным» провайдером, который «разделяет» значения и логику, пока они не достигнут так называемых листовых компонентов, в то время как «главный» провайдер используется в качестве корневого. узел, содержащий все состояние компонентов и логику в иерархии компонентов.