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.value
    console.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 UseReduceTest



import { useState , useEffect} from 'react'
const SonUseReduceTest=(props)=> {
  const {dispatch,...state}=props
  const 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 LevelA


import React ,{ useState , useEffect , useContext} from 'react'
import LevelC from './LevelC'
const LevelB=()=>{

	return (
		
		<div>
			<div>这是LevelB组件</div>
			<hr/>
			<br/>
			<LevelC/>
		</div>
	)
}

export default LevelB


import 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