react-hook的学习(常用的useState,useEffect,useRef,useMemo)

useState

返回一个 state，以及更新 state 的函数。

在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。
函数式更新
如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。下面的计数器组件示例展示了 setState 的两种用法：

import { useState, useEffect,useMemo,useRef } from 'react';
const [state, setState] = useState('初始值');
function Demo() {
  return (
    <div>
      <button onClick={(e) => setState("我的值改变了")}>
        click Me! {state}
      </button>
      <button onClick={(e) => setState("123")}>
        click Me! {state}
      </button>
    </div>
  );
}

总结:暂时没想好怎么写总结
使用技巧:暂时只意会

useEffect

监听第二个参数[]的state的变化,执行第一个参数
useEffect第二个参数为空数组的时候,相当于componentDidMount
useEffect在第一个参数(函数主体里return相当于componentWillUnmount)

import { useState, useEffect } from 'react';
import moment from 'moment';

const DateTime = () => {
    const [time, settime] = useState(moment(Date()).format('YYYY - MM - DD : HH:mm:ss'));
    let timer=0;
    useEffect(() => {
        timer=setInterval(() => {
            settime(moment(Date()).format('YYYY - MM - DD : HH:mm:ss'))
        }, 1000);
        return ()=>{
            clearInterval(timer)
        }
    }, []);
    return time
};

export default DateTime;

总结:

• 如果在第一个参数里存在定时器记得在return的时候清除掉,不清除掉会抱错

devScripts.js:5035 Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

• 函数名字首字母记得大写否则会报这个错

“useEffect” is called in function “dateTime” that is neither a React function component nor a custom React Hook

• useEffect监听变量的时候,初始值也会监听到,所以,做个判断,可以减少一次不必要的渲染

    useEffect(() => {
        if(state){
        	console.log(state,'state')
       	}
    }, [state])

• 监听多个变量的时候,任意一个变量发生变化都会执行

useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

一个常见的用例便是命令式地访问子组件：

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    // 使输入框获得焦点
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useRef还有一种用法就是可以避免拿不到最新的state

import React, { useEffect, useState, useRef } from "react";
function Demo(){
	const numRef = useRef();
	const [num, changeNum] = useState(1);
   function  submit(){
		console.log(`现在的数字是: ${numRef.current}`)
	}
	useEffect(() => {
	  numRef.current = num;
	}, [num]);
}

useMemo

大概就是使用最新的数据,返回新的Dom节点
使用的时候就像state一样使用 {变量名} 就可以了
好处:
可以避免不必要的重复渲染,也不怕拿不到最新的数据去渲染