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

我读this和它说：React组件和React组件实例有什么区别？

当组件是单独道具纯粹的结果，没有状态时，组件可以写成纯函数避免了需要创建阵营组件实例。

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

他们是否一样？

编辑：

是什么Component和Component Instance之间的区别？
它们是如何相互关联的？
从概念上？
它们在计算机内存中的表现如何？表示有何不同？
什么是组件？什么是组件的实例？（在内存中）什么样的JS对象？
实例在什么意义上？面向对象的感觉？
确实每个组件都可以有（一个或多个）实例吗？
组件有多少个实例？
是否有意义的说，可以为每个反应组件创建一个实例？
如何创建反应组件实例以及如何创建组件？

原因问：

我想创建一个概念图的反应澄清的术语，以及它们如何相互关联的。

这里是一个草案：

来源

2016-11-04 jhegedus

这似乎相关但不回答问题：http://stackoverflow.com/questions/27112274/multiple-instances-of-same-react-component – jhegedus

简单而简单的是：无状态组件是一个没有得到类似'componentDidMount'和'componentWillReceiveProps'的生命周期事件;它实际上只是呈现你通过它的任何道具。如果您创建了一个扩展了'React.Component'的''类，那么您现在已经创建了一个可以访问生命周期事件的有状态组件。 – lux

经过一段时间的答案是 - 对我来说：它是在OO相同，组件是类/类型，组件实例是一个类型为“Component”的对象，就像在Java等... – jhegedus

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

class App extends React.Component{ 
    ... 
}

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

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

希望这解释了使用！

来源

2016-11-04 16:30:44

我明白了，但什么'Component'和'Component Instance'之间的区别是什么？它们如何与对方相关？概念上？什么是“组件”，什么是“组件”的实例？每个“组件”都可以有一个实例吗？一个'component'可以有多少个实例？说一个实例可以为一个/每个反应“组件”创建是否有意义？如何创建反应“组件”实例？如何表示一个实例，以及如何表示“组件”？ – jhegedus

我更新了问题。 – jhegedus

@jhegedus更新了答案！ –

要回答这个问题：

当组件是单独道具纯粹的结果，没有一个州，该组件可以写成纯函数避免了创建React组件实例的需要。

“React组件实例”仅使用类来实例化React组件。见下面的例子（ES6/JSX），其中包含两个道具和状态：

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

更新：像其他评论中提到，在这里具体有：使用无状态的组件时的性能优势......

由于没有国家或生命周期方法的担心，该阵营队计划以避免将来版本中不必要的检查和内存分配。

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

来源

2016-11-04 13:46:54 bradcush

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

回答

相关问题