1. Uncontrolled components

ref

defaultValue defaultChecked

Manipulating DOM elements manually

2, Portals,

Hacks like CSS solve compatibility techniques

Usage Scenario of Portals

Overflow: hidden

The z-index value of the parent component is too small

Fixed needs to be placed in the first level of body

Method of use

// Parent component invokes <PortalsDemo>Modal content </PortalsDemo> // child component contentrender() {// // render normally //return <div className="modal"> // {this.props. Children} {/* vue slot */} // </div> // Use Portals to render on the body. // The fixed element should be placed on the body for better browser compatibility.return ReactDOM.createPortal(
            <div className="modal">{this.props. Children}</div>, document.body // DOM node)}Copy the code

Results the following

3, the Context

How is common information (language, topic) passed to each component?

Too cumbersome to use props

Make a mountain out of a molehill with redux

Three: produce -> modify -> consume

1, the application of context in three parts: produce -> modify -> consumption

Create a Context and fill in the default value (any JS variable).

// create const ThemeContext = react.createcontext ('light') // Light variable constructor(props) {super(props) this.state = {theme:'light'}}Copy the code

Putting light in the context of the parent component can be used by other descendant components

render() {
    return <ThemeContext.Provider value={this.state.theme}>
        <Toolbar />
        <hr/>
        <button onClick={this.changeTheme}>change theme</button>
    </ThemeContext.Provider>
}
Copy the code

2. How to consume this

Class component usage

**[componentname.contextType]** Specifies the corresponding context

Themedbutton. contextType = ThemeContext // Specifies contextType to read the current theme context.Copy the code

You can also use ES6 syntax to specify static properties within a component.

 static contextType = ThemeContext
Copy the code

use

Const theme = this.context // React finds the nearest theme Provider up and uses its value.Copy the code

How are function components consumed

// Underlying component - functions are componentsfunctionThemeLink (props) {// const theme = this.context // An error is reported. The functional component has no instance, that is, no this // functional component can use Consumerreturn <ThemeContext.Consumer>
        { value => <p>link's theme is {value}
 } Copy the code

Use of HOOKS functions for functional components

UseState: Applies state to function components

UseEffect: Applies periodic functions to function components

UseRef: Manipulating DOM connection addresses in function components blog.csdn.net/weixin_4167…

3. Function component application context

Connection address

Blog.csdn.net/weixin_4167…

4. Asynchronous components

import()

React.lazy

React.Suspense

const ContextDemo = React.lazy(() => import('./ContextDemo'))

class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return<div> <p> Introduces a dynamic component </p> <hr /> < react.suspense fallback={<div>Loading... </div>}> <ContextDemo/> </React.Suspense> </div> // 1. // 2. See network js loading}}Copy the code

5. Performance optimization

1. Performance optimization is more important in React than in VUE

ShouldComponentUpdata (SCU)

ShouldComponentUpdata is optional and returns true by default, as in React: the parent component is updated and the child component is updated unconditionally

The SCU must cooperate with immutable values

React why create an optional and customizable life cycle, why not just encapsulate it

class Footer extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return <p>
            {this.props.text}
            {this.props.length}
        </p>
    }
    componentDidUpdate() {
        console.log('footer did update')
    }
    shouldComponentUpdate(nextProps, nextState) {
        if(nextProps.text ! == this.props.text || nextProps.length ! == this.props.length) {return true// Can render}return false} // React default: the parent component is updated and the child component is updated unconditionally!! // Performance tuning is more important for React! // Does the SCU have to be used every time? -- optimize only when needed}Copy the code

Parent component call

render() {
        return <div>
            <Input submitTitle={this.onSubmitTitle}/>
            <List list={this.state.list}/>
            <Footer text={this.state.footerInfo} length={this.state.list.length}/>
        </div>
    }
Copy the code
The SCU compares the new state with the old state and returns the valuetrueandfalseThe default return is true, that is, if the default is not equal, and if all are re-rendered the samefalse, don't apply colours to a drawingCopy the code

PureComponent and React.Memo

PureComponent is used in class components

React.memo is used in function components

PureComponent, shallow comparisons implemented in the SCU

If not, return true and re-render

Also used with immutable values

Shallow comparison has been used in most cases, try not to do depth comparison, depth comparison, one-time recursion to the end, the performance is not good

Depth comparison

import _ from 'lodash'Class List extends React.Com {constructor(props) {super(props)}render() {
        const { list } = this.props

        return <ul>{list.map((item, index) => {
            return<li key={item.id}> <span>{item.title}</span> </li>})}</ul>} // add shouldComponentUpdate ShouldComponentUpdate (nextProps, nextState) {// _. IsEqual () {// _.if(_. Isprops (nextProps. List, this.props. List))return false
        }
        return true// render}}Copy the code

The parent component

    render() {
        return<div> <Input submitTitle={this.onSubmitTitle}/> <List list={this.state.list}/> </div> } onSubmitTitle = (title) => { // SetState ({list: this.state.list.concat({id: 'id-${Date.now()}', title})}) // // Error: // this.state.list.push({// id: 'id-${Date.now()}`,
        //     title
        // })
        // this.setState({
        //     list: this.state.list
        // })
    }
Copy the code

3. Immutable values immutable. Js

6. Advanced component HOC

7, Render Props