react hooks

useEffect

import React, {useEffect} from 'react';

const Example = props => {
  const {name,age}=props;
  /*
  * 形式：useEffect(callback,array)
  * (1)array为[];相当于componentDidMount,执行一次
  * (2)[xxx];当array改变时执行：你如果传['cy']，数组内是常量，那同（1）只会执行一次；
变量:如[name]，当name改变时执行
  * (3)当不传数组,每次改变都会执行，无论时name,还是age
  * */
  useEffect(() => {
    console.log(props)
    //update ,componentDidMount
    return ()=>{
      //componentWillUnMount
      console.log('我要被卸载了，请把定时器clear');
    }
  },[age])
  return (
    <div>
      {name}-{age}
    </div>
  );
};

export default Example;

useState

 import React,{useState} from 'react';
  const [name,setName]=useState({
    name:'cy',
    age:17
  });
  
  <Button onClick={()=>{
//不像this.setState会自动合并
        setName({
            ...name,
            name:'zq'
        });
      }}>name</Button>

import { Button, Result } from 'antd';
import React, { Fragment ,useState,useEffect,useMemo,useCallback,useRef,useContext,createContext} from 'react';
import { history } from "@umijs/max";
import ChildHooks from './ChildHook'
const NoFoundPage= () =>{
    //绑定元素，current
    const refCy=useRef();
    //全局共享
    const myContext = createContext(); // 当前上下文对象


    const [userInfo,setUserInfo]=useState({
        name:'cy',
        age:18
    })
    useEffect(()=>{
        console.log('useEffect',userInfo,`refCy?.current:${refCy?.current?.value}`);
        
        return ()=>{
            console.log('componentWillUnmount');
        }
    },[userInfo])
// callback是⼀个函数⽤于处理逻辑
// array 控制useMemo重新执⾏的数组，array改变时才会 重新执⾏useMemo
// useMemo的返回值是⼀个记忆值，是callback的返回值  useMemo 是对数据的记忆，useCallback 是对函数的记忆

    const memoCy=useMemo(()=>{
        return userInfo
    },[userInfo])

// 跟useMemo不⼀样的是返回值是callback本身，⽽
// useMemo返回的是callback函数的返回值
const callbackCy=useCallback(()=>{
    return userInfo
},[userInfo])
    return <Fragment>
    <div style={{
        margin:20
    }}>
     {userInfo?.age}
    </div>
    <div style={{
        margin:20,
        color:'red'
    }}>
    useMemo: {memoCy?.age}
    </div>
    <div style={{
        margin:20,
        color:'red'
    }}>
        {/* //记忆函数 */}
    useCallback {callbackCy()?.age}
    </div>
    <Button onClick={()=>{
        setUserInfo({
            ...userInfo,
            age:userInfo?.age+1
        })
        console.log();
    }}>点击</Button>
    <input ref={refCy} type='text'/>
    <myContext.Provider value={'dark333'}>
         <ChildHooks/>
    </myContext.Provider>
   
 </Fragment>
};

export default NoFoundPage;