react 函数 - useState , useEffect, useCallback (记忆函数), useMemo (记忆组件)，useRef (保存引用值)

一.hooks - useState

import React, { useState } from "react";

export default function App() {
  // list 调用 useState
  // arrlist 修改 useState 
  const [list, arrlist] = useState(["我是useState","1111","2222"]);

  const clickusestate = () =>{
    arrlist(["我啊","555555","8888"])
  }

  return <div>
    <button onClick={clickusestate}>点击</button>
    <ul>
      {
        list.map(item =>
          <li key={item}>{item}</li>
        )
      }
    </ul>
  </div>
}

二. hooks - useEffect

import React,{useEffect,useState} from "React"
export default function App (){
	const [list,arrlist] = useState([])
	useEffect(()=>{
		axios
     },[])
     // [] 传递空数组 只会执行一次 
     // [list] 绑定参数 参数发生改变执行一次
     // [list,age] 可以绑定多个参数
	return<div>
	</div>
}

三. hooks - useCallback (记忆函数)

import React,{useState,useCallback } from "React"

export default function App(){
	const [liat,arrlist] = useState(0)
	// 防止组件重新渲染，导致方法被重新创建，起到缓存作用，只有[]中参数发生改变，才重新声明
	var clickbutton = useCallback(()=>{
		console.log(list)
		arrlist+1;
     },[list])
	return <div>
		<button onClick={()=>clickbutton()}></button>
    </div>
}

四. hooks - useMemo (记忆组件)

import React,{useMemo,useState} from "React"
export default function App(){
	const [list,arrlist] = useState([])
	// useMemo 和 useCallback 基本相同
	// useMemo 若[]参数不发生改变，只执行函数，把以前计算好的结果返回
	// 若参数发生改变则重新计算
	var clickusememo = useMemo(()=>{
		console.log(list)
		arrlist("88888")
    },[list])
	return<div>
		<button onClick={()=>clickusememo()}></button>
    </div>
}

五.hooks - useRef (保存引用值)

import React,{useState,useRef} from "React"
export default function App(){
	// 获取input
	var myref = useRef()
	var clickref = () =>{
	    console.log(myref)
	}
	return <div>
	   <input ref={myref}>
	   <button onClick={()=>clickref()}></button>
    </div>
}