在 React 的 Class 组件中，常出现相关业务逻辑代码散在 componentDidMount, componentWillUpdate, componentWillUnmount 等生命周期函数中的情况。这样的代码可维护性差。查找或更改这块逻辑时，都要找多个地方。
解决方案
Hook 是 React 16.8 的新增特性。用 React 的 Hooks 可以优雅的聚集零散业务代码。React Hooks 通过 useState，useEffect 来聚集代码。
我们来看个 Demo。实现：浏览器窗口的大小变化时，将值传给服务器端。
Class 组件的写法:
class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
windowSize: {
width: window.innerWidth,
height: window.innerHeight
}
}
}
componentDidMount() {
window.addEventListener('resize', this.handleResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize)
}
handleResize = () => {
this.setState({
windowSize: {
width: window.innerWidth,
height: window.innerHeight
}
}, () => this.report())
}
// 将值传给服务器端
report(windowSize) {
console.log(`report windowSize: ${windowSize}`)
}
}
业务逻辑代码散在 会散在 componentDidMount，componentWillUnmount， handleResize 和 report 这 4 个地方。
用 Hook 的写法，可以将业务逻辑聚在一处，如下:
function Demo() {
const [windowSize, setWindowSize] = useState([
window.innerWidth,
window.innerHeight
]);
useEffect(() => {
// 组件 mount 后执行。
const handleResize = () => {
setWindowSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', handleResize);
// return 的函数在组件 unmount 后触发。
return () => window.removeEventListener('resize', handleResize);
}, []);
// 将值传给服务器端
const report = (windowSize) {
console.log(`report windowSize: ${windowSize}`)
}
// 浏览器窗口值变化后触发。
useEffect(report, [windowSize]);
为了复用监听浏览器窗口大小的逻辑，可以将这段业务抽象成自定义 Hook，如下:
import {useState, useEffect} from 'react'
export default function useWindowResize(callback) {
const [windowSize, setWindowSize] = useState([
window.innerWidth,
window.innerHeight
]);
useEffect(() => {
const handleResize = () => {
setWindowSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
useEffect(callback, [windowSize]);
}
使用:
const windowSize = useWindowSize(report)
// 将值传给服务器端
const report = (windowSize) {
console.log(`report windowSize: ${windowSize}`)
}
useEffect(report, [windowSize]);
代码是不是变得很内聚，用 Hook 来重构零散的代码吧~
网友评论