reactjs - React 组件和 React 组件实例有什么区别？

Question

我正在阅读this它说:

When a component is purely a result of props alone, no state, the component can be written as a pure function avoiding the need to create a React component instance.

组件和组件实例有什么区别？

它们是一样的吗？

编辑:

• 组件和组件实例之间有什么区别？

• 他们之间有什么关系？

• 概念上？

• 它们在计算机内存中是如何表示的？表示有何不同？

• 什么是组件以及该组件的实例是什么？ (在内存中。)什么样的 JS 对象？

• 什么意义上的实例？面向对象的意义？

• 每个组件都可以有(一个或多个)实例吗？

• 一个组件可以有多少个实例？

• 说可以为每个 React 组件创建一个实例是否有意义？

• 如何创建 React 组件实例以及如何创建组件？

询问原因:

我正在尝试创建一个 React 概念图来阐明术语以及它们之间的关系。

这是草稿:

Answer 1

基本的区别是，当它是一个 Component 时，React 将运行/添加其所有 Lifecycle methods 。当您的组件中有 state 时，这将很有用。当您使用此组件时，React 将创建一个 React 组件实例，其中将添加所有生命周期方法和其他 Hook 。

class App extends React.Component{
  ...
}

在某些情况下，您不会使用状态。在这些情况下，添加所有这些生命周期方法是不必要的。因此，React 为您提供了一种创建单独渲染组件的方法。它被称为PureComponent。当您使用它时，不需要创建新的组件实例，因为这里没有生命周期方法。它只是一个可以接受 props 并返回 React Elements 的函数。

class App extends React.PureComponent{
   ...
}

希望这有帮助!

[更新]

什么是组件和组件实例？

从技术上讲，React 中的组件是一个类或函数。

示例:

class App extends React.Component{
...
}

//stateless component
const App = (props) => {
...
}

当您使用该组件时，它将被实例化，更像new App()。但是，React 本身以不同的方式做到这一点。

例如:

render(){
   return <App/> //Instance of the component App
}

实例是必需的，因为每个实例都可以单独执行。实例是原始类的副本。

简单的答案是，组件将是一个类，组件实例将是该类的副本/实例，并且将用于渲染

希望这能解释!