React 自定义hook

React 自定义hook

学习react 做的示例

示例代码

example.js

import React, { useState, useEffect, useCallback } from 'react';

function useWinSize() {
    const [size, setSize] = useState({
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
    })

    const onResize = useCallback(() => {
        setSize({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight,
        })
    }, [])

    useEffect(() => {
        window.addEventListener('resize', onResize)
        return () => {
            window.removeEventListener('resize', onResize)
        }
    })

    return size;
}

function Example() {
    const size = useWinSize();

    return (
        <div>
            Page size: {size.width} * {size.height}
        </div>
    )
}

export default Example;

app.js

import React from 'react';
import Example from './example';

function App() {
  return (
    <div>
      <Example />
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

页面效果：

改变页面大小，可以看到Page size 的变化。

至此，结束。