React Hooks使用方法：useState，useRef，useEffect,useReducer,useContext用法实战案例

 react hooks介绍，包括了state，ref，effect，reducer，context等常见hooks，也包括forwardRef和createContext用法，下面看代码吧，我用的是js写的。每个hook都做了个案例。

// 使用state来实现点击加减
import { useState} from 'react'
const UseStateTest=()=> {const [count, setCount] = useState(0)const increment=()=>{console.log('+')setCount(prev=>prev+1)}const decrement=()=>{console.log('-')setCount(prev=>prev-1)}return (<><div><p>count的数值为：{count}</p><button onClick={increment}>点击加一</button><button onClick={decrement}>点击减一</button></div></>)
}export default UseStateTest

// 这里是state和ref配合使用赋予输入框的值
import { useState,useRef } from 'react'const UseRefTest=()=> {const [inputValue,setInputValue]=useState('')const iptRef = useRef()const change=()=>{let value=iptRef.current.valueconsole.log(value)setInputValue(value)}return (<><div><input value={inputValue} ref={iptRef} onChange={change}/></div></>)
}export default UseRefTest

// 这里son子组件配合father使用，达到子组件传值到父组件并且让父组件调用和修改
import { useState,useRef } from 'react'
import SonUseRefTest from './SonUseRefTest'
const FatherUseRefTest=()=> {const sonRef = useRef();const [SonRefItem,setSonRefItem]=useState(null)const onshow=()=>{setSonRefItem(JSON.stringify(sonRef.current))}const onreset=()=>{sonRef.current?.setInputValue('')}return (<><div><h1>父组件</h1><h2>{SonRefItem}</h2><button onClick={onshow}>点击显示</button><button onClick={onreset}>点击重置</button><hr/><SonUseRefTest ref={sonRef}/></div></>)
}export default FatherUseRefTest// 这里son子组件配合father使用，达到子组件传值到父组件并且让父组件调用和修改
import React,{ useState,useRef,useImperativeHandle } from 'react'const SonUseRefTest=React.forwardRef((props,ref)=> {const [inputValue,setInputValue]=useState('')const change=(e)=>{setInputValue(e.target.value)}useImperativeHandle(ref,()=>({inputValue,setInputValue}))return (<><div><h2>子组件</h2><input value={inputValue} onChange={change}/></div></>)
})export default SonUseRefTest

import { useState , useEffect , useReducer} from 'react'
import SonUseReduceTest from './SonUseReduceTest'
const defaultState={count:0,name:'李四',flag:true
}
const reducer=(state=defaultState,action)=>{switch(action.type){case 'change_name':console.log(action)return {...state,name:action.name}case 'change_flag':console.log(action)return {...state,flag:action.flag}case 'son_change_name':console.log(action)return {...state,name:action.name}case 'son_change_flag':console.log(action)return {...state,flag:action.flag}  default : return state;}}
const UseReduceTest=()=> {const [state,dispatch]=useReducer(reducer,defaultState)const changeName=()=>{dispatch({type:'change_name',name:"张三"})}const changeFlag=()=>{dispatch({type:'change_flag',flag:!state.flag})}return (<><div><div>当前name为{String(state.name)}</div><br/><button onClick={changeName}>点击修改name</button><br/><div>当前flag为{String(state.flag)}</div><br/><button onClick={changeFlag}>点击修改flag</button><br/><SonUseReduceTest {...state} dispatch={dispatch}/></div></>)
}export default UseReduceTestimport { useState , useEffect} from 'react'
const SonUseReduceTest=(props)=> {const {dispatch,...state}=propsconst changeName=()=>{dispatch({type:'son_change_name',name:"王五"})}const changeFlag=()=>{dispatch({type:'son_change_flag',flag:!state.flag})}return (<><div><br/><br/><div>SonUseReduceTest</div><div>当前名字为{state.name}</div><button onClick={changeName}>点击修改name</button><div>当前flag为{JSON.stringify(state.flag)}</div><button onClick={changeFlag}>点击修改flag</button></div></>)
}export default SonUseReduceTest

import { useState , useEffect} from 'react'
const UseEffectTest=()=> {const [current, setCurrent] = useState(0)const [pagesize, setPagesize] = useState(10)const [totle] = useState(0)const [count, setCount] = useState(0)const [flag, setFlag] = useState(true)const add=(num)=>{setCount(prev=>prev+num)}const showHide=()=>{setFlag(prev=>!prev)}// 不传递依赖项，就是状态有更新就重新执行effect函数// useEffect(()=>{// 	console.log('刷新了组件！！！')// })// 传递依赖项，只有对应state改变时才会执行effect函数//  useEffect(()=>{// 	console.log('刷新了组件！！！')// },[count])// 传递依赖项为空，只有第一次渲染完成时才会执行effect函数useEffect(()=>{console.log('刷新了组件！！！')},[])return (<><div><div>当前count的为：{count}</div><button onClick={()=>add(1)}>点击+1</button><button onClick={()=>add(-1)}>点击-1</button><br/><button onClick={showHide}>点击修改Flag</button><div>当前flag的为：{String(flag)}</div></div></>)
}export default UseEffectTest

//定义一个context文件，单独存放在src下即为src->context-context,里面具体代码为如下：
import React ,{useState,useRef,useEffect,useContext} from 'react'
const FirstContext=React.createContext()export {FirstContext
}// 非嵌入式context
import React ,{ useState , useEffect , useContext} from 'react'
import LevelB from './LevelB'
import {FirstContext} from '../../../context/context'
const LevelA=()=>{const [count,setCount]=useState(0)const add=()=>{setCount(prev=>prev+1)}return (<><FirstContext.Provider value={{count,setCount}}><div>这是LevelA组件的count值为:{count}</div><button onClick={add}>+1</button><hr/><br/><LevelB/></FirstContext.Provider></>)
}export default LevelAimport React ,{ useState , useEffect , useContext} from 'react'
import LevelC from './LevelC'
const LevelB=()=>{return (<div><div>这是LevelB组件</div><hr/><br/><LevelC/></div>)
}export default LevelBimport React ,{ useState , useEffect , useContext} from 'react'
import {FirstContext} from '../../../context/context'
const LevelC=()=>{const {count,setCount}=useContext(FirstContext)const cadd=()=>{setCount(prev=>prev+1)}return (<><div>这是LevelC组件</div><div>{count}</div><button onClick={cadd}>+1</button></>)
}
export default LevelC