This is the 22nd day of my participation in Gwen Challenge

1, useContext

1, use

const value = useContext(MyContext);
Copy the code

Note: useContext and createContext should be used together

2,

Receives a context object (the return value of React. CreateContext) and returns the current value of the context. The current context value is determined by the < MyContext.provider > value prop of the upper-layer component closest to the current component.

When the most recent

update is made to the component’s upper layer, the Hook triggers a rerender and uses the latest context value passed to MyContext Provider

3, for example,

const themes = { light: { foreground: "#000000", background: "#eeeeee" }, dark: { foreground: "#ffffff", background: "# 222222"}}; const ThemeContext = React.createContext(themes.light); function App() { return ( <ThemeContext.Provider value={themes.dark}> <Toolbar /> </ThemeContext.Provider> ); } function Toolbar(props) { return ( <div> <ThemedButton /> </div> ); } function ThemedButton() { const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.foreground }}> I am styled by theme context! </button> ); }Copy the code

2, useMemo

1, use

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Copy the code

UseMemo will recalculate memoized values only if a dependency changes. This optimization helps avoid costly calculations every time you render.

Remember that functions passed into useMemo are executed during rendering. Please do not perform non-rendering operations inside this function. Operations such as side effects are used by useEffect, not useMemo.

If the dependency array is not provided, useMemo evaluates the new value each time it renders

  • similarshouldComponentUpdateIn the rendering process to avoid the problem of duplicate rendering, when the state or properties from the parent component change, update the component

UseMemo uses Memoization, a caching technique in JavaScript, to improve performance

UseMemo is a function that takes two arguments. The first argument is a function and the second argument is an array

UseMemo (()=>{}, [default can not write])

UseMemo is executed at a different time than useEffect, which is executed after componentDidMount, while useMemo is executed during component rendering.

If the second argument is null, the callback does not execute 3. If the second argument is prop or state, the dependency changesCopy the code

3, for example,

import './App.css'; import React , { useState, useMemo, useEffect } from 'react' import { Button} from '@material-ui/core' function App() { let [count, setCount] = useState(0) let [num, setNum] = useState(0) useEffect(() => { console.log('useEffect') }) let res = useMemo(() => { console.log('useMemo') return {count, num} },[count, Num]) return (<> <h2> parent component status =count{res.count}----num{res.num}</h2> <Button variant="contained" color="primary" onClick={()=> { setCount(count +1) }} >chang-count</Button> <Button variant="contained" color="primary" onClick={()=> { setNum(num +1) }} >chang-num</Button> </> ); } export default App;Copy the code

3, useCallback

1, use

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
Copy the code

Returns a Memoized callback function.

2,

Passing the inline callback function and the array of dependencies as arguments to useCallback returns the Memoized version of the callback function, which is updated only when a dependency changes. This is useful when you pass callback data to child components that are optimized and use reference equality to avoid unnecessary rendering (such as shouldComponentUpdate).

UseCallback (fn, deps) is equivalent to useMemo(() => FN, deps).

3,

Avoid repetitive component rendering, improve performance, and control when components need to be updated

4, different

It also uses caching technology. Unlike useMemo, useMemo caches values. UseCallback caches functions, which can be executed if they are a function

UseCallback () takes two arguments. The first argument is a function and the second argument is an array

UseCallback (()=>{}, [can not write])Copy the code

Note:

const callback = useCallback(()=>{}, [])
Copy the code

Callback is a function that can be run directly as callback()

2. If the second argument is an empty array, the default is only executed on the first component rendering. If the second argument is state, the default listens for the state changeCopy the code

5, for example,

import './App.css'; import React , { useState, useEffect, useCallback } from 'react' import { Button} from '@material-ui/core' function App() { let [count, setCount] = useState(0) useEffect(() => { console.log('useEffect') },) let callback = useCallback(() => { console.log('usecallBack', <> <h2> Parent component status =count{count}</h2> <h2>callback=:{callback()}</h2> <Button variant="contained" color="primary" onClick={()=> { setCount(count +1) }} >chang-count</Button> </> ); } export default App;Copy the code