使用常量操作道具與使用 function 操作道具有什么區別？

Question

在這種方法中，我正在檢查propOne是否是偶數，然后將結果分配給一個常量。

import React from 'react';

const TestComponent = ({ propOne }) => {
    const isEven = propOne % 2 === 0

    return (
        <div>
            {`Is even? ${isEven ? 'Yes' : 'No'}`}
        </div>
    );
};

在另一種方法中，我正在執行相同的邏輯（檢查propOne是否為偶數），但不是將結果分配給常量，而是將其分配給 function。

import React from 'react';

const TestComponent = ({ propOne }) => {
    const isEven = () => propOne % 2 === 0

    return (
        <div>
            {`Is even? ${isEven() ? 'Yes' : 'No'}`}
        </div>
    );
};

除了必須使用isEven()而不是isEven的明顯區別之外，這兩種方法之間有什么區別？

Answer 1

function 方法將在您每次訪問時重新計算表達式。 在這種特定情況下，我看不到很多好處，因為如果propOne發生更改，無論如何都會導致重新渲染。

基於此特定示例，僅 go 與非功能包裝器版本

Answer 2

考慮到這是一個 function 組件，應該沒有任何區別。 （這意味着使用 function 會增加少量的冗長而無濟於事。）

但請注意 class 組件會有所不同，如果isEven引用this.props.propOne並用於（例如）在渲染后一段時間調用的事件處理程序 - 請參閱 Dan Abramov 的這篇文章（其中一個React 開發人員）了解更多信息。