userMemo

import React, { useState, useMemo } from 'react'export default function LearnFunction08() {const [num1] = useState(0);const [num2, setNum2] = useState(0);const [num3, setNum3] = useState(0);const number = useMemo(() => {console.log('调用了吗');return num1 + num2;}, [num1, num2])  //这个后面定义的是依赖,只有num1和num2发生改变时,这个才会调用,函数组件是只要数据发生改变整个函数都会重新调用,但是使用useMemo后是不会进行调用的// 类似于vue中的计算属性return (<div>{num1}<br /><button onClick={() => {setNum2(num2 + 1);}}>+</button><br /><div>num1 +num2 ={number}</div><button onClick={() => {setNum3(num3 + 1);}}>+</button>{num3}</div>)
}

const number = useMemo(() => {

    console.log('调用了吗');

    return num1 + num2;

  }, [num1, num2])

这个后面定义的是依赖,只有num1和num2发生改变时,这个才会调用,函数组件是只要数据发生改变整个函数都会重新调用,但是使用useMemo后是不会进行调用的.

类似于vue中的计算属性.

useContext

index.js中的代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from './context/index';
import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));
const data = {name: 'John Doe',age: 30,hobbies: ['reading', 'painting', 'traveling']
}
root.render(<React.StrictMode><Provider value={data}><App /></Provider></React.StrictMode>
);
reportWebVitals();

context.js中的代码

import { createContext } from "react";
const Context = createContext();// Context有两个属性
//    1. Provider 数据提供者
//    2. Consumer 数据使用者const { Provider, Consumer } = Context;
export {Context,Provider,Consumer
}

相比于类组件中,这个直接导出Context.

09中使用useContext的hook来获取index.js中传过来的参数

import React, { useContext } from 'react'
import { Context } from './context/index'
export default function LearnFunction09() {console.log(useContext(Context));// 直接传入Context的值即可// 这样就可拿到传过来的值,此时09是数据使用者return (<div>LearnFunction09</div>)
}