useState初始化和useMemo的使用

初始化一：

cosnt [state,setState]=useState(值) //返回一个state，以及更新state的函数

初始化二：

setState( preValue => {
    preValue //上一次的值
    return 值
}) //返回一个state，以及更新state的函数

useMemo接受两个参数，分别是函数和一个数组(实际上是依赖)，函数里return函数，数组内存放依赖

举个例子：

import React,{ useMemo, useState } from 'react';
import { Button } from 'antd';

function Memo(){
    const [count,setCount] = useState(0);
    
    //useMemo依赖为空 只在首次渲染时执行一次(未写useMemo时页面走一次fn执行浪费性能)
    //第一次 fn=49995000
    //第二次执行时 拿出缓存的值 49995000给fn 不会再重复执行
    const fn = useMemo(() => {
        console.log('执行了');
        let num = 0;
        for(let i = 0; i < 10000; i++) {
            num += i;
        }
        return num;
},[]);

//  const fn1 = () => {
//    console.log('fn1执行了');
//    let sum = 0;
//    for(let i = 0; i < 10000; i++) {
//      sum += i;
//    }
//    return sum;
//  };

const onClick = () => {
    setCount(count + 1);
};
return (
    <div>
      {/* <h1>sum:{fn1()}</h1>*/}
      <h1>num:{fn}</h1>
      <Button onClick={onClick}>点击</Button>
    </div>
   );
 }
 
 export default Memo;
    

没有useMemo时点击按钮 执行一次fn1就跟着执行一次 特别浪费性能

还有一个方法

const [x,setX] = useState(10000);
const fn = useMemo(()=> {
    console.log('执行了');
    let num = 0;
    for(let i = 0; i < x; i++) {
        num += i;
    }
    return num;
}, [x]);

const onClick2 = () => {
    setX(x + 1);
};

return (
    <div>
        <h1>num:{fn}</h1>
        <h1>count:{x}</h1>
        <Button onClick={onClick2}>点击X</Button>
    </div>
 );

再次点击时useMemo监听x有变化就再次执行