Hooks

React Hooks

React Hooks是React 16.8引入的新特性，允许我们在不使用Class的前提下使用state和其他特性。React Hooks要解决的问题是状态共享，是继render-props和higher-order components之后的第三种状态逻辑复用方案，不会产生JSX嵌套地狱问题。

Hooks的优势在于：

  • 多个状态不会产生嵌套，写法还是平铺的
  • 允许函数组件使用state和部分生命周期
  • 更容易将组件的UI与状态分离
function useWindowWidth() {
  const [width, setWidth] = React.useState(window.innerWidth);

  useEffect(() => {
    const onResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener("resize", onResize);

    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, [width]);

  return width;
}

不过Hooks也并非全无代价，函数式组件本身会导致大量的临时函数被创建。

Links

最近更新于0001-01-01