React-Hooks-useEffect

React-Hooks-useEffect

1. Effect hook 可以让我们在函数式组件中执行副作用操作

// react官网示例
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• 了解过react的小伙伴们应该知道react class组件内部会有一些生命周期函数，这些函数可以用来在组件不同生命阶段中，去执行一些不同的操作。函数式组件是没有自己的生命周期函数和状态的，而 Effect 可以帮助我们在函数式组件中去完成关于生命周期相关的操作以及一些其他的副作用操作。

语法：

// .....

function component(props) {
    // 第一个参数为一个函数，第二个参数为依赖项
    useEffect(()=>{}, [])
    
    // 假定我们有一个需要订阅的对象。
    useEffect(() => {
      const subscription = props.source.subscribe();
    // 返回函数
      return () => {
        subscription.unsubscribe();
      };
       // 依赖项
    }, [props.source]);
}

// .....

• 在不传递第二个参数的情况下，每次重新渲染组件Effect中的操作都会重新执行。
• 在以一个 []空数组作为第二个参数时，Effect中的操作只会在DOM渲染时运行一次。
• 在传递一个或者多个变量时，Effect会对比新旧数据变化，来决定是否要执行副作用。（数组中的变量只要有一个有变化，则effect中所有操作将会被重新执行）
• 如果在effect中返回一个函数，则在组件被销毁前会执行，并且每次因为数据改动重新渲染组件时，return 的函数也会被执行。

注意：多个Effect操作应该分开来写，不应该全部放在一个Effect中，也就是说在多个数据没有任何关系的时候，你应该考虑将他们拆分成多个Effect

来自官网的简介：如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。