欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React之Hooks学习(一)

程序员文章站 2022-06-16 09:21:36
...

什么是 react hook ?

它们不是共享状态的方法,而是共享有状态逻辑的方法

举个简单例子

如下自定义 useWindowSize ,可以像调用一个函数一样,调用一个hook,每个组件的内部状态相互独立

import useWindowSize from './useWindowSize';

const Demo = () => {
  const {width, height} = useWindowSize();

  return (
    <div>
      <div>width: {width}</div>
      <div>height: {height}</div>
    </div>
  );
};
import { useEffect, useState } from "react";

const useWindowSize = () => {
  const [state, setState] = useState<{ width: number; height: number }>({
    width: window.innerWidth,

    height: window.innerHeight
  });

  useEffect(() => {
    const handler = () => {
      setState({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handler);

    return () => {
      window.removeEventListener('resize', handler);
    };
  }, []);

  return state;
};

 

有了react hook 还要 redux 么?

是不是可以轻松的回答他,这两个是不同的东西,hook 是共享状态的逻辑,而 redux 是共享状态和管理状态的。
不过使用 hook 可以很容易封装一个简易的全局共享状态。对于数据流复杂的项目,我依然建议使用 redux 去管理你的数据流。