Должен ли я передать функции для моего компонента вручную или с помощью атрибута ref?

Question

Я создал свой собственный FormBuilder компонент (который теперь составляет почти 5k строку), поэтому он может покрыть все мои потребности, одна проблема, с которой я сталкиваюсь, - это загрузка нового набора FormData в любое время, когда пользователь потребности, так как мой FormBuilder может принимать набор вложенных компонентов, довольно сложно сравнивать изменения и обрабатывать все в компоненте, который монтировал, одним простым способом является создание метода loadFormData внутри FormBuilder и вызов этого метода из за пределами компонента
Я знаю, что это легко можно сделать с помощью ref attribute, но я очень рекомендую избегать этого, и я обескуражен! и я не был уверен, стоит ли мне это делать или нет!
Итак, я придумал новую альтернативу, которая делает то же самое:

class A {

    onGetFormBuilderInternalFunction = (functions) => {
        this.formBuilderFunctions = functions
    }

    onLoadButtonClick = () => {        
      this.formBuilderFunctions.loadFormData(someNewData)
    }

    render () {
        <FormBuilder onGetInternalFunction={this.onGetFormBuilderInternalFunction}
    }
}


class FormBuilder {
    componentDidMount() {
        if (this.props.onGetInternalFunction) {
            this.props.onGetInternalFunction({
                loadFormData: this.loadFormData,
            })
        }
    }
}  

Так что вы думаете? лучший подход? или это все-таки плохо? Я думал, что использование этого метода, по крайней мере, даст только доступ к нужным мне функциям, а не ко всему остальному.
Я должен также упомянуть, loadFormData - это просто один пример, и есть по крайней мере, пару из этих special function, которые я действительно считаю, лучше всего просто вызывать извне, так что даже если я каким-то образом передам новые данные из реквизита и обработаю их в componentDidUpdate, для остальных этих функций я все еще продолжаю необходимо получить доступ к FormBuilder

Answer 1

Да, это правильный способ сделать это. Однако, если у вас есть 5000-строчный компонент, я настоятельно рекомендую разбить его на более мелкие подкомпоненты.

Answer 2

Сохраняйте функции состояний и обработчиков в Parent и передавайте их в FormBuilder в качестве реквизита.

Answer 3

Я не уверен, как настроен ваш компонент, так что это просто мысли, основанные на смутном понимании.

Как правило, вы не захотите использовать ни один из этих подходов. Вместо этого рекомендуемый подход состоит в том, чтобы передать someNewData в FormBuilder в качестве одного или нескольких реквизитов (в вашем случае я предполагаю, что один реквизит).

Избегайте использования ссылок для всего, что может быть сделано декларативно.

- React Docs: Когда использовать Refs

Этот сценарий обсуждается в Upting State Up :

Вместо того, чтобы пытаться синхронизировать c состояние между различными компонентами, вы должны полагаться на нисходящий поток данных.

- Реагировать на документы: Lifting State Up # Извлеченные уроки

Если вы отслеживаете измененное состояние отдельно от исходных данных, то вам просто нужно сбросить это состояние при изменении данных формы (someNewData). Однако это не рекомендуемый подход.

Вместо этого неконтролируемые компоненты могут подойти. Установив defaultValue в исходные данные (то есть someNewData.someField), а затем разрешив компоненту обрабатывать значение до тех пор, пока оно вам не понадобится (например, когда нажата кнопка submit, прочитайте значение из компонента), вы можете упростить FormBuilder. Примечание: если вы хотите сбросить неуправляемый компонент при изменении исходных данных (someNewData.someField), вам нужно будет использовать key опору для неуправляемого компонента со значением, основанным на someNewData.someField.

Если вы хотите «сбросить» какое-то состояние при смене опоры, рассмотрите возможность сделать компонент полностью контролируемым или полностью неуправляемым с помощью клавиши вместо этого.

- Реакция документов: Реакция компонента # stati c getDerivedStateFromProps ()

Answer 4

В ответ на ваш главный вопрос:

Лучше, чем вы сейчас делаете, чем использовать ссылку.

Я основываю этот ответ на том, что говорится в документации по реакции последний абзац «ref» описания глоссария и что текущий подход также может быть поддержан в случае, если FormBuilder подвергается рефакторингу, чтобы стать функциональным компонентом в будущем (с крючками и т. д.) при использовании " ref "не будет.