亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

第 002 期 聚集零散業務代碼的解決方案 - React Hook

標簽:
React

在 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 来重构零散的代码吧~

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
115
獲贊與收藏
6940

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消