Const =（）=> vs类函数function name（）{}在React Native中

Question

我是本机反应的新手，我有点困惑相关的组件。

当我创建第一个反应本机应用程序时，我看到App.js App.js中的组件是根据以下代码创建的：

export default function App() {
 ...
}

而且正如我所看到的教程，几乎所有人都按照以下代码制造组件：

const FirstComponents = () => {
  ...
}

我也对按以下代码创建的功能组件和类基础组件感到困惑：

export default class FirstComponents extends Components(){
 ...
}

函数和类基础组件之间有什么区别？

请提供实时示例给我答案会很好，您所给的时间将不胜感激

Answer 1

在javascript中，创建函数的方法有多种。例如：

function myFunction () {
//some action
}
const myFunction = () => {
//some action
}

这两个是函数，并且做相同的事情。

现在问题的第二部分是“基于功能的组件和基于类的组件之间有什么区别？”

过去用于控制state和生命周期方法（ComponentDidMount等）的基于类的组件。而且，如果您在组件或生命周期方法中未使用state，则应使用基于功能的组件。基本上，如果您的组件很小，只有一些UI内容，那么最好使用功能组件。但是，在React版本16.8中，React团队引入了hooks。

Hooks提供了与状态和组件生命周期方法相同的概念，以及更多其他内容。使用钩子，即使它们是功能部件，您也可以控制它们。

Answer 2

前两个摘要在声明方面相似。两者都是功能组件。这些不同于基于类的组件。有几个区别：

1. [Hooks只能在功能组件中使用，不能基于类。
2. 构造函数用于在类组件中初始化this，但在功能上您不需要this。
3. 生命周期挂钩在功能组件中不可用，它们是类组件的一部分。
4. 您可以将useEffect钩用于useEffect之类的生命周期钩。

作为简短示例：

componentDidMount

在上面的示例中，

function App(){

    const [count, setCount] = useState('');

}

是组件的本地状态属性，"count"是更新状态的方法。

setCount

在此类组件中，您可以看到状态在构造函数中定义，并且已通过

class App extends React.Component{
   constructor(props){
      super(props);
      this.state = { count: 0 };
      this.increaseCount = this.increaseCount.bind(this);
   }

   increaseCount(){
      this.setState({count: this.count+1});
   }
   // lifecycle methods like componentDidMount, componentDidUpdate etc.
   render(){
      return(
        <button onClick={this.increaseCounter}>INCR</button>
      );
   }

}

方法进行了更新。

_{实时示例实在太多了，我建议您举一些简单的示例来理解这些概念。}