React中useEffect hook的用法小结（二）

接上篇

在上一篇中，我们知道useEffect在页面第一次渲染和更新之后都会执行。于是我找来一个useEffect的实例试了一下，学习视频来源：https://www.youtube.com/watch?v=0ZJgIjIuY7U

视频中，我们假设有三个buttons，点击不同的button，标题都会随之改变。

1.我们首先引入useState函数，并设定初始值（状态）为posts；

2.然后为了实现每次点击不同的button，页面都要更新并渲染的机制，我们引入useEffect函数，并将其中的一个参数设定为resourceType，即函数的因变量，用以实现每次改变resourceType时，执行useEffect函数体（同样如果其中一个参数为空数组，那么代表我们无论改变什么，都不会进入useEffect函数体）；

3.为了进一步验证这个现象，我们在函数内部分别引入两个console.log,如果能够正确打印出来，说明页面也可以正确实现渲染和更新，如上图：

但是我发现又有了一个新问题，就是render居然被打印了两次，也就是被渲染了两次。于是我搜了一下这个问题，发现是React严格模式搞的鬼！！！我在index.js中去掉严格模式就没有这个问题啦

=>官方文档：

• React 16.3: 引入了 <React.StrictMode>，用于启用严格模式。它帮助开发者在开发环境下发现潜在问题，并鼓励使用一些最佳实践。
• 在严格模式下，React 的开发环境会刻意执行两次渲染，用于突出显示潜在问题。

• StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

  严格模式检查仅在开发模式下运行；它们不会影响生产构建。

  你可以将整个应用程序或者部分组件包裹在 <React.StrictMode> 标签中，来启用严格模式

如下图：

严格模式会执行以下检查和优化：

1. 检测过时的生命周期方法：React 在未来版本中可能会移除一些过时的生命周期方法。严格模式会在开发中给出警告，帮助你更早地发现和更新你的代码。
2. 检测不安全的生命周期方法：在未来的 React 版本中，某些生命周期方法可能会在异步渲染模式下不再保证同步调用。严格模式下，如果你在 render 方法中使用了 setState，会收到一个警告。
3. 检测废弃的 context API 使用：严格模式会检查是否存在使用过时的 context API。
4. 检测副作用：严格模式会在渲染两次组件并比较结果后，触发额外的渲染以帮助你检测潜在的副作用问题。
5. 弃用 findDOMNode 的警告：React 17 已经不再支持在严格模式下使用 findDOMNode，会在开发环境中给出警告。

4.以上的问题解决了,接下来我们试着在useEffect函数体内加一些API：

JSONPlaceholder - Free Fake REST API

从以上的网站上找到个mock用的API

复制进useEffect()函数体内，根据我们自己的项目修改下API：

import React, { useState, useEffect } from 'react';
import './style.css';

function App() {
  const [resourceType, setResourceType] = useState('posts');

  console.log('render');

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/${resourceType}`)
      .then((response) => response.json())
      .then((json) => console.log(json));
  }, [resourceType]);

  return (
    <>
      <div>
        <button onClick={() => setResourceType('posts')}>Posts</button>
        <button onClick={() => setResourceType('users')}>Users</button>
        <button onClick={() => setResourceType('comments')}>Comments</button>
      </div>
      <h1>{resourceType}</h1>
    </>
  );
}

export default App;

假设初次渲染，控制台中是这样显示的

然后我们做一些改动，让这些Object以字符串的形式渲染到页面上；

未完待续...