揭秘React useEffect

下面是关于React的useEffect的快速解释！我的假设是你已经熟悉了React中类组件的工作方式，所以我将解释一下hooks的等价物是什么 🚀。

让我们直接说吧。

useEffect vs componentDidMount

在React中，使用的两种最常见的生命周期方法是 componentDidMount 和 componentDidUpdate。后者主要用于当你的属性与父体发生变化时，而子体必须响应更新。前者主要用于向服务器发出外部HTTP请求以获取数据。例如，你可以像这样从jsonplaceholder（免费的API工具）获取数据：

import React from 'React';

class App extends React {
  componentDidMount{
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json()) 
      .then(json => console.log(json))
    }
  }
}

它在组件挂载后获取数据，并将其记录到控制台，那么，在hooks中相当于什么呢？

让我们回顾一下，在hook的世界出现之前，我们有（现在仍然有）另一种写React的方法。“函数组件”或无状态组件，如：

const Footer = () => {
  return (
    <div>
     <h1>Dude, I'm a footer<h1>
    </div>
  )
}
export default Footer

你可以传递props，并在这些props中使用回调函数来修改父级的状态。

const Footer = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <button onClick={props.callback}>Callback Function</button>
    </div>
  )
}
export default Footer

当你编写React Hook时，你是在以上述函数风格编写组件，但通过“Hook”将其与类组件的强大功能结合在一起。

让我们回到带有 componentDidMount 的原始示例。这是用hooks编写的方式：

import {useEffect} from 'React';

const App = (props) => {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json()) 
      .then(json => console.log(json))
    }
  },[]);
}

这运行一次。我们在末尾指定 [] 以表示它只运行一次。

useEffect vs ComponentDidUpdate

上面最后一个参数 [] 实际上是控制 useEffect 代码被运行的频率。那么，如何将其转化为 componentDidUpdate 呢？

componentDidUpdate 的一种常见用例是从父组件更改了prop产生了副作用。

这是一个例子：

import react from "React";

class App extends React {
 componentDidUpdate(previousProps){
  if(previousProps.visible !== this.props.visible) {
    // execute changes
  } 
}

我们在这里所做的是检查当前传入的 this.props 是否已从 previousProps 更改。如果 prop.visible 确实发生了更改，请执行代码更改。

Hook上的等价是什么？

import {useEffect} from "React";

const App = (props) => {
 useEffect(()=> {
  // execute changes
 }, [props.visible]);
}

[props.visible] 充当各种观察者，以指定useEffect应该何时运行。在这种情况下，仅当 props.visible 被修改时。

useEffect vs componentDidMount/componentDidUpdate

就像最后一个注释一样，如果你在 useEffect 的最后一个参数中未指定任何内容

import {useEffect} from "React";

const App = (props) => {
 useEffect(()=> {
   // 这基本上是componentDidMount + componentDidUpdate的组合
   // 它在componentDidMount上执行一次，并且在任何状态变量从useState更新时执行
 });
}

实际上，你已经将 componentDidMount 和 componentDidUpdate 全部结合在一起。

来源：www.vincentntang.com，作者：vincentntang，翻译：公众号《前端全栈开发者》