useCallback()和useMemo()

import React, { useState, useMemo } from 'react'

export default function UseMemo() {
  const [value, setvalue] = useState(0)
  const [count, setcount] = useState(1)
  const take = (count) => {
    console.log(1)
    return count * 3
  }
  const price = take(count)

  return (
    <div>
      <p>value:{value}   count:{price}</p>
      <button onClick={() => setvalue(value + 1)}>value+1</button>
    </div>
  )
}

import React, { useState, useMemo } from 'react'

export default function UseMemo() {
  const [value, setvalue] = useState(0)
  const [count, setcount] = useState(1)
  const take = (count) => {
    console.log(1)
    return count * 3
  }
  const price = useMemo(() => {
    return take(count)
  }, [])
  return (
    <div>
      <p>value:{value}   count:{price}</p>
      <button onClick={() => setvalue(value + 1)}>value+1</button>
    </div>
  )
}

import logo from './logo.svg';
import { useState, useCallback } from 'react';
import './App.css';
// import UseMemo from './hooks/03-useMemo'
import UseCallback from './hooks/04-useCallback';


function App() {
  const [score, setscore] = useState(0)
  const [money, setmoney] = useState(1)
  // const showScore = useCallback(() => {
  //   console.log(money)
  //   console.log(score)
  // }, [money])

  const showScore = () => {
    console.log(money)
    console.log(score)
  }


  return (
    <div className="App">

      <UseCallback test={test} setscore={setscore} score={score} money={money} showScore={showScore} setmoney={setmoney} />
    </div>
  );
}

export default App;

import { setSelectionRange } from '@testing-library/user-event/dist/utils'
import React, { useCallback, useState } from 'react'

export default function UseCallback({ test, setscore, score, money, setmoney, showScore }) {
  return (
    <div>
      <p>{money},{score}</p>
      <button onClick={() => {
        // setmoney(money + 2)
        setTimeout(() => {
          setscore(score + 1)
          // test()
          showScore()
        }, 1000);
      }}>按</button>
    </div>
  )
}

import logo from './logo.svg';
import { useState, useCallback } from 'react';
import './App.css';
// import UseMemo from './hooks/03-useMemo'
import UseCallback from './hooks/04-useCallback';


function App() {
  const [score, setscore] = useState(0)
  const [money, setmoney] = useState(1)
  const showScore = useCallback(() => {
    console.log(money)
    console.log(score)
  }, [money])

  // const showScore = () => {
  //   console.log(money)
  //   console.log(score)
  // }


  return (
    <div className="App">

      <UseCallback setscore={setscore} score={score} money={money} showScore={showScore} setmoney={setmoney} />
    </div>
  );
}

export default App;

import { setSelectionRange } from '@testing-library/user-event/dist/utils'
import React, { useCallback, useState } from 'react'

export default function UseCallback({ setscore, score, money, setmoney, showScore }) {
  return (
    <div>
      <p>{money},{score}</p>
      <button onClick={() => {
        // setmoney(money + 2)
        setTimeout(() => {
          setscore(score + 1)
          // test()
          showScore()
        }, 1000);
      }}>按</button>
    </div>
  )
}