Мобильная версияЯ в настоящее время работаю над системой пользовательского интерфейса с родительским компонентом (фасадом) и несколькими дочерними компонентами. Каждый компонент поддерживает свое собственное состояние, в то время как родитель управляет всем централизованным. Я хотел бы получить несколько советов по лучшим практикам для такого рода архитектуры.
Код: Выделить всё
// Parent component
class ParentFacade {
private state: ParentState;
private childComponentA: ChildComponentA;
private childComponentB: ChildComponentB;
private childComponentC: ChildComponentC;
async setData(data: Data): Promise {
await this.state.setData(data);
await this.handleDataChange(data);
}
private async handleDataChange(data: Data): Promise {
await this.state.setData(data);
this.notifyAllComponents(data);
await this.reflectStatus();
}
private notifyAllComponents(data: Data): void {
this.childComponentA.updateData(data);
this.childComponentB.updateData(data);
this.childComponentC.updateData(data);
}
}
// Child component
class ChildComponent {
private state = { data: initialData };
private onDataChange?: (data: Data) => void;
public updateData(data: Data): void {
this.setState({ data });
}
public async updateDataField(newValue: string): Promise {
const updatedData = { ...this.state.data, field: newValue };
await this.service.updateDataField(updatedData);
this.onDataChange?.(updatedData); // Notify parent
}
}
У меня на самом деле есть эта проблема в другом файле: < /p>
// external-service.ts
export async function updateDataStatus(
element: HTMLElement,
childComponent: ChildComponent
): Promise {
// ... processing ...
// Direct child component update (dangerous)
childComponent.updateData(updatedData);
}
< /code>
Решения, которые я пробовал (и почему они не работают) < /p>
Создание updatedata () < /code> private < /li>
< /ol>
class ChildComponent {
private updateData(data: Data): void {
// private
this.setState({ data });
}
}
< /code>
Проблема здесь заключается в том, что родитель тоже не может его назвать, разбивая дизайн < /p>
, требуя от родительской справки < /li>
< /ol>
class ChildComponent {
constructor(private parentFacade: ParentFacade) {}
// updateData() removed
}
< /code>
Проблема здесь заключается в том, что у родителя нет способа обновлять детские компоненты < /p>
Компоненты без ведома < /li>
< /ol>
class ChildComponent {
render(data: ReadonlyData) {
this.updateUI(data);
}
}
[/code]
The problem here is that a mechanism is still needed to notify parent of changes, and mutation risk remains the same
I'd really appreciate your thoughts on these questions:
Is there a way to prevent external code from calling updateData() while still allowing the parent to call it?
< /li>
Каковы лучшие шаблоны дизайна для управления состоянием компонентов родителей, которые предотвращают несоответствия? Дочерний компонент имеет свое собственное состояние), или вы рекомендуете другую шаблон? /> < /ul>
ограничения < /p>
Значительные изменения в существующей кодовой базе трудно < /li>
Введение внешней библиотеки возможно, но должно быть минимальным < /li>
Производительность важна < /li>
< /ul>
Я смогу о том, чтобы вы могли быть так, что может быть для всех, может быть, это может быть. Спасибо, что нашли время прочитать это.// Current problematic design
class ChildComponent {
private history: HistoryStack; // Child manages history
undo() {
const previousState = this.history.undo();
this.updateData(previousState); // Direct update (dangerous)
}
}
// Ideal design would be
class ParentFacade {
private history: HistoryStack; // Parent manages history
undo() {
const previousState = this.history.undo();
this.setData(previousState); // Safe parent-mediated update
}
}
< /code>
Это архитектурное ограничение делает внешнее предотвращение доступа столь сложной. Любые решения, которые работают в этом ограничении, были бы особенно полезны!
Подробнее здесь: https://stackoverflow.com/questions/797 ... tedata-whi
