Effect Hook

 

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

2 可以把 useEffect Hook 看做 componentDidMountcomponentDidUpdate 和 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>
  );
}

 

posted on 2019-06-22 11:49  沙滩海风  阅读(407)  评论(0编辑  收藏  举报

导航