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

Question

我正在阅读this，上面写着：

当一个组件纯粹是 props 的结果，没有状态时， 组件可以写成一个纯函数，避免需要 创建一个 React 组件实例。

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

它们是一样的吗？

编辑：

• Component 和 Component Instance 有什么区别？

• 它们之间的关系如何？

• 在概念上？

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

• 什么是组件，什么是该组件的实例？ （在内存中。）什么样的 JS 对象？

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

• 每个组件都可以有（一个或多个）实例是真的吗？

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

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

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

询问原因：

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

这是草稿：

Answer 1

当一个组件纯粹是 props 的结果，没有状态时，组件可以写成纯函数，避免创建 React 组件实例。

“React 组件实例”只是使用类来实例化 React 组件。请参阅下面的示例（es6/JSX），其中包含 props 和 state：

class MyComponentInstance extends React.Component {
    constructor(props) {
        super(props);
        // set initial state
        this.state = {
            example: 'example'
        };
    }
    render() {
        return <div>
            <div>{this.state.example}</div>
            <div>{this.props.example}</div>
        </div>;
    }
}

如果您的组件中不需要状态，您可以使用纯无状态的函数式反应组件，如下所示：

function MyStatelessFunctionalComponent(props) {
    return <div>{this.props.example}</div>;
}

这里是关于 React 0.14 中引入的无状态 React 组件的更多信息。 https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.yv0zxjxr5

更新：正如其他一些 cmets 中提到的，使用无状态组件有性能优势...

由于无需担心状态或生命周期方法，React 团队计划在未来的版本中避免不必要的检查和内存分配。

https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.ttiirkcf4

Answer 2

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

class App extends React.Component{
  ...
}

在某些情况下，您不会使用state。在这些情况下，添加所有这些生命周期方法是不必要的。因此，React 为您提供了一种创建组件的方法，该组件将仅具有 render。它被称为PureComponent。当你使用这个时，不需要创建一个新的Component Instance，因为这里没有生命周期方法。它只是一个可以接受 props 并返回 React Elements 的函数。

class App extends React.PureComponent{
   ...
}

希望这会有所帮助！

[更新]

什么是Component 和Component Instance？

从技术上讲，React 中的 Component 是 class 或 function。

例子：

class App extends React.Component{
...
}

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

当您使用component 时，它将被实例化，更像new App()。但是，React 以不同的方式自行完成。

例如：

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

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

简单的答案是，components 将是 Class，component Instance 将是类的副本/实例，并将用于 render

希望这可以解释！