Basic understanding of react one

1. Introduction to the historical background and features of React

1. The traditional Web UIroots of development problems, as follows:

• Traditional UIoperating too much attention to detail
• Application status is scattered everywhere, difficult to track and maintain

2. Traditional DOM APIfocus too much detail, Reactalways refresh the whole page, do not care about the details

3. React It's very simple, as shown below:

• 1 new concept
• 4 must API
• Unidirectional data flow
• Complete error message

4. ReactSolve the UIdetails, use the data model Fluxarchitecture, unidirectional data flow

Second, consider the construction of UI in a component way

1. Contemplate a component UI, the UIorganized as a tree of components

2. Appreciated that Reactcomponents as follows:

• porps + state = view
• React Components generally do not provide methods, but some kind of state machine
• React The component can be understood as a pure function
• One-way data binding

3. Create a simple component TabSelect, as follows:

• Create static UI
• Consider the state of the component
• Consider how components interact

4. Controlled and uncontrolled components are as follows:

• Controlled components, the state of form elements is maintained by the user
• Uncontrolled components form elements state DOMitself Maintenance

5. When to create a component, the single responsibility principle is as follows:

• Each component only does one thing
• If the component becomes complex, it should be split into small components

6. The DRYprinciples of data state management are as follows:

• Don’t store the calculated state separately
• Stateless assembly possible, the required data propsacquisition

3. The essence of JSX is not a template engine, but syntactic sugar

1. Understanding JSXis not a template language, but a syntactic sugar

2. JSXIn Javascriptthe code written directly HTMLmark

3. JSX The essence of the syntactic sugar for dynamically creating components

4. In JSXusing the expression, as follows:

• JSX Is an expression itself
• Use expressions in attributes
• Extended attributes
• Expression as child element

5. JSX The advantages are as follows:

• Intuitiveness of the declarative creation interface
• Flexible code creation interface
• No need to learn a new template language

6. By convention, custom components start with a capital letter, as shown below:

• ReactI think lowercase tagnative DOMnode, such asdiv
• Custom components start with capital letters
• JSX Markers can use attribute syntax directly, for example <menu.Item />

Fourth, the life cycle of React components and their usage scenarios

1. react The life cycle is as follows:

• RenderStage, pure and no side effects, may be reactsuspended, suspend or restart
• Pre-commit Stage, you can read DOM
• CommitStages, can be used DOM, run side effects, schedule updates

2. constructor,As follows:

• Used to initialize the internal state, rarely used
• The only directly modify the stateplace

3. getDerivedStateFromProps,As follows:

• When staterequired from the propsuse initialization
• Try not to use it, maintaining the consistency of the two states will increase complexity
• Each renderwill call
• In typical scenarios, form controls get default values

4. componentDidMount,As follows:

• UI Called after rendering is complete
• Only execute once
• Typical scenario, obtaining external resources

5. componentWillUnmount,As follows:

• Called when the component is removed
• Typical scenario, resource release

6. getSnapshotBeforeUpdate,As follows:

• In the page renderbefore the call statehas been updated
• A typical scene, acquired renderbefore the DOMstate

6. componentDidUpdate,As follows:

• Each time UIis called when the update
• A typical scenario, the page need to propschange retrieve data

7. shouldComponentUpdate,As follows:

• Decide Virtual DOMwhether to redraw
• Generally it is made PureComponentautomatically
• Typical scenarios, performance optimization