React Native 组件中的函数（函数与常量函数）

Question

这可能非常简单，但我不太清楚如何搜索答案。

我刚刚注意到我的 React 本机组件中有一些函数，有时我用 const 声明，而另一些则不用，这似乎没有区别。

像这样

const MyComponent = (props) => {
 
     const myFunction = () => {
        console.log("Hello world");
     }
     return(
         <TouchableOpacity onPress={myFunction}>
            ...somestuff
         </TouchableOpacity>
     )
}

或

const MyComponent = (props) => {
 
     myFunction = () => {
        console.log("Hello world");
     }
     return(
         <TouchableOpacity onPress={myFunction}>
            ...somestuff
         </TouchableOpacity>
     )
}

就输出而言，我找不到它们之间的任何不同之处。这只是编译器保存我的 a*s 还是它们之间实际上有区别？

Answer 1

我认为在 React Native 中它并不重要，因为它的生命周期。但是在正常情况下javascript它在提升上有区别。没有 const 你可以调用一个没有被声明的函数：

doTheThing();


function doTheThing() {
   console.log(`This is awesome number ${getAwesome()}`)
}

function getAwesome() {
  return (+((Math.random() * 10000).toString().split('.')[0]))
}

使用 Const/let 它不会让你这样做:

 const tryDoTheThing = () => {
    console.log(`This is me trying to be awesome ${getAwesome()}`)
 }


 // "getAwesome is not defined", because it is referenced too early
 tryDoTheThing() // comment to see the rest work


 const getAwesome = () => (+((Math.random() * 10000).toString().split('.')[0]))


 const doTheThing = () => {
   console.log(`This is awesome! ${getAwesome()}`)
 }

 doTheThing() // prints

使用 function 会将它的声明放在当前范围的顶部（到当前脚本或当前函数的顶部）。

Answer 2

Javascript 不会阻止您使用未声明的变量。

x = 10; // This is completely fine, as it'll be added in global scope

为了避免这样做，一般使用use strict。

"use strict";
x = 10;       // This will cause an error because x is not declared

React Native 组件中的函数（函数与常量函数）

Functions in a React Native Component (function vs const function)

function

function-declaration

reactjs

react-native