笔者最近用时下正新鲜的hooks api重构了自己的项目,其中踩到了一些坑在此与大家分享一下。
考虑这样的场景：网页内容分为数页(每页fixed定位),鼠标滚轮触发翻页,类似ppt的感觉,我们用currPage这个状态来记录当前页码,然后在componentDidMount中挂上滚轮事件。class实现的代码如下:
class App extends React.Component{ state = { currentPage: 0, } /** @description 用于防抖的实例私有字段 */ flipSwitch = true; filpPage = (event) => { if (this.flipSwitch) { if(event.deltaY > 0){ this.setState({currentPage: (this.state.currentPage + 1) % 3}); } if(event.deltaY < 0){ if(this.state.currentPage > 0){ this.setState({currentPage: this.state.currentPage - 1}); } } this.flipSwitch = false; setTimeout(() => {this.flipSwitch = true;}, 1000); } } componentDidMount(){ window.addEventListener('wheel', this.filpPage); } componentWillUnmount(){ window.removeEventListener('wheel', this.filpPage); } render(){ const classNames = ['unvisible','unvisible','unvisible']; classNames[this.state.currentPage] = 'currPage'; return ( 这里的重构用到两个hook：useState,useEffect。useState相信大家都了解了（不了解的戳这里:），这里我说一说useEffect的用法：首先它对标的是class中的各个生命周期,接收的第一个参数是一个回调函数effectCallback,这个回调是这样的形式:() => (void | (() => void | undefined)),如果useEffect没有第二个参数,effectCallback会在每次render（或者组件函数被调用）后被调用,相当于componentDidMount+componentDidupdate,值得注意的是effectCallback往往还会return一个函数,它的角色类似componentWillUnmount,会在下一次render前或销毁组件前运行。那么这里我只需要'像componentDidMount那样在组件第一次render后运行一次而不是每次render后都运行'要如何实现呢？这就需要传给useEffect第二个参数-一个数组了,它的角色有点类似于componentShouldUpdate,一般来说它由state和props中的数据构成,每次render,useEffect会判断这个数组与上一次render是否完全一致,如果完全一致effectCallback就不会进入事件队列并运行了,想要实现componentDidmount的效果只需传一个空数组，这样数组每次都完全一致了。
此外还有一个问题：函数防抖的变量flipSwitch放哪儿呢？答案是useRef。从命名上看它对标的是ref，也就是用来在render中收集dom元素,不过官方文档上已经说明了它的作用不止于此:**However, useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.**它的使用方法与useState没太大的差别，唯一要注意的是它不会直接把值return给你，而是以{current:value}这样的形式。 here is code:
function App () { const [currPage, setCurrPage] = useState(0) const classNames = Array(pageCount).fill('unvisible'); const flipSwitch = useRef(true) classNames[currPage] = 'currPage'; useEffect(() => { console.log('add listenner!') const wheelListener = event => { if (flipSwitch.current) { if(event.deltaY > 0){ setCurrPage((currPage + 1) % pageCount); } if(event.deltaY < 0){ if(currPage > 0){ setCurrPage(currPage - 1) } } flipSwitch.current = false; setTimeout(() => {flipSwitch.current = true;}, 1000); } }; window.addEventListener('wheel', wheelListener); // 在下次更新 listener 前运行return的函数 return () => {console.log('rm listenner!'),window.removeEventListener('wheel', wheelListener)} },[]); return ( 重点来了,程序一跑就会发现翻页只能从第一页翻到第二页。ok，来看看哪里出了问题。wheelListener每次滚轮都有触发,那么问题很可能出在currPage这个变量上了，果然，通过打印currPage我们会发现wheelListener每次触发它的值都一样是0。
原来wheelListener中除了event以外的变量都是第一次render中声明函数时通过闭包得到的,自然除了event以外的值一直都是第一次render时的值。
知道了原因，接下来有两种可能的解决方式:
- 设法在wheelListener取到currPage即时的值，因为没有了class语法中的this引用这条路看来是走不通了
- 每次render后更新wheelListener并删除旧的。
这同时也解决了我之前的一个疑惑:'每次render都会声明一个新的回调函数给useEffect,这是不是很浪费?',看来这很可能就是官方设计api时设想好的用法,给useEffect第二个参数也省了。
那么，把useEffect的第二个参数去掉,或者为了更贴合使用场景把它设置为[currPage],现在它可以正常运行了:
function App () { const [currPage, setCurrPage] = useState(0) const classNames = Array(3).fill('unvisible'); const flipSwitch = useRef(true) classNames[currPage] = 'currPage'; useEffect(() => { console.log('add listenner!') const wheelListener = event => { if (flipSwitch.current) { if(event.deltaY > 0){ setCurrPage((currPage + 1) % 3); } if(event.deltaY < 0){ if(currPage > 0){ setCurrPage(currPage - 1) } } flipSwitch.current = false; setTimeout(() => {flipSwitch.current = true;}, 1000); } }; window.addEventListener('wheel', wheelListener); // 在下次更新 callback 前运行return的函数 return () => {console.log('rm listenner!'),window.removeEventListener('wheel', wheelListener)} }, [currPage]); return ( PS: hooks api 还是很香的：
- 函数式组件看起来清爽多了。
- 对比class形式 render-vm-state 的结构,hooks api 把结构变成了更简洁的 render-states, 其中的state,react还帮你代劳了,你只需给它初始值即可。
- 自定义hooks可以复用一些在class语法下难以复用的逻辑(一般是因为this指向问题)。
- 函数式组件结合函数式编程有了更多的想象空间(结合compose、柯里化什么的)。