Effect Hook

发布时间：2020-12-13 23:46:28 所属栏目：Linux 来源：网络整理

导读：? 1 数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。 2 可以把? useEffect ?Hook 看做? componentDidMount ， componentDidUpdate ?和? componentWillUnmount ?这三个函数的组合。 3 useEffect函数第二个参数是可选的： ? 如果不传，则每

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,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",false);
    };
  },[]);

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!