React18 Hooks，useEffect()，useEffect()性能优化,

useEffect()

• 基本使用
• 清除执行
• 多次使用
• 执行机制
• useEffect可以模拟之前的class组件的生命周期，但是更强大

• 修改title案例class和hook

import React, { PureComponent } from "react";
export class Home extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      count: 100,
    };
  }
  componentDidMount() {
    document.title = this.state.count;
  }
  componentDidUpdate() {
    document.title = this.state.count;
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <h2>Home Page count:{count}</h2>
        <div>
          <button onClick={(e) => this.setState({ count: this.state.count + 1 })}>+1</button>
        </div>
      </div>
    );
  }
}
export default Home;

import React, { memo, useEffect, useState } from "react";
const Home = memo(() => {
  const [count, setCount] = useState(99);
  useEffect(() => {
    // 副作用
    // 当前传入的回调函数会在组件被渲染完成后 自动执行
    //网络请求/DOM操作（修改标题）/事件监听
    document.title = count;
  });
  return (
    <div>
      <h2>Home</h2>
      <div>
        <button onClick={(e) => setCount(count + 1)}>+1</button>
      </div>
    </div>
  );
});
export default Home;

需要清除Effect（清除机制-返回回调函数）

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

const ClearEffect = memo(() => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 1.监听事件
    // const unsubscribe = store.subscribe(() => {});
    // function fn() {}
    // eventBus.on("zm", fn);

    console.log("监听redux中数据变化，监听eventBus中的zm事件");

    // 返回值：回调函数 =>  组件被重新渲染或组件卸载时执行
    return () => {
      console.log("取消监听redux中数据变化，取消监听eventBus中的zm事件");
    };
  });
  return (
    <div>
      <h2>ClearEffect</h2>
      <button onClick={(e) => setCount(count + 1)}>+1({count})</button>
    </div>
  );
});
export default ClearEffect;

在下次监听前，取消上次监听

使用多个Effect

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

const MulitEffect = memo(() => {
  const [count, setCount] = useState(0);
  // 负责告诉react，在执行完当前组件渲染之后要执行的副作用代码
  useEffect(() => {
    // 1.修改document的title
    console.log("1change title");
  });
  // 一个函数式组件中，可以存在多个 useEffect,顺序执行
  useEffect(() => {
    // 2.对redux中数据变化监听
    console.log("2监听redux中的数据");
    return () => {
      // 取消redux中数据的监听
    };
  });

  useEffect(() => {
    // 3.监听evenBus中的zm事件
    console.log("3监听eventBus的zm事件");
    return () => {
      // 取消eventBus中的zm事件监听
    };
  });

  return (
    <div>
      <h2>MulitEffect</h2>
      <button onClick={(e) => setCount(count + 1)}>+1({count})</button>
    </div>
  );
});
export default MulitEffect;

useEffect性能优化

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

const EffectEnhance = memo(() => {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState("zm");

  useEffect(() => {
    console.log("1change title");
  });

  useEffect(() => {
    console.log("2监听redux中的数据");
    return () => {};
  }, []);

  useEffect(() => {
    // 3.监听evenBus中的zm事件
    console.log("3监听eventBus的zm事件");
    return () => {};
  }, []);

  useEffect(() => {
    console.log("网络请求");
    return () => {
      console.log("会在组件被卸载时，才会执行一次");
    };
  }, []);

  return (
    <div>
      <h2>EffectEnhance</h2>
      <button onClick={(e) => setCount(count + 1)}>+1({count})</button>
      <button onClick={(e) => setMsg("ww")}>changeText({msg})</button>
    </div>
  );
});
export default EffectEnhance;