类组件和函数组件有什么区别 - React Native答案

【问题标题】：what is the different between class component and function component - React Native类组件和函数组件有什么区别 - React Native
【发布时间】：2020-03-02 11:29:16
【问题描述】：

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

【问题讨论】：

标签： function react-native class

【解决方案1】：

类组件

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

的基类

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

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

功能组件

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

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

结论

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

Refer

【讨论】：

【解决方案2】：

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

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

最近 dan abramov 介绍了 react hooks，它们是功能组件，但可以访问 react 生命周期方法。

此链接react-hooks 通过比较基于 React 类的组件和 React 钩子来详细解释。

希望有所帮助。如有疑问，请随意

【讨论】：

【解决方案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>;
  }
}

【讨论】：