React introduces hooks. The new React version fully supports functional programming, including hooks, which help react developers get rid of cumbersome class declarations and logical calls to lifecycle hook functions. Learn about react from the hooks functions that hooks use in the following sections.

React useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext useContext

1. React creates the context

const TestContext = React.createContext()

function Parent() {
    return <TestContext.Provider value={'test context'} ></TestContext.Provider>
}
Copy the code

The testContext. Provider props must be value; otherwise, an error is reported

function Child() {
    return <TestContext.Consumer>value => <div>I am {value}}</div></TestContext.Consumer>
}

function App() {
    return <Parent>
        <Child />
    </Parent>
}
Copy the code

2. UseContext creates the context

const TestContext = React.createContext() 

function Parent() {
    return <TestContext.Provider value={'test context'} ></TestContext.Provider>
}

function Child() {
    const value = useContext(TestContext)
    return <div>I am {value}</div>
}
Copy the code

With the latest useContext, you simply pass in the created context object as an input and get the value passed by the provider, eliminating the need to create and define a consumer.

3. Multiple layers of context nesting

The following is a nested context, normally written like this:

function Child() {
    return <TestContext.Consumer>
        user => {
            <div>{user.age}</div>
            {
                user.name ? <TestContext.Consumer>name => <div>{name}</div></TestContext.Consumer> : null
            }
            
        }
    </TestContext.Consumer>
}
Copy the code

Using useContext

function Child() {
    const user = useContext(UserContext)
    const name = useContext(NameContext)
    
    return <div>
        {user.age}
        {
            user.name ? <div>{name}</div> : null
        }
    </div>
}
Copy the code

The above is how to use useContext and the basic precautions, any shortcomings welcome to point out.