How can we build great React components?

How can we build great React components?

The question in my mind turn for weeks, knowing the components of the purpose is to reduce the coupling between modules. But the actual development of certain modules will be total or coupling. Introduction personal understanding of the components of here. What's wrong with that, we want to actively point out;

What is componentization?

Baidu Encyclopedia : componentization is a highly complex applications, to better define the role of the functional modules of the way.

Popular understood that : a front end module between the functional development of the application system are interdependent years, highly coupled. For example: A modification module, you first find the other modules associated with the A module, pay attention to modify the impact on other modules A module caused; componentization is not a new technology, it is a thought . Seeks to construct purely modules (called component of, for assembly of components of the module), the principle of a single function module, thereby reducing the coupling between modules and dependent.

Summary: In order to split the main components of complex applications, to reduce the coupling between modules, the definite boundaries between the components, in favor of code maintenance. Improving component reuse (code reuse);

conclusion of issue:

I asked: After the realization of the module assembly in accordance with the principle of a single, how do encounter have interaction between components?

The actual development process, there will certainly be the interaction between most components. For example: "List Query function blocks" of components can be divided into "list shows component" and "query component", because "the list of components" need "inquiry" of support, then there must be interaction between the two components ; the interaction between the form of roughly be divided into two components (as shown below):

• Direct interaction forms : hard-coded in the form of association between the components together, depending on the complexity of relevance in view of a "interaction region" how much area, namely: the larger the area, the higher the degree of coupling between the components, the more fuzzy boundary, the It is not conducive to code maintenance and reuse;
• Indirect forms of interaction : interaction performed by a third-party components, avoid direct interaction between components. Their interactions need to follow generally corresponding rule, does not need to change the logical components between the original; (Note: React in the system, a third party refers to customize / high-order components, Redux and other means);

Summary : "direct interaction" and "indirect interaction" is better what form? No specific answer to this question, I think this is determined based on the copy of the association between components. If it is small, low degree of association between the components can be achieved using the "direct interaction." Large, high degree of association between the components, can use the "indirect interaction" implemented;

Second question: What size according to the components of the module?

I can only say that the actual project analysis, the minimum size of the components of the press as much as possible , the system complexity of each application are different, then the situation is not the same division. No rules need to be described components of module according to a certain size. We can only understand clearly before the entire project development process, using different components of granularity of the actual project in different modules; for example, the above mentioned "list query function module", you can use it as an entire assembly, it can also be split into "list shows component" and "query component" even further "query module" split into smaller size, such as query component in the form, you can form type (input, select, button, textarea etc.) of the individual components;

All in all, the size of the particle size is divided between mainly taking into account the nature of the project, project requirements and associated components degrees. And dividing the particle size is smaller, the cost of time spent, and more conducive to assembly and maintenance of the multiplexing;

Look at a simple example of interactive form (here with the indirect interaction, to find the child can interact directly with the form of code changes)

DemoOneView; because it is a simple Demo, so there is no use redux techniques. React pure technology;

Project directory structure is as follows:

1. DemoOneView: understood as a system of large module;
2. index.js file: providing outwardly opening DemoView large module interface;
3. DemoInfoView directory: DemoOneView module is understood to be split into a single module system "list query function module";
4. data.js file: construed as analog data (analog data HTTP request);
5. ListComponent.jsx file: understood as a single module system "list query function modules" in the "List display system";
6. SearchComponent.jsx file: understood as a single module system "list query function modules" in the "query system";
7. Index.jsx file: custom component understood as indirect interaction of third parties to associate "list shows system" and "query system";

The above components in the system and turned it into two components ListComponent.jsx "list shows system" and SearchComponent.jsx "query system", and to be associated interact through bridge components (so-called third party) Index.jsx; operating results as follows:

github Source Address: https://github.com/song199210/ReactDemo/tree/master/src/views/DemoOneView