React Basics

The basic use

React events and Dom events

1Event is a SyntheticEvent, which simulates all the capabilities of Dom events2NativeEvent is a nativeEvent object3, all events are mounted todocumenton4And are not the same as Dom events and are not the same as Vue eventsCopy the code

Note that React 16 is bound to document and React 17 is bound to the root component

Multiple React versions coexist. Like the micro front end

The form

Controlled component: Implements the V-Model, with state controlling the value of the form

Components use

Props Pass data Props Pass function Type checkCopy the code

setState

1. Immutable values: State cannot be manipulated directly

2. It may be asynchronous updates

1When used asynchronously, you can use the second parameter of setState, the callback function2,setTimeoutSetState is synchronized insetTimeout(() = > {
    this.setState({
        count: this.state.count + 1
    })
    console.log(this.state.count)
}, 0)
3Custom DOM events are synchronizeddocument.body.addEventListener('click'.() = > {
    this.setState({
        count: this.state.count + 1
    })
    console.log(this.state.count)
})
Copy the code

3. It may be merged

1, incoming objects are merged, and the result is executed only once +1(similar toObjectThe assign)this.setState({
    count: this.state.count + 1
})
this.setState({
    count: this.state.count + 1
})
this.setState({
    count: this.state.count + 1
})
2, pass function, will not be merged, execute result +3
this.setState((pervState, props) = > {
    return {
        count: prevState.count + 1}})this.setState((pervState, props) = > {
    return {
        count: prevState.count + 1}})this.setState((pervState, props) = > {
    return {
        count: prevState.count + 1}})Copy the code

Component life cycle

1. Mount

constructor
componentWillMount
componentDidMount
Copy the code

2. Update

shouldCompontntUpdate
componentDidUpdate
Copy the code

3. During uninstallation

componentWillUnmount
componentDidUnmount
Copy the code

Advanced features

Function component

1, pure function, input props, output JSX2, no instance, no life cycle, no state3, cannot extend other methodsCopy the code

Uncontrolled component

Only default values are assigned, and the final value is obtained by ref when used

Ref defaultValue defaultChecked Manually manipulates the DOM elementCopy the code

Usage scenarios

1, DOM must be manually operated, setState cannot be implemented2File upload3Some rich text editors need to pass in DOM elementsCopy the code

Selection of controlled and uncontrolled components

1Controlled components are preferred, in line with React design principles (data-driven view)2, and then use uncontrolled components when you must manipulate the DOMCopy the code

Portals

Components are rendered in a hierarchy by default, Portals that allow a component to render outside of its parent

ReactDom.createPortal(<></>.document.body/ * * / (DOM node))
Copy the code

Usage scenarios

Overflow: Hidden Z-index value of parent component is too small fixed position needs to put single body layer 1Copy the code

context

React.createContext().Provider
React.createContext().Consumer
Copy the code

Asynchronous components

import()
React.lazy
React.Suspense
Copy the code

const demo = React.lazy(() = > import('XXX'))
<React.Suspense fallback={<div>loading...</div>} ><demo />
</React.Suspense>
Copy the code

Performance optimization

1ShouldComponentUpdate: Use state before and after to control whether to render React shouldComponentUpdate by defaulttrueShouldComponentUpdate must match immutable value, otherwise there will be problems when optimizing rendering through beforeand after comparison. According to specific needs, shouldComponentUpdate can be used to optimize rendering2, PureComponent, and React.memo are optimized by shallow SCU comparisons3, immutable value immutable. Js Based on shared data (not deep copy), good speed, certain learning and migration costs, use on demandCopy the code

High-level component HOC

Reduc Connect is a higher-order component that passes in a component and gets a new component

Render Props

Pass the state of the class component as props to the pure function component through a function

HOC vs Render Props

HOC mode is simple, but adds layers of components

The Render Props code is concise

Redux

Store State Action Reducer Individual data flows1Dispatch (Action)2, the reducer - > newState because3Subscribe trigger notificationCopy the code

react-redux

<Provider>connect Asynchronous action redux-thunk redux-Promise redux-saga middlewareCopy the code