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>
)
}