时间戳

首页 > 解决方案 > 使用常量操作道具与使用函数操作道具有什么区别？

javascript - 使用常量操作道具与使用函数操作道具有什么区别？

问题描述

在这种方法中，我正在检查是否propOne是偶数，然后将结果分配给一个常量。

import React from 'react';

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

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

在另一种方法中，我正在执行相同的逻辑（检查是否propOne为偶数），但不是将结果分配给常量，而是将其分配给函数。

import React from 'react';

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

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

除了必须使用isEven()而不是 just的明显区别之外isEven，这两种方法之间有什么区别？

标签： javascriptreactjsfrontend

解决方案

考虑到这是一个功能组件，应该没有任何区别。（这意味着使用该函数会增加少量的冗长而无济于事。）

但请注意，如果类组件被isEven引用this.props.propOne并在（例如）渲染后一段时间调用的事件处理程序中使用，则类组件会有所不同 - 有关更多信息，请参阅Dan Abramov（React 开发人员之一）的这篇文章这个。

推荐阅读