Функциональный компонент реагирует против React.Component при использовании propTypes

Question

Реагировать 0.14 введены чистые функции в качестве компонентов, как это:

export const Label = ({title} => (
    <span>{label}</span> 
) 

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

Так что я должен добавить

Label.propTypes = { 
    title: React.PropTypes.string.isRequired 
} 

Label.defaultProps = { 
    title: "unknown" 
} 

Я мог бы также просто использовать React.Component так:

class Label extends React.Component { 
    static propTypes = {} 
    static defaultProps = { 
    title: "unknown" 
    } 
    render() { 
     <span>{this.props.label}</span> 
    } 
} 

Все было бы сразу видно, и компонент понятно.

Почему мы должны использовать функциональные компоненты?

Answer 1

Причины я вижу, чтобы использовать функциональные компоненты даже в вашем случае:

• Нет ES6 или Реагировать магию компонентов масштаба, поэтому выход JS намного короче.
• Очистительное отделение. У вас есть функция, которая возвращает презентационный компонент. Данные «мета», такие как реквизиты по умолчанию, разделяются как компоненты ES6.
• Как указано в док, React хотел бы предоставить специальные оптимизации функциональных компонентов, так что может быть лучше производительность мудрым в будущем использовать их, чем обычные компоненты для целей презентации:

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

Answer 2

Нет необходимости использовать компоненты чистой функции, причина, по которой они были созданы, заключалась в том, чтобы облегчить создание функциональных компонентов без состояния без необходимости расширения класса Component. Эта статья stateless-components-in-react подробно объясняет этот вопрос.

Answer 3

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

• Не нужно никакого внутреннего состояния
• не будет использоваться в качестве ref
• Не требует никакого поведения для всего жизненного цикла события, как componentDidMount или componenetWillReceiveProps

апатридов функциональных компонентов позволяет избежать чрезмерного шаблонного и церемонии, когда я t просто не нужно. Если вам нужны эти другие вещи, увеличьте класс Component за нормальный.

От React 0.14 blog post

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

Это отличная точка. Приложение должно состоять из множества мелких компонентов вместо нескольких больших сложных. Во многих случаях маленьким компонентам не нужны все колокола и свистки полномасштабного Component. Для них достаточно простой функции.