Now I have an idea here, but I have never done it before, so I don’t know if it is feasible. for example:
// 这是一个父组件
<Father />
// 这是一个子组件
<Son />The parent component may contain multiple reused sub-components. The parent component is responsible for getting data from the server, and the child component is responsible for rendering the data obtained by the parent component. This is all normal.
Now there is a requirement for sub-components to have a filtering function. The simplest example is a list page that displays different data according to different filtering methods. For example, ‘Select all data from No. 10 to No. 12 and display it’. If the data operations are placed in the parent component, the parent component will become very bloated because the child component will be referenced multiple times.
My idea is to put the data on the state of the sub-component and let the sub-component manage it by itself, thus causing the re-render of the sub-component. However, I have not actually done this kind of functional division, so I would like to ask the experts whether my idea is feasible? Will there be any limitations in the future?
After looking at it, it seems that some people don’t quite understand what I mean, so I’ll post a picture 
Display different data based on filtering
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can use the parent component as a simple data acquisition component, and then write the filtered event function in the child component. As long as the setState of the child component can trigger re-render; as for the rendered data, you can directly use the data of the parent component, and then in Do a filter in render and use the data after the filter to render.
It is necessary to make network requests in father, and then use props to pass to son. There may be many child nodes, and it is unrealistic to make network requests again and again. When the data of the parent node changes, of course the child nodes can be updated here, because they are all One-way data flow.
If you have too much data and don’t want to use parent nodes to organize it, you can also use redux, but it is difficult.
Subcomponents should be highly reusable, and the incoming data determines the rendered content. Different filtering methods can be written in child components. The parent component passes in the data and the number of the filtering method, and the child component renders according to these conditions.
In terms of requirements:
Songets thepropsof the parent component, maintains astatelocally, and then maintains afilter state. During initialization andcomponentWillReceiveProps, filter the props passed by the parent component and setState them to the child component.During the filtering operation, call the filtering function again to process the props passed by the parent component: because the passed props are unchanged, but the state of your component may cause data loss due to filtering.
Go further: If you need to make filter conditions, share them with multiple components or store them persistently. There you have to consider managing the filtering conditions within redux.
Logically speaking, it should be placed in a sub-component, which is more in line with SRP (Single Responsibility Principle).
getData(filter1,filter2,filter3), the subcomponent passes the filter1, filter2, filter3 parameters to the parent component, the parent component pulls the data according to the parameters, and then passes the data to the subcomponent