Hooks used

1. UseContext: value transfer at component level (between parent and child components)

The difference between story

Redux is the unified management state. UseContext is the data that components share and the components that wrap around it can use this value directly

use

Import {createContext,useContext} from 'react' const TestContext = createContext({}) => { const { name } = useContext(TestContext) return ( <div>{name}</div> ) } const M2 = () => { const { name } = useContext(TestContext) return ( <div>{name}</div> ) } const Detail = () => { return ( <div> <TestContext.Provider Value ={{name:' Tom '}} > <M1/> <M1/> </ testContext.provider > </div>)} export default withRouter(Detail) // ExportCopy the code

2.useReducer

Const [latest state,dispatch] = useReducer(()=>{}, initial state)

eg:

function ReducerDemo(){ const [count, dispatch] = useReducer((state,action) => { switch(action){ case 'add': return state+1; case 'sub': return state-1; default: return state; }}, 0) return (< div > < h2 > the latest numerical {count} < / h2 > < button onClick = {() = > dispatch (' add ')} > add < / button > < button OnClick = {() = > dispatch (' sub ')} > minus < / button > < / div >)}Copy the code

UseCallback (cache optimization of functions to cache a function)

Each time the state of the parent component changes, the child component has to be reloaded from beginning to end. At this time, if the child component has a function in it, the function has to be re-created again. This will generate new address references and occupy space memory

Description:

The useCallback simply caches a function to avoid function re-creation

Usage: useCallback(fn(),[dependent attribute value]) the second argument can be null to indicate that it is created once and will not be recreated

Example 1:

// Define a child component
const Child = (props) = > {

 const submit = useCallback(
 () = > {
   console.log('A function recreated by executing the function')
 },[age]
)
 
 return (
  <div onClick={submit}>Subcomponents {props. The name}</div>)}// Define a parent component
const Parent = () = > {

 const [name,setName] = useState(' ')
 const [age,setAge] = useState()
 
 const handleChange = () = > {
   setName('kk');
 }
 
 return (
 <Button onClick={handleChange}>Change the name</Button>
 <Child age={age} name={name}/>If the parent component clicks on the value of name, all components must be reloaded, including the child component. The name attribute passed to the child component has been changed, but the age attribute is not changed, so the child component's submit function will not be recreatedCopy the code

Example 2:

// Define a child component
const Parent = React.memo(({a,c}) = > {

console.log('Render parent component')
 return (
  <div onClick={c}>Subcomponents {props. The name}</div>)})// Define a parent component
const APP = () = > {

 const [a,setA] = useState(0)
 const [b,setB] = useState(1)
 
const handleClick = () = > { console.log('Recreated function')}// Non-optimized functions are recreated each time
// Optimized function const handleClick = useCallback(() => console.log(' recreated function '),[])
 return (
 <>
  <Parent a={a} c={handleClick}/>
  <Button onClick={()= >SetA (a+1)}> changes a</Button>
  <Button onClick={()= >SetB (b+1)}> changes b</Button>
  <Button onClick={handleClick}>Click on the event</Button>
 </>)}Copy the code

The result of this example’s React.memo optimization is that the Parent component will only reload the function created by the APP component if either property a or c changes. If it is a normally created function, the function will be recreated every time the state changes The value of c passed to the Parent will change and the Parent component will be rendered again so the optimization will use useCallback which is created once no matter what happens to the state of the current component so as long as the a passed to the Parent doesn’t change, okay The child component Parent will not be re-rendered