千峰React：Hooks（上）

什么是Hooks

ref引用值

普通变量的改变一般是不好触发函数组件的渲染的，如果想让一般的数据也可以得到状态的保存，可以使用ref

import { useState ,useRef} from 'react'function App() {const [count, setCount] = useState(0)let num = useRef(0)const handleClick = () => {setCount(count + 1)num.current++ //current,当前值console.log(num.current)}return (<div><button onClick={handleClick}>计数</button></div>)
}
export default App

那你就要问了：这和useState有什么区别？

更改时不会触发渲染，例如这里，我们注释掉setCount的语句：

import { useState ,useRef} from 'react'function App() {const [count, setCount] = useState(0)let num = useRef(0)const handleClick = () => {//  setCount(count + 1)num.current++ //current,当前值console.log(num.current)}return (<div><button onClick={handleClick}>计数</button>{count},{num.current}</div>)
}
export default App

可以看出，num的值变了，但是并没有渲染出来

所以我们一般不会把ref写在jsx的结构里，但是可以在渲染过程之外随意修改和更新current的值，不需要像useState一样使用里面的方法修改的值才有效

如果我们在里面开启定时器，在这里一秒触发一次，如果单击按钮，num的值一秒增加一次，如果点击按钮多次，就会同时开启多个定时器，数值就会涨的飞快

import { set } from 'lodash'
import { useState ,useRef} from 'react'function App() {const [count, setCount] = useState(0)let timer=nulllet num = useRef(0)const handleClick = () => {setCount(count + 1)setInterval(() => {console.log(123)}, 1000);}return (<div><button onClick={handleClick}>计数</button>{count},{num.current}</div>)
}
export default App

一般的解决办法是每次新开一个定时器，就关掉旧定时器

import { set } from 'lodash'
import { useState ,useRef} from 'react'function App() {const [count, setCount] = useState(0)let timer=nullconst handleClick = () => {clearInterval(timer)timer=setInterval(() => {console.log(123)}, 1000);}return (<div><button onClick={handleClick}>计数</button>{count}</div>)
}
export default App

但是如果对整个函数重新调用（也就是启用useState）就无法销毁定时器了

因为整个函数重新调用，定时器是在上一次调用产生的，这一次删不掉上一次的定时器，作用域不同

import { set } from 'lodash'
import { useState ,useRef} from 'react'function App() {const [count, setCount] = useState(0)let timer=nullconst handleClick = () => {setCount(count + 1)clearInterval(timer)timer=setInterval(() => {console.log(123)}, 1000);}return (<div><button onClick={handleClick}>计数</button>{count}</div>)
}
export default App

这时候就需要对timer做记忆，也就是使用ref，就算走了多次渲染函数，也可以销毁

import { set } from 'lodash'
import { useState, useRef } from 'react'function App() {const [count, setCount] = useState(0)let timer = useRef(null)const handleClick = () => {setCount(count + 1)clearInterval(timer.current)timer.current = setInterval(() => {console.log(123)}, 1000)}return (<div><button onClick={handleClick}>计数</button>{count}</div>)
}
export default App

试了试，如果timer放全局定义是可以的，但是感觉这样不利于函数的封装性

import { useState, useRef } from 'react'let timer = null
function App() {const [count, setCount] = useState(0)const handleClick = () => {setCount(count + 1)clearInterval(timer)timer = setInterval(() => {console.log(123)}, 1000)}return (<div><button onClick={handleClick}>计数</button>{count}</div>)
}
export default App

通过ref操作原生dom

react里可以使用js的方法操作dom，例如什么querySelector这种css选择器，但是更推荐我们使用React的方法操作dom

import { set } from 'lodash'
import { useState, useRef } from 'react'function App() {const myRef = useRef(null)const handleClick = () => {//通过ref操作原生domconsole.log(myRef.current.innerHTML)myRef.current.style.background = 'red'}return (<div><button onClick={handleClick}>计数</button><div ref={myRef}>hello React</div></div>)
}
export default App

这么写是会报错的，钩子是按顺序使用的，在循环里这么写会报错，所以这么写不符合规范；而且也不建议把const myRef=useRef(null)写在结构里

import { set } from 'lodash'
import { useState, useRef } from 'react'function App() {const list = [{ id: 1, text: 'aaa' },{ id: 2, text: 'bbb' },{ id: 3, text: 'ccc' },]const handleClick = () => {//通过ref操作原生domconsole.log(myRef.current.innerHTML)myRef.current.style.background = 'red'}return (<div>{list.map((item) => {const myRef = useRef(null)return <li key={item.id} ref={myRef}>{item.text}</li>})}</div>)
}export default App

在循环操作里ref可以使用回调函数的写法：

import { useState, useRef } from 'react'function App() {const list = [{ id: 1, text: 'aaa' },{ id: 2, text: 'bbb' },{ id: 3, text: 'ccc' },]return (<div><ul>{list.map((item) => {return (<likey={item.id}ref={(myRef) => {myRef.style.background = 'red'}}>{item.text}</li>)})}</ul></div>)
}export default App

但是我报了很多错，说是

其实就算style在卸载的时候为空，加个逻辑判断就好了

铭记励志轩

import { useState, useRef } from 'react'function App() {const list = [{ id: 1, text: 'aaa' },{ id: 2, text: 'bbb' },{ id: 3, text: 'ccc' },]return (<div><ul>{list.map((item) => {return (<likey={item.id}ref={(myRef) => {if (myRef) {myRef.style.background = 'red'}}}>{item.text}</li>)})}</ul></div>)
}export default App

组件设置ref需要forwardRef进行转发

forwardRef 是 React 提供的一个高阶函数，用于将 ref 从父组件传递到子组件中的 DOM 元素或组件实例。它主要用于解决在函数组件中直接使用 ref 时无法访问子组件内部 DOM 元素的问题。

在 MyInput 组件中，ref 被绑定到 <input> 元素，也就是把ref转发到内部的input身上，然后=在 handleClick 函数中，ref.current 用于直接操作 <input> 元素：

import {  useRef ,forwardRef} from 'react'const MyInput = forwardRef(function MyInput(props, ref) {return (<input type='text' ref={ref}></input>
)
})function App() {const ref = useRef(null)const handleClick = () => {ref.current.focus()ref.current.style.background='red'}return (<div><button onClick={handleClick}>点我</button><MyInput ref={ref} /></div>)
}export default App

useImperativeHandle自定义ref

你想要它其中两个方法：focus 和 scrollIntoView。为此，用单独额外的 ref 来指向真实的浏览器 DOM。然后使用 useImperativeHandle 来暴露一个句柄，它只返回你想要父组件去调用的方法

import {  useRef ,forwardRef,useImperativeHandle} from 'react'const MyInput = forwardRef(function MyInput(props, ref) {const inputRef=useRef(null)useImperativeHandle(ref,()=>{return{focus(){inputRef.current.focus()}}})return (<input type='text' ref={inputRef}></input>
)
})function App() {const ref = useRef(null)const handleClick = () => {
ref.current.focus()}return (<div><button onClick={handleClick}>点我</button><MyInput ref={ref} /></div>)
}export default App

点击按钮获取焦点

然后你就要问了（因为我也想问）：这个获取焦点的操作为什么要写成这样？

这样会更加灵活，不用完全写在dom里，可以把你想要写的功能放在useImperativeHandle的第二个参数里，也就是里面的回调函数，来实现你自己的功能、自定义的功能

相当于你自己写了一个组件，可以像普通的组件使用，在里面添加属性和属性值，你也可以写自己的组件实现的功能

例如这个button的属性是他自己自带的，我们写的组件也可以写一些自己带的属性，focus 和 scrollIntoView就是这个作用

 <button onClick={handleClick}>点我</button>

比如我们再添加一个获取焦点以后背景变红色的功能：

import {  useRef ,forwardRef,useImperativeHandle} from 'react'const MyInput = forwardRef(function MyInput(props, ref) {const inputRef=useRef(null)useImperativeHandle(ref, () => {return {focus() {inputRef.current.focus()},focusAndStyle() {inputRef.current.focus()inputRef.current.style.background = 'red'}}})return (<input type='text' ref={inputRef}></input>
)
})function App() {const ref = useRef(null)const handleClick = () => {if (ref) {ref.current.focusAndStyle()}}return (<div><button onClick={handleClick}>点我</button><MyInput ref={ref} /></div>)
}export default App

纯函数如何处理副作用

纯函数之前提过，只关注输入和输出、两次执行函数是否结果一样axios

上面图的意思是：组件是纯函数，但是有时候组件不得不写一些违背纯函数的功能，例如Ajax调用、还有我们用ref操作dom等都是副作用

事件本身可以去除副作用

import { useRef, forwardRef, useImperativeHandle } from 'react'function App() {const ref = useRef(null)//副作用，不符合纯函数的规范//        setTimeout(() => {//     ref.current.focus()// },1000)//副作用，但是符合纯函数的规范，因为事件可以处理副作用const handleClick = () => {ref.current.focus()}return (<div><button onClick={handleClick}>点击</button><input type='text' ref={ref} /></div>)
}export default App

但不是所有的副作用都可以用事件去除，而且有时候需要初始化副作用

所以在react里时间操作可以处理副作用，比如useEffect钩子

import { useRef, forwardRef, useImperativeHandle, useEffect } from 'react'function App() {const ref = useRef(null)//副作用，不符合纯函数的规范//        setTimeout(() => {//     ref.current.focus()// },1000)//副作用，但是符合纯函数的规范，因为事件可以处理副作用//   const handleClick = () => {//     ref.current.focus()//   }//可以在初始的时候进行副作用操作//useEffect触发的时机是jsx渲染后触发的，这样就会消除副作用的影响useEffect(() => {if (ref) {ref.current.focus()}})return (<div><button onClick={handleClick}>点我</button><input type='text' ref={ref} /></div>)
}export default App

一刷新就自动获取焦点

初次渲染和更新渲染，都会触发useEffect(),因为每次渲染jsx以后，会触发useEffect()，整个当前函数组件作用域的最后时机触发的

import {useState,useEffect} from 'react'function App() {const [count, setCount] = useState(0) useEffect(() => {console.log(count)})const handleClick = () => {setCount(count + 1)}return (<div><button onClick={handleClick}>点我</button></div>)
}
export default App

执行顺序：

组件首次渲染（调用 useState(0)，初始化 count 为 0，渲染组件返回jsx）->点击按钮（触发handleClick函数调用useCount）->重新渲染组件->执行useEffect中的副作用函数

useEffect的依赖项使用

一个组件里可能有多个副作用，原则上来说多个副作用可以放在同一个useEffect里，但是比较杂

可以使用useEffect的依赖项进行拆解，因为useEffect本身就是个函数

我们可以使用多个useEffect来控制副作用

import {useState,useEffect} from 'react'function App() {const [count, setCount] = useState(0) const [msg, setMsg] = useState('hello React')useEffect(() => {console.log(msg)})useEffect(() => {console.log(count)})const handleClick = () => {setCount(count + 1)}return (<div><button onClick={handleClick}>点我</button></div>)
}
export default App

两个根一个一样，也可以正常的更新、渲染

但是有时候根据不同的应用场景，有些副作用需要重新触发，有的不需要，可以指定哪些可以触发、哪些不可以。

添加useEffect的依赖项目

import {useState,useEffect} from 'react'function App() {const [count, setCount] = useState(0) const [msg, setMsg] = useState('hello React')useEffect(() => {console.log(msg)},[msg])useEffect(() => {console.log(count)},[count])//这就是依赖项const handleClick = () => {setCount(count + 1)}return (<div><button onClick={handleClick}>点我</button></div>)
}
export default App

初始都触发，更新以后，只有对应依赖项发生改变时才触发，像这里msg没改变所以不触发

内部是怎么判别有没有发生变化的？是通过Object.is()方法来判定是否改变

像这样，依赖项是静态的空数组，只有初始会触发，以后发生改变都不会渲染他

不过尽量不要这么写，尽量还是要把里面用到的状态写在依赖项里

除了状态变量，还有props、计算变量等也可以写在依赖项里

计算变量：是指通过其他变量或数据动态计算得出的值，而不是直接存储的静态值。计算变量通常用于根据某些条件或逻辑动态生成数据，而不是手动维护这些数据。

函数也可以做依赖项

函数也可能成为计算变量，所以也可以作为依赖项

但是会出现一个问题，Object.is()方法在判别函数的时候会看引用类型的地址，两个函数是两个函数，内存地址不一样Object.is()就会判别为false

useCallBack可以修复这个问题，可以缓存函数，一般用于组件性能优化，其他情况不推荐使用，这里先不细说

最好的解决办法是把函数定义在useEffect内部

import {useState,useEffect} from 'react'function App() {const [count, setCount] = useState(0) useEffect(() => {const foo = () => {console.log(count)}foo()},[count])//这就是依赖项return (<div></div>)
}
export default App

useEffect清理操作

先写一个简易的关闭聊天室的功能

import {useState,useEffect} from 'react'function Chat() {return (<div>我是聊天室</div>)
}function App() {const [show,setShow] = useState(true)const handleClick = () => {setShow(false)}return (<div><button onClick={handleClick}>点我关闭聊天室</button>{show&&<Chat/>}</div>)
}
export default App

useEffect可以在卸载组件的时候清理

import {useState,useEffect} from 'react'function Chat() {useEffect(() => { console.log('进入聊天室')//useEffect返回一个函数，这个函数会在组件卸载的时候执行return () => {console.log('离开聊天室')}})return (<div>我是聊天室</div>)
}function App() {const [show,setShow] = useState(true)const handleClick = () => {setShow(false)}return (<div><button onClick={handleClick}>点我关闭聊天室</button>{show&&<Chat/>}</div>)
}
export default App

增加了useEffect更新时的清理功能，清理功能是整个作用域的结束，而不是下一次作用域的开始

import {useState,useEffect} from 'react'function Chat({title}) {useEffect(() => { console.log('进入',title)//useEffect返回一个函数，这个函数会在组件卸载的时候执行return () => {console.log('离开',title)}},[title])return (<div>我是课堂</div>)
}function App() {const [show, setShow] = useState(true)const [title,setTitle]=useState('电磁场与电磁波')const handleClick = () => {setShow(false)}const handleChange = (e) => {setTitle(e.target.value)}return (<div><button onClick={handleClick}>点我退出课堂</button><select value={title} onChange={handleChange}><option value="电磁场与电磁波">电磁场与电磁波</option><option value="半导体物理">半导体物理</option></select>{show && <Chat title={title} />}</div>)
}
export default App

清理功能是很常见的需求，如果注释掉清理的代码就会变成这样：

没有退出只有进入，如果是严格模式其实会把函数执行两边，可以看到👇

实际上是违背正常逻辑的，如果加上清理功能，在严格模式执行的现象应该是

也就是说严格模式也可以起到提醒你需要自检的作用

再举一个栗子，如果我们要切换不同的课程，切换不同的课程耗时不同

import {useState,useEffect} from 'react'function fetchChat(title) {const delay = title==='电磁场与电磁波'?2000:1000return new Promise((resolve,reject)=>{setTimeout(() => {resolve([{id:1,text:title+'1'},{id:2,text:title+'2'},{id:3,text:title+'3'}])}, delay);})
}function Chat({ title }) {const [list,setList]=useState([])useEffect(() => { fetchChat(title).then((data) => {setList(data)
})return () => {}},[title])return (<div>{list.map((item)=>{return <li key={item.id}>{ item.text}</li>})}</div>)
}function App() {const [show, setShow] = useState(true)const [title,setTitle]=useState('电磁场与电磁波')const handleClick = () => {setShow(false)}const handleChange = (e) => {setTitle(e.target.value)}return (<div><button onClick={handleClick}>点我退出课堂</button><select value={title} onChange={handleChange}><option value="电磁场与电磁波">电磁场与电磁波</option><option value="半导体物理">半导体物理</option></select>{show && <Chat title={title} />}</div>)
}
export default App

如果不添加useEffect，二者耗时不同，就会出现上一个还在加载，下一个作用域已经执行的问题

变成这样

加入清理，就可以解决问题

import {useState,useEffect} from 'react'function fetchChat(title) {const delay = title==='电磁场与电磁波'?2000:1000return new Promise((resolve,reject)=>{setTimeout(() => {resolve([{id:1,text:title+'1'},{id:2,text:title+'2'},{id:3,text:title+'3'}])}, delay);})
}function Chat({ title }) {const [list, setList] = useState([])useEffect(() => { let ignore = falsefetchChat(title).then((data) => {if (!ignore) {setList(data)//上一次没结束不能提前更新}
})return () => {ignore=true//做清理工作}},[title])return (<div>{list.map((item)=>{return <li key={item.id}>{ item.text}</li>})}</div>)
}function App() {const [show, setShow] = useState(true)const [title,setTitle]=useState('电磁场与电磁波')const handleClick = () => {setShow(false)}const handleChange = (e) => {setTitle(e.target.value)}return (<div><button onClick={handleClick}>点我退出课堂</button><select value={title} onChange={handleChange}><option value="电磁场与电磁波">电磁场与电磁波</option><option value="半导体物理">半导体物理</option></select>{show && <Chat title={title} />}</div>)
}
export default App

有很多人在遇到这样的异步操作时会用async和await，但是React不支持你这么写

你可以单独写一个async函数，然后把要执行的放进去：

import { useState, useEffect } from 'react';function fetchChat(title) {const delay = title === '电磁场与电磁波' ? 2000 : 1000;return new Promise((resolve, reject) => {setTimeout(() => {resolve([{ id: 1, text: title + '1' },{ id: 2, text: title + '2' },{ id: 3, text: title + '3' }]);}, delay);});
}function Chat({ title }) {const [list, setList] = useState([]);useEffect(() => {let ignore = false;const fetchData = async () => {const data = await fetchChat(title);if (!ignore) {setList(data); // 上一次没结束不能提前更新}};fetchData();return () => {ignore = true; // 做清理工作};}, [title]);return (<div>{list.map((item) => (<li key={item.id}>{item.text}</li>))}</div>);
}function App() {const [show, setShow] = useState(true);const [title, setTitle] = useState('电磁场与电磁波');const handleClick = () => {setShow(false);};const handleChange = (e) => {setTitle(e.target.value);};return (<div><button onClick={handleClick}>点我退出课堂</button><select value={title} onChange={handleChange}><option value="电磁场与电磁波">电磁场与电磁波</option><option value="半导体物理">半导体物理</option></select>{show && <Chat title={title} />}</div>);
}export default App;

useEffectEvent

实验性版本提供的钩子

如果你的状态变量有多个，只想执行一个可以用实验版本的useEffectEvent

介于六月份同学说实验版本也用不了，所以不讲了