react-hooks的优势

逻辑复用

使用传统的

const withWindowSize = Component => {
    // 产生一个高阶组件 WrappedComponent，只包含监听窗口大小的逻辑
    class WrappedComponent extends React.PureComponent {
        constructor(props) {
            super(props);
            this.state = {
                size: this.getSize()
            };
        }
        componentDidMount() {
            window.addEventListener("resize", this.handleResize);
        }
        componentWillUnmount() {
            window.removeEventListener("resize", this.handleResize);
        }
        getSize() {
            return window.innerWidth > 1000 ? "large" : "small";
        }
        handleResize = () => {
            const currentSize = this.getSize();
            this.setState({
                size: this.getSize()
            });
        }
        render() {
            // 将窗口大小传递给真正的业务逻辑组件
            return <Component size={this.state.size} />;
        }
    }
    return WrappedComponent;
};


class MyComponent extends React.Component {
    render() {
        const { size } = this.props;
        if (size === "small") return <SmallComponent />;
        else return <LargeComponent />;
    }
}
// 使用 withWindowSize 产生高阶组件，用于产生 size 属性传递给真正的业务组件
export default withWindowSize(MyComponent);

使用hooks

const getSize = () => {
    return window.innerWidth > 1000 ? "large" : "small";
}
const useWindowSize = () => {
    const [size, setSize] = useState(getSize());
    useEffect(() => {
        const handler = () => {
            setSize(getSize())
        };
        window.addEventListener('resize', handler);
        return () => {
            window.removeEventListener('resize', handler);
        };
    }, []);
    return size;
};

const Demo = () => {
    const size = useWindowSize();
    if (size === "small") return <SmallComponent />;
    else return <LargeComponent />;
};

有助于关注分离

代码逻辑写在一起