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;

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可以很好的抽离，复用逻辑