Question

我正在阅读this并说：

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

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

它们是一样的吗？

编辑：

Component和Component Instance之间有什么区别？
它们如何与彼此相关？
从概念上讲？
它们如何代表计算机内存？表示方式有何不同？
什么是组件，该组件的实例是什么？（在内存中。）什么样的JS对象？
实例在什么意义上？面向对象意义？
每个组件都可以拥有（一个或多个）实例吗？
组件可以有多少个实例？
是否可以为一个/每个反应组件创建一个实例？
如何创建反应组件实例以及如何创建组件？

询问原因：

我正在尝试创建一个反应概念图，以澄清术语以及它们之间的相互关系。

这是草稿：

Answer 1

基本区别是，当它为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中使用

希望这能解释！

Answer 2

当一个组件纯粹是仅仅是props的结果，没有状态时，该组件可以被编写为纯函数，从而无需创建React组件实例。

A＆＃34; React组件实例＆＃34;只是使用类来实例化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组件在React 0.14中引入时的更多信息。 https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.yv0zxjxr5

更新：正如其他一些评论所述，使用无状态组件时会有性能优势......

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

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

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

2 个答案: