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

В функциональном компоненте React, который лучше подходит для установки реквизитов по умолчанию, используя Component.defaultProps или используя параметры по умолчанию для определения функции, примеры:

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

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

Component.defaultProps = {
  prop1: false,
  prop2: 'My Prop',
}

Параметры по умолчанию:

const Component = ({ prop1 = false, prop2 = 'My Prop' }) => (
  <div></div>
)    

Ответ 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>
}

Ответ 5

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

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

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

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

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

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