重温react-11(userMemo和useContext的使用方式)

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