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 也并非全无代价，函数式组件本身会导致大量的临时函数被创建。

Hooks

React Hooks

Links