Реактивы по умолчанию для компонентов компонента по умолчанию по умолчанию

Ответ 1

Вообще (ES6) второй способ лучше.

В конкретном (в контексте React) первое лучше, так как это основная фаза в жизненном цикле компонента, а именно фаза инициализации.

Помните, ReactJS был изобретен до ES6.

Ответ 2

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

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

const Component = ({ prop1 = {my:'prop'}, prop2 = ['My Prop'], prop3 = ()=>{} }) => {(
  <div>Hello</div>
)}

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

Как правило, лучше по умолчанию создавать объекты проп по умолчанию, например.

const Component = ({prop1, prop2, prop3 }) => (
  <div>Hello</div>
)

Component.defaultProps = {
  prop1: {my:'prop'},
  prop2: ['My Prop'],
  prop3: ()=>{}
}

или же

const defaultProps = {
  prop1: {my:'prop'},
  prop2: ['My Prop'],
  prop3: ()=>{}
}
const Component = ({
  prop1 = defaultProps.prop1,
  prop2 = defaultProps.prop2
  prop3 = defaultProps.prop3
 }) => (
  <div>Hello</div>
)

Ответ 3

Бесстыдный плагин здесь, я автор with-default-props.

Если вы пользователь TypeScript, вам может помочь with-default-props, который использует функцию более высокого порядка, чтобы обеспечить правильное определение компонента с заданным defaultProps.

Например.

import { withDefaultProps } from 'with-default-props'

type Props = {
    text: string;
    onClick: () => void;
};

function Component(props: Props) {
    return <div onClick={props.onClick}>{props.text}</div>;
}

// 'onClick' is optional now.
const Wrapped = withDefaultProps(Component, { onClick: () => {} })


function App1() {
    // ✅
    return <Wrapped text="hello"></Wrapped>
}

function App2() {
    // ✅
    return <Wrapped text="hello" onClick={() => {}}></Wrapped>
}

function App3() {
    // ❌
    // Error: 'text' is missing!
    return <Wrapped onClick={() => {}}></Wrapped>
}

Ответ 4

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

Ответ 5

Чтобы устранить некоторую путаницу здесь:

Синтаксис "Параметры по умолчанию" недействителен.

Единственный способ, которым параметр по умолчанию ES6 будет удаленно применим к функциональным компонентам React, будет

const Component = (props = { prop : 'Don't ever do this' }) {
    ...
}

Это будет инициализировать undefined аргумент props, который никогда не произойдет, потому что React предоставит null объект props, когда вы не определите props.

Если это произойдет, он заменит все реквизиты только тогда, когда они не заданы, что совершенно не то, что делают реквизиты React по умолчанию, то есть предоставит значения по умолчанию для каждого реквизита независимо.