Reactにおけるアロー関数と通常の関数の使い分け

この記事を書いている人物は、アロー関数を本質的に理解していない気がするなあと思いながら読んでほしい

本題

function App() {
    return (
        <>
            <h1>aiueo</h1>
        </>
    );
}
export default App;

const App = () => {
    return (
        <>
            <h1>aiueo</h1>
        </>
    );
};
export default App;

なぜ使い分けるのか

thisの扱いが違うから。

//アロー関数コンポーネント
const App = () => {
    return <h1>aiueo</h1>;
};
export default App;

//通常の関数コンポーネント
function App(){
    return <h1>aiueo</h1>;
};
export default

挙動は一緒ですが、this の扱いが変わります

まず1つ目

• 関数コンポーネントではthisを使わない
• アロー関数でも通常関数でもthisの差は存在しない
  「良かったー！！！安心！！！」

次に2つ目

• イベントハンドラを定義するとき

//アロー関数
const App = () => {
    const handleClick = () =>consle.log("clicked");
    retrun <button onClick={habdleClick}>Click</button>;
};

//通常の関数
function App(){
    function handleCklick(){
        console.log("clicked");
    }
    return <button onClick={handleClick}>Click</buton>
}

これも挙動やthisに差は出ません
「良かったー！！！安心！！！」

最後3つ目

// 通常の関数
function normalFunc() {
  console.log("normalFunc this:", this);
}

// アロー関数
const arrowFunc = () => {
  console.log("arrowFunc this:", this);
};

const obj = { test: normalFunc, testArrow: arrowFunc };

obj.test();   //objがthisになる    
obj.testArrow();　//外側の this (ここではundefined) になる

export default normalFunc;

これをするとどうなるでしょうか。

export文をnormalFuncからarrowFuncに変えてみましょう

/ 通常の関数
function normalFunc() {
 console.log("normalFunc this:", this);
}

// アロー関数
const arrowFunc = () => {
 console.log("arrowFunc this:", this);
};

const obj = { test: normalFunc, testArrow: arrowFunc };

obj.test(); // obj が this になる
obj.testArrow(); // 外側の this (ここではundefined) になる

export default arrowFunc;

すると

こうなり、通常の関数は obj.normalFunc()のように呼びだすとthisはobjになります。

もう一方のアロー関数では、自分自身の this を持たず、外側のスコープの this を引き継ぐ 特徴があります。モジュールのトップレベルで書いている場合、this は undefined（strict mode） になります。（モジュールとはavaScript のプログラムをファイルごとに分割した単位のこと）

ちなみに、アロー関数で書くか通常の関数で書くかは企業やチームに合わせるのが良いそうです。

以上となります。
ここまで読んでいただきありがとうございました。