React 功能组件中的方法答案

【问题标题】：Method within React functional componentReact 功能组件中的方法
【发布时间】：2019-08-08 00:13:52
【问题描述】：

您好，我必须在组件内添加一个方法，即无状态功能组件。现在我想知道它是否可以保持这样，或者它现在应该是一个类组件。我的组件：

const Pagination = ({ changePage }) => {
  function changePageNumber(event) {
    changePage(event.currentTarget.dataset.num);
  }
  return (
      <button
          className={css.button}
          data-num={num}
          onClick={changePageNumber}
        >
          {num}
        </button>
  );
};

可以这样吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

是的，您可以编写这样的方法。您也可以使用箭头函数，例如：

const Pagination = ({ changePage }) => {
  const changePageNumber = event => {
    changePage(event.currentTarget.dataset.num);
  }
  return (
    <button
        className={css.button}
        data-num={num}
        onClick={changePageNumber}
     >
       {num}
     </button>
  );
};

奖励：不必命名导出默认的组件，只需：

export default ({ changePage }) => {
...
}

在另一个文件中：

import AnyName from './Pagination'

【讨论】：

命名有助于调试，因为它被用于该功能的displayName。

【解决方案2】：

你可以改成这样

     const changePageNumber = (event) = () => {
        changePage(event.currentTarget.dataset.num);
      }
      const Pagination = ({ changePage }) => {

      return (
          <button
              className={css.button}
              data-num={num}
              onClick={changePageNumber}
            >
              {num}
            </button>
         );
      };

【讨论】：

为什么要这样？

【解决方案3】：

changePageNumber 是一个函数而不是一个方法。呆在那里完全没问题。它作为Pagination 组件的实用程序/帮助函数存在。可以部署此类功能以提高代码的可读性。您的代码的当前状态非常好。

另外你不需要把它变成类组件，当我们认为我们需要存储状态时使用它们，不存储方法。

【讨论】：

因为效率不好吗？和类组件中的render里面的函数不一样吗？
@heisenberg7584 在您的帖子的这个用例中，与性能/效率无关。
@ArupRakshit - 但不是这样吗 - 每次渲染组件时都会重新渲染功能组件中的函数，并且类中的组件方法可以存储在渲染方法之上，因此只会渲染组件并且方法参考是一样的，所以性能更好？
@jake-ferguson 当你有一个像changePageNumber 这样的函数时，性能不应该是一个方法或函数。所以要回答你，这真的取决于你现在拥有什么。 OP 考虑关注的方式并使其成为类组件，这不是他需要关注的。