Question

我是React Native的新手，并且我打算使用react挂钩。但是，为了使用挂钩，我需要实现功能组件而不是类组件。那么它们之间的主要区别是什么。

Answer 1

类组件

类组件是 JavaScript ES2015 类，它们从React扩展了一个名为 Component

的基类。

class App extends Component {
    render () {
        return (
            <Text>Hello World!</Text>
        )
    }
}

这使类 App 可以访问React生命周期方法，例如来自父级的渲染以及状态/道具功能。

功能组件

功能组件更简单。他们无法管理自己的状态，也无法访问React Native提供的生命周期方法。它们实际上是普通的旧JavaScript函数。它们也被称为无状态组件。

const PageOne = () => {
    return (
       <Text>Hello World!</Text>
    );
}

结论

类组件用作容器组件，以处理状态管理和包装子组件。功能组件通常仅用于显示目的-这些组件从父组件调用函数以处理用户交互或状态更新。

Answer 2

功能组件是您无法访问任何生命周期方法（甚至本地状态）的组件。它的第一个纯函数。

在基于类的组件中，您可以访问生命周期，例如componentDidMount，并且可以为该特定类使用local state。

最近dan abramov引入了react hooks，它们是功能组件，但是可以使用生命周期方法。

此链接react-hooks通过将基于React类的组件与react钩子进行比较来详细说明。

希望有帮助。毫无疑问

Answer 3

最明显的区别是语法。功能组件只是一个普通的JavaScript函数，它接受props作为参数并返回React元素。

类组件用作容器组件，以处理状态管理和包装子组件。功能组件通常仅用于显示目的-这些组件从父组件调用函数以处理用户交互或状态更新。

功能组件更易于阅读和测试，因为它们是没有状态或生命周期的普通JavaScript函数最终减少了代码量。它们可以帮助您使用最佳实践。
1. 将容器和演示组件分开将变得更加容易因为如果您需要进一步考虑组件的状态无权访问组件中的setState（）React团队提到功能可能会提高性能未来的React版本中的组件

java脚本功能

function Test (props) {
  return <h1>Hello, {props.name}</h1>;
}

类函数

class Test extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}