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

Question

我正在读这个,它说:

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

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

它们是一样的吗？

编辑:

• Component和之间有什么区别Component Instance？

• 它们如何与彼此相关？

• 从概念上讲？

• 它们如何代表计算机内存？表示方式有何不同？

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

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

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

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

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

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

询问理由:

我正在尝试创建一个反应概念图,以澄清术语以及它们如何相互关联.

这是一个草案:

Answer 1

基本的区别是,当它是a时Component,React将运行/添加其所有生命周期方法.当您state在组件中时,这将非常有用.当您使用此组件时,React将创建一个React Component Instance将添加所有生命周期方法和其他挂钩的组件.

class App extends React.Component{
  ...
}

在某些情况下,您不会使用state.在这些情况下,添加所有这些生命周期方法是不必要的.因此,React为您提供了一种创建render单独组件的方法.它被称为PureComponent.使用它时,不需要创建新的,Component Instance因为这里没有生命周期方法.它只是一个可以接收props和返回React Elements 的函数.

class App extends React.PureComponent{
   ...
}

希望这可以帮助!

[更新]

什么是a Component和a Component Instance？

从技术上讲,ComponentReact中的a是a class或a 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 组件实例的需要。

“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

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

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

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