A:
React Hooks are new to React 16.8. You can use state and other React features without writing a class. React component sharing and component lifecycle management are complex and confusing. React function components will not be stateless.
Two: basic ****Hook
Before hooks, only class components had their state data, while function components were stateless components that were commonly used as UI components. Hook functions have the React state and lifecycle management capabilities.
1: useState()
The useState function enables functional components to have state methods that preserve their own
As shown above
The useState function takes only one argument, the initial value of initData, which can be a null, a Boolean, a number, a string, an Object, or even a function…
2: useEffect()
React Hook Allows you to use state and other React functions without writing classes.
Before you get to know this Hook, you can know the Side Effect.
A side effect is when the behavior of a function or expression depends on the external world
As defined on the Wiki, side effects are:
A: A function or expression modifies its state outside its scope
B: A function or expression has obvious interactions with the outside world or the function it calls in addition to its return statement
In the React function body, DOM manipulation, data fetch (AXjx), and subscription mode Settings are all side effects. However, it is not recommended to write these side effects directly in the React function body. Side effect code is written in the life cycle function componentDidMount and componentDidUpdate, and in the function component, useEffect Hook to solve this problem.
There are two common side effects in the React component:
What doesn’t need cleaning and what needs cleaning
Combining with the below
In a nutshell,
The second parameter, useEffect, is used to control when the useEffect hook is executed. By default, the useEffect hook is executed every time the page is rendered. An empty array is only executed when the page is first rendered, and is destroyed when it leaves the component. See the website for more details
3:useContext()
Context provides a way to share props between components without explicitly passing props layer by layer through the component tree, somewhat similar to Project/Inject in VUE
The usage is as follows
The parent component
import React, { createContext } from "react"import Son from "./Son"//! 1, creating context and export export const ParentContext = createContext () ParentContext. DisplayName = "ParentContext" const Parent () = = > { Return <div style={{width:"300px",height:"300px",background:"#4d97cc",margin:"200px"}} > parent { / /! Use the < parentContext. Provider> tag to wrap the child component that needs to use the data in the parent component. Provider value={{params}} > <Son/> </ parentContext. Provider> </div>}export default ParentCopy the code
Child components
import React, { useContext } from "react"//! Import {ParentContext} from "./Parent"const Son = ()=>{//! ParentContext const {params} = useContext(ParentContext) return <div Style ={{width:"150px",height:"150px",background:"# be44A4 "}} > <p> <p>{params}</p> </p> </div>}export default SonCopy the code
The page display
