标签：count function useRef return useMemo useReducer value setCount var
文章目录
一、useContext
一个react项目可以通过props传递参数，但props无法跨层级传递，而context却可以，他存储所有状态，每一个组件想要获取状态都可以直接向context请求状态和处理逻辑。对于钩子useContext，就有类似的功能。
代码：
function Demo() {
var count=useContext(countContext)
return(
<div>
<p>{count}</p>
</div>
)
}
//创建context
var countContext=React.createContext()
function App(){
var [count,setCount]=useState(0)
return(
<div>
<countContext.Provider value={count}>
<Demo></Demo>
</countContext.Provider>
<button onClick={()=>{setCount(++count)}}>Add</button>
</div>
)
}
App组件中对于useContext写法固定。我们创建了一个countContext，传递状态count，所以Demo组件想要获取状态的时候可以直接从countContext中获取。var count=useContext(countContext)
二、useReducer
之前在redux中接触过reducer，是存储改变状态的逻辑的，所以我们先定义一个reducer，然后使用useReducer。
useReducer的两个参数，第一个是我们定义的reducer，另一个是状态初始值。代买如下：
function reducer(state,action){
switch(action.type){
case "Add":{
}
default:{
return state
}
}
}
function App(){
var [count,setCount]=useState(0)
console.log(useReducer(reducer,{num:0}))
return(
<div>
<countContext.Provider value={count}>
<Demo></Demo>
</countContext.Provider>
<button onClick={()=>{setCount(++count)}}>Add</button>
</div>
)
}
打印结果如下：
可以发现，这是一个含有初始值和改变逻辑函数的对象。其中的fun就相当于我们学过的dispatch。
代码如下：
function reducer(state,action){
switch(action.type){
case "Add":{
return{
num:state.num++
}
}
default:{
return state
}
}
}
function App(){
console.log(useReducer(reducer,{num:0}))
var [state,dispatch]=useReducer(reducer,{num:0})
return(
<div>
<h1>{state.num}</h1>
<button onClick={()=>{dispatch({type:"Add"})}}>changeNum</button>
</div>
)
}
由此也可以发现useState和useReducer的不同之处，两者开始的使用方法似乎相似，但返回的结果却有不同，维护的改变状态的方法种类数量也不同。
三、useRef
获取input标签下的值。先引入，创建useRef这个钩子，最后获取结果
代码如下：
function App(){
var useRefInput=useRef()
console.log(useRefInput.current)
return(
<div>
<input ref={useRefInput} type="text"></input>
</div>
)
}
结果输出：
四、useMemo
对于App内部定义的函数，正常来讲，谁调用谁就会触发其逻辑，但是出现了如下情况：
代码：
function App(){
var [count,setCount]=useState(0)
var [value,setValue]=useState(0)
var a=function(){
console.log("11111")
return count
}
return (
<div>
<p>{a()}</p>
<p>{value}</p>
<button onClick={()=>{setCount(++count)}}>Count</button>
<button onClick={()=>{setValue(++value)}}>Value</button>
</div>
)
}
如上代码，应该只有在点击Count时才会输出“11111"，但是运行时我们发现，点击Value时也会触发打印：
而Hook useMemo就可以很好解决这个问题。useMemo传入函数a，代码如下：
function App(){
var [count,setCount]=useState(0)
var [value,setValue]=useState(0)
var a=useMemo(function(){
console.log("11111")
return count
})
console.log(a)
return (
<div>
{/* <p>{a()}</p> */}
<p>{value}</p>
<button onClick={()=>{setCount(++count)}}>Count</button>
<button onClick={()=>{setValue(++value)}}>Value</button>
</div>
)
}
打印输出
这也就说明使用useMemo之后返回的直接就是我们return的值0,然后还要传入我们函数的依赖项，最后代码：
function App(){
var [count,setCount]=useState(0)
var [value,setValue]=useState(0)
var a=useMemo(function(){
console.log("11111")
return count
},[count])
// console.log(a)
return (
<div>
<p>{a}</p>
<p>{value}</p>
<button onClick={()=>{setCount(++count)}}>Count</button>
<button onClick={()=>{setValue(++value)}}>Value</button>
</div>
)
}
结果如下（点击Value不会再触发a函数了）：
五、useCallback
useCallback和useMemo的用法差不多,它也需要写入依赖项，而内部的返回值只有在依赖项发生变化时，才会返回，如下代码：
function App(){
var [count,setCount]=useState(0)
var [value,setValue]=useState(0)
var a=useCallback(function(){
console.log("11111")
return count
},[value])
console.log(a)
return (
<div>
{/* <p>{a()}</p> */}
<p>{value}</p>
<button onClick={()=>{setCount(++count)}}>Count</button>
<button onClick={()=>{setValue(++value)}}>Value</button>
</div>
)
}
结果可以看出，它返回的不是return的值，而是a函数，所以调用时要用a()
然后调用
开始时，发现我们点击Count了8次只加了1（异步）：
但当我们点击一下Value时，Count的8下同步到视图中，Value+1：
从这里我们可以看出useCallback是只有在依赖项发生变化时，函数才会返回一个新的返回值（count也在增加，只是不返回新的返回值）
标签：count,function,useRef,return,useMemo,useReducer,value,setCount,var 来源： https://blog.csdn.net/qq_45856669/article/details/123306134
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。