Effect Hook

 

1 数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。

2 可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

3 useEffect函数第二个参数是可选的：

  如果不传，则每次渲染都执行副作用；

  如果传入数组，则数组的成员变化了（比较引用地址），才执行副作用。

 

一 不需要清除的副作用

 

 

import React, { useState, useEffect } from "react";

// 记录渲染次数
let times = 0;

export default function App(props) {
  console.log(`第${++times}次渲染`);

  const [counter, setCounter] = useState(0);

  useEffect(() => {
    document.title = `第${counter}次点击`;
  });

  return (
    <div>
      <button onClick={e => setCounter(counter + 1)}>按钮</button>
    </div>
  );
}

 

 

二 需要清除的副作用

 

import React, { useState, useEffect } from "react";

export default function App(props) {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

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

  const onResize = e => {
    setSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };

  return (
    <div>
      窗口尺寸：{size.width}*{size.height}
    </div>
  );
}