React react react in depth first class citizens props onchange


Title: ‘[react] in depth – props & onchange’
date: 2017-08-23 10:05:07

  • react
  • reactjs
  • props
  • onChange
  • frame
  • redux
  • technology

Written in front

The blog’s predecessor is “10 things novice react must know”. The result says, “everything” is far beyond the expected limit of 300-500 words. It causes great trouble to the readers’ reading. Therefore, the ten things is divided into several parts, each of which only talks about one theme.


The most recommended data interaction mode of react is props & onchnage. In this way of interaction: for a visual componentComponentAUsepropsTo send information to itonChangeCallback function to receiveComponentAMessage sent. In the programming world, we prefer to refer to the above “interaction” as “interface”, although this “interface” is not our object-oriented languageinterfaceBut withinterfaceIt has similar functions. We call this “interface specification” as “props & onchange interface specification”.

React also gives another way to interact with data: ref & method. In this way of interaction, we usethis.refOfComponentA = r }The way to getComponentAObject, and then use thethis.refOfComponentA.someMethod()To send it a message. We call this interaction “ref & method interface specification”. In a typical client development environment (IOS, Android, Windows PC, etc.), this method is more common, more friendly to function calls, and more “like” the program language.However, for novices in react, we strongly do not recommend using this excuse specification, unless you know the whole mechanism of react very well, you still want to use it. Because itThe consistency of react components is seriously damaged。 The reasons are:

  1. The hierarchical structure of react’s visual components is generally expressed in JSX file in a language similar to HTML, which is convenient, intuitive and expressive. In this special JSX language, “props & onchange interface specification” is easy and natural to follow. If you use the “ref & method interface specification”, you have to jump to many lines to understand the information transmission process, which is not conducive to code writing and reading.
  2. We can’t avoid using props to transfer data. We say “can’t be avoided” because there are only two reasons: first, in JSX files, HTML built-in elements can only pass parameters through props; second, many third-party libraries (if we are developing a large project, there must be many “wheels” that don’t need to be built by ourselves) must also pass parameters through props. Therefore, props is inevitable, and there are two interface specifications at the same time, which is meaningless and error prone.
  3. The third reason may be “experiential”. If you can’t understand and recognize it now, just listen to it; anyway, when you have used enough excellent open source frameworks, you will surely understand:When you come into contact with a new framework, it’s the best choice to abandon your old habits for a while and follow its language norms。 The reason is simple:
    1. From birth to fame, a frame must have its own unique frame thought, which can be extracted from other frames of the same type. The verification of time is meaningful.
    2. If you use other programming ideas too recklessly, you will encounter many obstacles; it will not help you to really understand the advantages and bottlenecks of this framework.