React Study Notes

Event handling and parameter compositing

React only need to name the event handler as the props of the component in the Hump form. React internally creates a synthetic event system to make all events consistent across IE8 browsers. That is, react knows how to bubble and capture events, and your event handler receives parameters that are consistent with the specifications, regardless of which processor you use.

Behind the Scenes: Automatic binding (autobinding) and event Proxy (delegation)

Automatic binding : When JavaScript creates callbacks, this it is generally necessary to explicitly bind the method to its instance to ensure correctness. In react, all methods are automatically bound to its component instances. React also caches these methods, so both the CPU and the memory are very efficient.

Event Proxy : React does not actually bind the event handler to the node itself. When react is started, it handles all events at the outermost layer using a unique event listener. When the component is loaded and unloaded, only the event handler is added or removed internally. When an event is triggered, react determines how it is distributed based on the mapping. When the mapping does not have an event handler, it is treated as empty.

How State works

A common method of notifying reacts data changes is to call setState(data,callback) . This method merges data into and this.state re-renders the component. try to make as many components as possible stateless . A common pattern is to create multiple stateless components that are only responsible for rendering the data, creating a stateful component on top of them and passing its state through props to the child. This stateful component encapsulates the interaction logic of all users, and these stateless components are responsible for declarative rendering data.

Use state when a user input is required, when a service request is made, a change in time, and so on.
When you create a stateful component, think about what data is needed at least in its state, and only store that data this.state .

Data flow

In react, the data is passed from the owner to the person who is described above props . This is an efficient one-way data binding; the owners pass their props or state calculate some values and bind the values to the props of the components they hold. Because this process is called recursively, data changes are automatically reflected in all the places where they are used.

Mixins

Components are the best way to react reusable code, but sometimes there are some different components that need to share some functionality with each other. Sometimes it becomes a cross-sectional concern. React used mixins to solve this kind of problem.

Controlled components

Controlled component : A controlled component has a value prop. Renders a controlled <input> value value that reflects the prop. So in this case, we are more accepting the user-supplied value to update input the prop of the component value .
Uncontrolled component : An value uncontrolled component with no attributes <input> . The uncontrolled component maintains its own internal state.

The process of using react

• Start with the model (mock)
• Split the UI into a hierarchy of components
• Create a static version with react

  To build a static version of the app to render your model, you'll want to build a component that reuses other components and uses props to deliver the data. Props is a way of passing data from a parent to a child. Stateis reserved for interactivity, which is a data lock that changes over time.

• Determine the smallest (but complete) UI state expression
• Determine where your state should be stored
• Add Reverse Data Flow

Determine which components can change or own the state

• Determine which components render content based on state
• Find a common owner component (on top of all the levels that require this state component to find a shared single component).
• Either a co-owner or a more advanced component at another level should have this state
• If you can't find a component that makes sense to have the state, you can simply create a new component to hold the state and add it to a higher level than the co-owning component.

From for notes (Wiz)

React Study Notes