React Native新手技术疑问：const与函数的区别、两种函数写法的差异及调用方式、useState解构语法解析

Hey there! Let's break down your React Native questions clearly since you're just getting started—happy to help clarify these points!

1. Are the two code snippets identical, and how do I call them when the app starts? #

These two snippets do not mean the same thing—they’re different types of code structures entirely:

• The first snippet is a functional component (arrow function variant):

  const Hello = () => { return ( <div>hello</div> ) }
  

  This is a standalone React component that you can render like any other component. Quick note: In React Native, we don’t use <div> (that’s for web React)—you’d use <Text> instead for text content.

  To render this when your app starts, just include it in your root component’s JSX:

  import React from 'react';
  import { View, Text } from 'react-native';
  
  const Hello = () => {
    return <Text>hello</Text>;
  };
  
  const App = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Hello /> {/* This renders the Hello component on app launch */}
      </View>
    );
  };
  
  export default App;
  

• The second snippet is an incomplete class method:

  Hello() { return ( <div>Hello</div> ) }
  

  This code can’t exist on its own—it has to be inside a React class component. It’s a method that belongs to the class, not a standalone component. Here’s how you’d use it:

  import React, { Component } from 'react';
  import { View, Text } from 'react-native';
  
  class App extends Component {
    Hello() {
      return <Text>Hello</Text>;
    }
  
    render() {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          {this.Hello()} {/* Call the method inside render to show its output */}
        </View>
      );
    }
  }
  
  export default App;
  

  When the app starts, the render method runs, which calls this.Hello() and displays its returned content.

2. What does const [A, B] = useState() mean, and what’s the difference between const and function definitions? #

Let’s split this into two parts:

Understanding useState syntax #

useState is a React Hook that lets you add state to functional components. When you call it, it returns an array with two elements:

• A: This is the current value of your state. You can think of it as a variable that persists between component renders.
• B: This is the state updater function. You call this function to change the state value, which will trigger a re-render of your component with the new state.

Here’s a simple example using a counter:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
  // Initialize count state to 0; setCount is the function to update it
  const [count, setCount] = useState(0);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

Every time you tap the button, setCount updates the count state, and the component re-renders to show the new number.

const vs. function definitions #

const is a JavaScript keyword for declaring read-only variables, while "function definitions" refer to ways of creating functions (like function declarations, arrow functions, class methods). Here’s the key distinction:

• When you use const to declare a function (like const Hello = () => {} or const Hello = function() {}), you’re creating a function expression. The variable name (Hello) can’t be reassigned later, but the function’s internal logic can still be modified if it references mutable values.
• Function declarations (like function Hello() {}) are hoisted to the top of their scope—meaning you can call them before they’re defined in your code. const-declared function expressions don’t get this hoisting; you have to declare them before using them.
• Arrow functions (the () => {} syntax you used in your first snippet) don’t have their own this value—they inherit this from the surrounding scope. This is different from class methods or regular function declarations, which have their own this context.

内容的提问来源于stack exchange，提问作者Elly