Question

我想知道useEffect挂钩内或返回render之前的“执行任务”有什么区别？

在两种情况下，假设我作为道具发送的对象{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，并且在两种情况下，任务均将在呈现页面之前进行处理...有什么区别？

谢谢

Answer 1

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

在第二种情况下，存在第一个初始渲染，其值为0。

在第二种情况下，就在退货前做console.log，您将注意它。

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

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

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

1 个答案: