В чем разница между компонентом React и экземпляром компонента React?

Question

Я читаю this и говорит:

Когда компонент является чисто результатом только реквизита, ни одно государство, то компонент может быть записан в виде чистой функции, избегая необходимости создать не компонент React пример.

В чем разница между компонентом и экземпляром компонента?

Одинаковые ли они?

EDIT:

• В чем разница между 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.

class App extends React.PureComponent{ 
    ... 
} 

Надеюсь, это поможет!

[Update]

Что такое Component и Component Instance?

Технически, Component в реактиве - class или function.

Пример:

class App extends React.Component{ 
... 
} 

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

При использовании, что component, это будет экземпляр, больше как new App(). Но, Реакт делает это сам по себе по-другому.

Например:

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

Экземпляры необходимы, поскольку каждый экземпляр может выполнять по отдельности. Экземпляры - это копия оригинального класса.

Простого ответ, components будет Class и component Instance будет копировать/экземпляр класса и будет использоваться в render

Надеется, что это объясняет!

Answer 2

Чтобы ответить на этот вопрос:

Когда компонент является чисто результатом только реквизита, ни одно государство, компонент не может быть записана в виде чистая функция, исключающая необходимость создания экземпляра компонента React.

Атрибут «React component instance» просто использует классы для создания экземпляра компонента 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 0.14. https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.yv0zxjxr5

Update: Как упоминались в некоторых других замечаниях и здесь конкретно там выигрыш в производительности при использовании апатридов компонентов ...

Поскольку нет никаких государственных или жизненного цикла методов беспокоиться о том, РЕАКТЕ планов команды чтобы избежать ненужных проверок и распределения памяти в будущих выпусках.

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