react-hooks知识梳理—5.自定义hooks

￡神魔★判官ぃ 2022-10-31 05:22 70阅读 0赞

### 1.实现一个demo ###

如下demo，先坚听到浏览器的尺寸变化。

import React, { useState, useEffect } from 'react';
    
    
    const Parent = () => {
      const [width, setWidth] = useState('0px');
      const [height, setHeight] = useState('0px');
    
      useEffect(() => {
        setWidth(document.documentElement.clientWidth + 'px');
        setHeight(document.documentElement.clientWidth + 'px');
      }, [])
    
      useEffect(() => {
        const handleResize = () => {
          setWidth(document.documentElement.clientWidth + 'px');
          setHeight(document.documentElement.clientWidth + 'px');
        };
        window.addEventListener('resize', handleResize, false);
        return () => {
          window.removeEventListener('resize', handleResize, false);
        }
      }, [])
    
      return (
        <div>
          size: {width} * {height}
        </div>
      )
    };
    
    function CustomHook() {
      return (
        <div className="App">
          <Parent />
        </div>
      );
    }
    
    export default CustomHook;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

2.如何去复用呢

封装hooks

import React, { useState, useEffect } from 'react';
    
    export const useWindowSize = () => {
        const [width, setWidth] = useState('0px');
        const [height, setHeight] = useState('0px');
      
        useEffect(() => {
          setWidth(document.documentElement.clientWidth + 'px');
          setHeight(document.documentElement.clientWidth + 'px');
        }, [])
      
        useEffect(() => {
          const handleResize = () => {
            setWidth(document.documentElement.clientWidth + 'px');
            setHeight(document.documentElement.clientWidth + 'px');
          };
          window.addEventListener('resize', handleResize, false);
          return () => {
            window.removeEventListener('resize', handleResize, false);
          }
        }, [])
        return [width, height];
    };

组件代码

import React, { useState, useEffect } from 'react';
    import { useWindowSize } from './pureHook/useWindowSize';
    
    const Parent = () => {
      const [width, height] = useWindowSize();
      return (
        <div>
          size1: {width} * {height}
        </div>
      )
    };
    
    function CustomHook() {
      return (
        <div className="App">
          <Parent />
        </div>
      );
    }
    
    export default CustomHook;

这样组件就非常的简洁

接下来换成class的写法

import React from "react";
    // 类组件
    class Parent extends React.Component {
      constructor(...args) {
        super(args);
        this.state = {
          height: 0,
          width: 0,
        };
      }
    
      handleResize = () => {
        this.setState({
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientWidth,
        });
      }
    
      componentDidMount() {
        window.addEventListener("resize", this.handleResize, false);
      }
    
      componentWillUnmount() {
        window.removeEventListener("resize", this.handleResize, false);
      }
    
      render() {
        const {width, height} = this.state;
        return (
          <div>
            size: {width} * {height}
          </div>
        );
      }
    }
    
    function CustomHook() {
      return (
        <div className="App">
          <Parent />
        </div>
      );
    }
    
    export default CustomHook;

如何把类组件去封装呢，目前没有很好的解决办法

import React from "react";
    
    const getWindowsize = () => {
      window.addEventListener("resize", this.handleResize, false);
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientWidth,
      };
    };
    // 类组件
    class Parent extends React.Component {
      constructor(...args) {
        super(args);
        this.state = {
          height: 0,
          width: 0,
        };
      }
    
      handleResize = () => {
        this.setState({
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientWidth,
        });
      }
    
      componentDidMount() {
        window.addEventListener("resize", this.handleResize, false);
      }
    
      componentWillUnmount() {
        window.removeEventListener("resize", this.handleResize, false);
      }
    
      render() {
        const {width, height} = this.state;
        return (
          <div>
            size: {width} * {height}
          </div>
        );
      }
    }
    
    function CustomHook() {
      return (
        <div className="App">
          <Parent />
        </div>
      );
    }
    
    export default CustomHook;

总结：hooks可以很好的抽离，复用逻辑

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20221024/6fc393c24c3e4f30873050d488a0e209.png