时间戳

首页 > 解决方案 > 在 useEffect 挂钩内或返回渲染之前“执行任务”之间的区别

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

问题描述

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

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

谢谢

标签： javascriptreactjsreact-nativeuser-interfacejsx

解决方案

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

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

在第二种情况下，在返回之前做一个console.log，你会注意到它。

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

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

推荐阅读