React Native 中的 Const = () => vs Class Functions function name() {}答案

【问题标题】：Const = () => vs Class Functions function name() {} in React NativeReact Native 中的 Const = () => vs Class Functions function name() {}
【发布时间】：2020-06-05 20:55:13
【问题描述】：

我是 react native 的新手，我对组件有点困惑。

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

export default function App() {
 ...
}

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

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

我也对根据以下代码创建的函数组件和基于类的组件感到困惑：

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

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

请用例子回答我。我们将不胜感激。

【问题讨论】：

对类和函数组件的简单搜索将产生数百万篇文章、SO 问题、教程、从类到函数的迁移方法......
@Amir-Mousavi 我搜索了它，但没有找到最佳解决方案，因为我知道有很多开发人员可以给我一些合乎逻辑的答案，如下所示

标签： reactjs react-native components

【解决方案1】：

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

Hooks 只能用于功能组件，不能用于基于类的组件。
构造函数用于在类组件中初始化this，但在函数中你不需要this。
生命周期挂钩在功能组件中不可用，它们是类组件的一部分。
您可以将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>
      );
   }

}

在这个类组件中，您可以看到在构造函数中定义了状态，并使用setState 方法对其进行了更新。

_{实时示例实在是太多了，建议大家先举个简单的例子来掌握概念。}

【讨论】：

【解决方案2】：

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

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

这两个是函数，做同样的事情。

现在您问题的第二部分是“函数式组件和基于类的组件有什么区别？”

过去用于控制state 和生命周期方法（ComponentDidMount 等...）的基于类的组件。如果您没有在组件或生命周期方法中使用state，您将使用基于函数的组件。基本上如果你有一个只有一些 UI 东西的小组件，最好使用功能组件。然而，随着 React 版本 16.8，React 团队引入了 hooks。

Hooks 为您的状态和组件生命周期方法等提供了相同的概念。使用钩子，您可以控制您的组件，即使它们是功能组件。

【讨论】：