Javascript – Reagieren Sie auf Komponenten-Requisiten und Zustandsprobleme

Question

Jetzt habe ich hier eine Idee, aber ich habe sie noch nie konkret umgesetzt, daher weiß ich nicht, ob sie umsetzbar ist. Zum Beispiel:

// 这是一个父组件
<Father />

// 这是一个子组件
<Son />

Die übergeordnete Komponente kann mehrere wiederverwendete Unterkomponenten enthalten. Die übergeordnete Komponente ist dafür verantwortlich, Daten vom Server abzurufen, und die untergeordnete Komponente ist für die Darstellung der von der übergeordneten Komponente erhaltenen Daten verantwortlich. Das ist alles normal.
Jetzt besteht die Anforderung, dass Unterkomponenten über eine Filterfunktion verfügen müssen. Das einfachste Beispiel ist eine Listenseite, die unterschiedliche Daten entsprechend unterschiedlicher Filtermethoden anzeigt. Beispiel: „Wählen Sie alle Daten von Nr. 10 bis Nr. 12 aus und zeigen Sie sie an.“ Wenn die Datenoperationen in der übergeordneten Komponente platziert werden, wird die übergeordnete Komponente sehr aufgebläht, da mehrfach auf die untergeordnete Komponente verwiesen wird.
Meine Idee besteht darin, die Daten über den Zustand der Unterkomponente zu platzieren und sie von der Unterkomponente selbst verwalten zu lassen, was zu einem erneuten Rendern der Unterkomponente führt. Allerdings habe ich diese Art der Funktionsaufteilung eigentlich noch nicht gemacht, daher möchte ich die Experten fragen, ob meine Idee realisierbar ist? Wird es in Zukunft Einschränkungen geben?

Wenn man es betrachtet, scheint es, dass einige Leute nicht ganz verstehen, was ich meine, also werde ich ein Bild posten

Zeigen Sie verschiedene Daten basierend auf der Filterung an

Answer 1

可以把父组件作为单纯的数据获取组件，然后子组件中写过滤的事件函数，只要子组件的setState就能触发re-render的；至于渲染的数据，可以直接用父组件的数据，然后在render中做filter，用filter之后的数据去渲染。

Answer 2

就是要在father 里面做网络请求，然后用props传给son，子节点可能有好多，都一次次做网络请求不现实，这里当父节点的数据发生变化当然能更新子节点了，因为都是单向数据流。

如果你的数据实在是太多不想用父节点来组织的话也可以用redux吧，不过有难度。

Answer 3

子组件应该是可高度复用的，传入的数据决定渲染的内容。不同的过滤方法可以写在子组件中，父组件传入数据和过滤方式的编号，子组件根据这些条件渲染。

Answer 4

就需求而言：Son拿到父组件的props，同时本地维护一份state，然后再维护一个filter state。初始化和componentWillReceiveProps时把父组件传递的props过滤一遍setState到子组件上。

过滤操作时再调用一遍过滤函数处理父组件传递的props：因为传递的props是不变的，但是你组件的state或许由于过滤导致数据丢失什么的。

更进一步：如果需要做过滤条件多组件共享或者持久化存储。那里就得考虑redux之内的把过滤条件管理起来了。

Answer 5

讲道理是应该放到子组件中的，这样比较符合SRP(单一职责原则。

Answer 6

getData(filter1,filter2,filter3)，子组件将filter1，filter2，filter3参数传给父组件，父组件根据参数拉数据，拉完数据给子组件