在 useEffect 钩子内或返回渲染之前“执行任务”之间的区别答案

【问题标题】：difference between "do tasks" inside an useEffect hook or before return render在 useEffect 钩子内或返回渲染之前“执行任务”之间的区别
【发布时间】：2021-01-19 05:31:00
【问题描述】：

我想知道在 useEffect 钩子内或在返回渲染之前“执行任务”有什么区别？

假设我作为道具发送的对象 {data} 在这两种情况下都是 { number1: 2, number2: 3 }

喜欢：


import React from "react";

export default ({ data }) => {
  let resultSum = 0;

  let number1 = data.number1;
  let number2 = data.number2;
  resultSum = number1 + number2;

  return <div>{resultSum}</div>;
};

或类似：



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

export default ({ data }) => {
  const [resultSum, setResultSum] = useState(0);

  useEffect(() => {
    let number1 = data.number1;
    let number2 = data.number2;
    setResultSum(number1 + number2);
  }, []);

  return <div>{resultSum}</div>;
};

在这两种情况下，页面都会将结果渲染为 5，并且在这两种情况下，任务都会在渲染页面之前处理...有什么区别？

谢谢

【问题讨论】：

标签： javascript reactjs react-native user-interface jsx

【解决方案1】：

主要区别在于，在第一种情况下，组件的第一次渲染直接返回值，并且不会自行重新渲染，因为没有状态更改。

在第二种情况下，第一次初始渲染的值为 0。

在第二种情况下，在返回之前执行console.log，您将注意。

useEffect 回调在您的组件挂载之后调用，但在第一次渲染之后。尽管您在视觉上看到的效果是相同的，但是当您打算在组件安装后立即进行一些初始处理时，您应该考虑使用 useEffect 方法，例如，从 API 获取一些数据。

在您的情况下，由于您只想根据道具进行一些计算（您的输出结果完全基于道具），您应该考虑直接返回它，所以这里最好使用第一种方法，因为您的组件是纯的（仅取决于道具）。

【讨论】：