【React series 】React basics

React always refreshes the page as a whole

React 4 core principles:

1. A new concept: components
2. Four core apis
3. Unidirectional data flow
4. Perfect error prompt

React component types:

1. The controlled components

Form element state is maintained by the consumer

<input 
    type="text"
    value={ this.state.value }
    onChange={evt= > {
      this.setState({ value: evt.target.value })
    }}
/>
Copy the code

2. Uncontrolled component

The DOM maintains the form element state itself

<input 
    type="text"
    ref={ node= > { this.input = node } }
/>
Copy the code

• Follow the single responsibility rule when creating components
• Data state management follows the DRY Principle (Don’t repeat Yourself)

1. States that can be computed should not be stored separately
2. The components are as stateless as possible. The data required is obtained from props

JSX

The essence of the JSX

The essence of JSX is syntactic sugar for dynamically creating components

How do I use JSX

1. JSX is itself an expression

const element = <h1>hello, world!</h1>;
Copy the code

2. Use expressions in attributes

<MyComponent foo={ 1+2+3+4} / >Copy the code

3. Extended attributes

const props = { firstName: "ben".lastName: "Hector" };
const greating = <Greating { . props} / >
Copy the code

4. Expression as a child element

const element = <li>{ props.message }</li>
Copy the code

Convention: Custom components start with a capital letter

1. React considers lowercase tags to be native DOM nodes, such as
   .
2. A custom component starts with an uppercase letter
3. JSX tags can use attribute syntax directly, which can start without a capital letter, such as < menu.item />

React lifecycle and usage scenarios

constructor

1. Used to initialize internal state
2. The only place you can change state directly

getDerivedStateFromProps

1. Used when state needs to be initialized from props
2. Try not to use: maintaining consistency between the two states adds complexity
3. Render is called every time
4. Typical scenario: Form controls get default values

componentDidMount

1. Called after UI rendering is complete
2. Execute only once
3. Typical scenario: Obtaining external resources

componentWillUnmount

1. Called when a component is removed
2. Typical scenario: Resources are released

getSnapshotBeforeUpdate

1. Called before the render page, state is updated
2. Typical scenario: Get the DOM state before render

componentDidUpdate

1. Called every time the UI is updated
2. Typical scenario: The page needs to obtain data again based on the props changes

shouldComponentUpdate

1. Determine if the Virtual DOM needs to be redrawn
2. This is typically implemented automatically by PureComponent
3. Typical scenario: Performance optimization

Virtual DOM

1. Breadth first hierarchical comparison, diff algorithm complexity is O(n)

Start with the root node

• If the order of the nodes changes, rearrange the nodes by key
• If the node type changes, replace the entire node
• If a node moves across layers, the original node is deleted and a new node is created

2. Two assumptions about the virtual DOM
3. The DOM structure of a component is relatively stable
4. Sibling nodes of the same type can be uniquely identified, which is mainly used to change the position or order between nodes. Each child element of the same type needs to be uniquely identified with a key, otherwise it will increase overhead

Design patterns for components

Two forms of component reuse: higher-order components and functions as sub-components. Both forms are design patterns, but achieve component reuse in more scenarios

High order component

Higher-order components take an existing component as an argument and return the new component. Typically, higher-level components do not have their own UI presentation, but simply provide additional functionality or data for encapsulated components.

Function as a child component

class MyComponent extends React.Component {
	render() {
    	return (
        	<div>{this.props.children('Minmin')}</div>
        )
    }
}

<MyComponent>
	{(name) = > (
    	<div>{name}</div>
    )}
</MyComponent>
Copy the code