Реагуйте на функціональні компоненти за замовчуванням проти параметрів за замовчуванням

У функціональному компоненті 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>
)    

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

Загалом (ES6) другий спосіб кращий.

У конкретному (в контексті React) перший є кращим, оскільки це основна фаза життєвого циклу компонента, а саме фаза ініціалізації.

Пам'ятайте, ReactJS був винайдений до ES6.

Безсоромний штекер тут, я є автором реквізиту за замовчуванням.

Якщо ви користувач TypeScript, з пропсом за замовчуванням вам може допомогти , який використовує функцію вищого порядку для забезпечення правильного визначення компонента із заданими 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>
}

По-перше, це може спричинити деякі важко налагоджувані проблеми з продуктивністю, особливо якщо ви використовуєте redux.

Якщо ви використовуєте об'єкти, списки чи функції, це будуть нові об'єкти на кожному візуалізації. Це може бути погано, якщо у вас є складні компоненти, які перевіряють ідентичність компонента, щоб побачити, чи слід робити рендерінг.

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

Зараз це працює нормально, але якщо у вас є більш складні компоненти та стан, такі як підключені компоненти response-redux із підключенням до бази даних та / або реакція useffect хуки та стан компонента, це може спричинити багато повторного відтворення.

Як правило, кращою практикою є створення об’єктів проп за замовчуванням, що створюються окремо, наприклад.

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>
)

Навіть, можливо, ви запитаєте, чому б не використовувати sth, як показано нижче, код props || valueзамість defaultProps:

class SomeComponent extends React.Component {
  render() {
    let data = this.props.data || {foo: 'bar'}
    return (
      <div>rendered</div>
    )
  }
}

// SomeComponent.defaultProps = {
//   data: {foo: 'bar'}
// };

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)

Але пам’ятайте, defaultPropsзробіть код більш читабельним, особливо якщо у вас є більше, propsа керування ними за допомогою ||оператора може зробити ваш код неприємним