React componet應該寫成純函數

Question

這是我的ReactJs組件代碼：

import React from 'react';

     class App extends React.Component {

        render() {
            return (
                <div className="wrapper">
                    <h1>Welcome to App!!!!</h1>
                </div>
                );
        }
     }

    export default App;

Linting向我顯示以下錯誤：

 error  Component should be written as a pure function  react/prefer-stateless-function

如何將其寫為純函數以避免此錯誤？

Answer 1

像這樣：

import React from 'react';

const App = () => {
   return (
     <div className="wrapper">
          <h1>Welcome to App!!!!</h1>
     </div>
   );
}

export default App;

不需要保持狀態的組件稱為“無狀態”，通常被認為是最佳實踐，除非您需要保持狀態。

Answer 2

一個簡單的函數就足夠了，你不需要一個完整的類（它應該只用於有狀態組件）。 您可以將代碼減少到

import React from 'react';

export default const App = () => (
  <div className="wrapper">
    <h1>Welcome to App!!!!</h1>
  </div>
);

要么

import React from 'react';

export default function App() {
  return (
    <div className="wrapper">
      <h1>Welcome to App!!!!</h1>
    </div>
  );
}

Answer 3

寫這樣：

import React from 'react';

var App = () => {
    return (
        <div className="wrapper">
            <h1>Welcome to App!!!!</h1>
        </div>
    );
}

export default App;

原因是：您沒有在此使用狀態或任何生命周期方法，因此您可以將其設置為純函數。 它基本上被稱為Stateless Functional Component 。

查看文檔了解更多詳細信息。

Answer 4

import React from 'react';

 const App = (props) => (
   <div className="wrapper">
     <h1>Welcome to App!!!!</h1>
   </div>
 );

export default App;