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
