0. The arrow function binds this

//src/index.js
// 1. Import modules
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    / / method
    handelClick() {
        console.log(this);
    }
    // Method 2 (recommended)
    // handelClick = () => {
    // console.log(this);
    // }
    render() {
        // Method 1: wrap a layer of arrow functions (not recommended)
        return (<button onClick={()= >Enclosing handelClick ()} > button</button>)
        // Method two: class instance arrow function way (recommended)
        Return ()
        // Call this with bind.
        Return ()}}//3. Mount the created class component to the DOM
ReactDOM.render(<App />.document.getElementById('root'))
Copy the code

1. Call apply bind

  • The function is to operate on different objects
  • Apply needs to wrap parameters in arrays
  • Bind returns a new function that needs to be called itself
<script>
        let obj = {
            name: 'components'.say(value, value2) {
                console.log(this.name, value, value2); }}let newName = { name: 'Killer pill' }
        // call()
        obj.say.call(newName, Super Handsome der)// Sesshomaru is undefined
        // apply()
        obj.say.apply(newName, [Super Handsome der])// Sesshomaru is undefined
        // bind()
        obj.say.bind(newName, Super Handsome der) ('Only bind shows value2')Der only bind can display value2
    </script>
Copy the code

2. Controlled form implementation

  1. Statement of the state
  2. Bind the value in state to the form
  3. Listen for form values to change and update to state
//src/index.js
// 1. Import modules
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    The state / / statement
    state = {
        isValue: '', ispwd: ''}// 2. Listen for the trigger event and get the input event
    handelChange = (e) => {
        The name / / structure
        const { name } = e.target
        console.log(e);
        // The name obtained is updated to the declared state
        this.setState({
            [name]: e.target.value
        })
    }
    // Click the button
    handelClick = (e) => {
        console.log(e)
    }
    render() {
        return (
            <div>
                {3. Receive the updated state assignment to value*/ in the input} <div> account name: <input onChange={this.handelChange} value={this.state.isValue}
                        type='text'
                        name='isValue'/> </div> <div>this.handelChange} value={this.state.isPwd}
                        type='pwd'
                        name='ispwd'
                    />
                </div>
            </div>)
    }
}

//3. Mount the created class component to the DOM
ReactDOM.render(<App />, document.getElementById('root'))
Copy the code

3. Uncontrolled form implementation

  1. Creating a Ref reference
  2. Bind Ref references to form elements
  3. Retrieve specific form elements and values by reference
  4. DefaultValue specifies the defaultValue
//src/index.js
// 1. Import modules
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    // 1. Create Ref reference
    constructor() {
        super()
        // Create a reference named a Ref end
        // react.createref () is a factory design pattern
        this.usernameRef = React.createRef()
        this.pwdRef = React.createRef()
    }
    // 3. Get the specific form element and value by reference
    handelClick = () => {
        console.log(this.usernameRef.current.value, this.pwdRef.current.value);
    }
    / / setting state
    state = { username: 'components' }
    render() {
        return (
            <div>
                {/* 2. Bind Ref to the form element */}
                {/* 4. DefaultValue the defaultValue */} <div> Account name: <input defaultValue={this.state.username} type='text' ref={thisUsernameRef} /> </div> <div> Password: <input type='pwd' ref={this.pwdRef} />
                </div>
                <button onClick={this.handelclick}> button </button> </div>)}}//3. Mount the created class component to the DOM
ReactDOM.render(<App />, document.getElementById('root'))
Copy the code

4. Form summary

  1. The controlled form mode is recommended for form value processing because it is easier to fetch values
  2. Uncontrolled forms are used when you need to manipulate the DOM, such as video Canvas or animation waiting
  3. The final fetched values of a controlled form can be fetched directly from state, while the uncontrolled fetched values need to be fetched by reference

5. Component value transfer from parent to child

This.props receives a value passed by the parent component

//src/index.js
// 1. Import modules
import React, { Component } from 'react'
import ReactDOM from 'react-dom'


class Father extends Component {
    state = {
        num: 18
    }
    render() {
        return (
            <div style={{ background: 'red' }}>I'm the parent component<Son num={this.state.num} />{/* Import child component */}</div>)}}class Son extends Component {
    render() {
        return (
            // Accept via this.props
            <div style={{ background: 'pink', margin: 10}} >I am the child, and the value passed from the parent is {this.props. Num}</div>)}}//3. Mount the created class component to the DOM
ReactDOM.render(<Father />.document.getElementById('root'))
Copy the code

6. Set up the value transmission child to the parent

  1. The parent component defines a method
  2. Parent components pass methods to child components by component passing values where they are used
  3. The child component calls the method passed by the parent and passes the argument to the method
  4. The parent component method updates data from the child component to state with parameters
//src/index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Father extends Component {
    state = {
        num: ' '
    }
    // 4. Listen for child component events
    // We need to use the arrow function to change this to point to, otherwise to point to the caller -- the child component
    receiveNum = (props) = > {
        console.log(props);
        // 5. Save the values of the child components
        this.setState({
            num: props
        })
    }
    render() {
        return (
            <div style={{ background: 'red' }}>I am the parent, and the value passed from the child is :{this.state.num} {/* 3. Listen for events passed by child components */}<Son onReceive={this.receiveNum} />
            </div>)}}class Son extends Component {
    state = {
        num: 18
    }
    // 2. Pass to the parent component
    handelClick = () = > {
        this.props.onReceive(this.state.num)
    }
    render() {
        return (
            <div style={{ background: 'pink', margin: 10}} >I am a child component {/* 1. Trigger child to parent event */}<button onClick={this.handelClick}>button</button>
            </div>
        )
    }
}

ReactDOM.render(<Father />.document.getElementById('root'))
Copy the code

7. Brothers pass values

Son to father, father to son

//src/index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Father extends Component {
    state = {
        num: ' '
    }
    // 4. Listen for child component events
    // We need to use the arrow function to change this to point to, otherwise to point to the caller -- the child component
    receiveNum = (props) = > {
        console.log(props);
        // 5. Save the values of the child components
        this.setState({
            num: props
        })
    }
    render() {
        return (
            <div style={{ background: 'red' }}>I am the parent, and the value passed from the child is :{this.state.num} {/* 3. Listen for events passed by child components */} {/* First child component */}<Son onReceive={this.receiveNum} />{/* second child */} {/* 6. Pass to the second child to form a sibling */}<Sony num={this.state.num} />
            </div>)}}class Son extends Component {
    state = {
        num: 18
    }
    // 2. Pass to the parent component
    handelClick = () = > {
        this.props.onReceive(this.state.num)
    }
    render() {
        return (
            <div style={{ background: 'pink', margin: 10}} >I am a child component {/* 1. Trigger child to parent event */}<button onClick={this.handelClick}>button</button>
            </div>)}}class Sony extends Component {
    render() {
        return (
            <div style={{ background: 'yellow', margin: 10}} >} I am the second child of this component, and I am going to receive {this.props. Num}</div>
        )
    }
}

ReactDOM.render(<Father />.document.getElementById('root'))
Copy the code

8.Context passes values across component hierarchies

  1. Create the Provider and Consumer components
  2. Use Procider to pass values
  3. Use Consumer to receive cross-component values
import React from 'react';
import ReactDOM from 'react-dom';

// Introduce styles
import './index.css';

Create the Provider and Consumer components
const { Provider, Consumer } = React.createContext()

class App extends React.Component {
    state = {
        txt: 'Family heirloom'
    }
    render() {
        return (
            // 2. Use Procider to pass values
            <Provider value={this.state.txt}>
                <div className="app container">
                    <Node />
                </div>
            </Provider>)}}const Node = props= > {
    return (
        <div className="node">
            <SubNode />
        </div>)}const SubNode = props= > {
    return (
        <div className="subnode">
            <Child />
        </div>)}const Child = props= > {
    return (
        <div className="child">{/* 3. Use Consumer to receive cross-component values */} I am a great-grandson node --<Consumer>
                {(data) => {
                    return data
                }}
            </Consumer>

        </div>
    )
}



ReactDOM.render(<App />.document.getElementById('root'));

Copy the code

The style reference

/* index.css */
.container {
    text-align: center;
    margin: 0 auto;
}


.btn {
    width: 200px;
    height: 100px;
    border-radius: 50px;
    background-color: aquamarine;
}

span {
    margin: 10px;
}



.app {
    width: 300px;
    padding: 10px;
    border: 1px solid # 999;
}

.user {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.content {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.no-comment {
    text-align: center;
    margin-top: 30px;
}


.app {
    height: 100px;
    padding: 10px;
    background-color: #c4d0dc;
}

.node {
    height: 80px;
    padding: 10px;
    background-color: yellowgreen;
}

.subnode {
    height: 60px;
    padding: 10px;
    background-color: #dcdc39;
}

.child {
    height: 40px;
    padding: 10px;
    background-color: skyblue;
}
Copy the code

9. The children of props

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// Import images
import img from './image/5.jpg'
// Method 1: function
// class App extends Component {
// render() {
// return (
// 
      

// {this.props.children()}
// 
/ /)
/ /}
// }
/ / method 2
class App extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>)}}/ / method
// ReactDOM.render(<App>{() => {
// return 
// }}</App>, document.getElementById('root'));

/ / method 2
ReactDOM.render(<App><img src={img} />
</App>.document.getElementById('root'));
Copy the code

The effect