Блог

Сборник рассказов рекомендует технику создания копии функции:

 const Template = args => <Task {...args} />;
export const Default = Template.bind({});
 

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

Полный соответствующий код из предоставленной вами ссылки:

 import React from 'react';

import Task from './Task';

export default {
  component: Task,
  title: 'Task',
};

const Template = args => <Task {...args} />;

export const Default = Template.bind({});
Default.args = {
  task: {
    id: '1',
    title: 'Test Task',
    state: 'TASK_INBOX',
    updatedAt: new Date(2018, 0, 1, 9, 0),
  },
};

export const Pinned = Template.bind({});
Pinned.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_PINNED',
  },
};
 

Использование Template.bind({}) позволяет определять дополнительные элементы, такие как Default.args = {...} , по-разному в каждой копии и в оригинале (здесь не используется).

Редактировать

Как уже было сказано в документах по ссылке:

Template.bind({}) это стандартная техника JavaScript для создания копии функции. Мы используем эту технику, чтобы позволить каждой экспортируемой истории устанавливать свои собственные свойства, но использовать ту же реализацию.

Приведенный выше фрагмент кода используется bind() для функции со стрелкой:

 const Template = args => <Task {...args} />;
export const Default = Template.bind({});
 

Использование bind функции со стрелкой вообще не изменяет поведение функции со стрелкой, поскольку this функция со стрелкой всегда будет областью, в которой была определена функция со стрелкой.

MDN рекомендует не использовать bind в функциях со стрелками выражения функций MDN — Arrow: call, apply и bind

Методы call, apply и bind НЕ подходят для функций со стрелками — поскольку они были разработаны, чтобы позволить методам выполняться в разных областях — потому что функции со стрелками устанавливают «это» на основе области, в которой определена функция со стрелками.

 const arrowFn = () => {
  console.log('this.foo:', this.foo);
};

window.foo = 'window.foo';
const myObj = {
  foo: 'myObj.foo'
};

const boundFn = arrowFn.bind(myObj);

arrowFn();  // 'window.foo'
boundFn();  // 'window.foo' 

Поскольку bind невозможно изменить функцию со стрелкой, единственная полезная вещь bind , которую мы делаем в этом примере выше, — это создание новой функции-оболочки, которая может иметь свои собственные уникальные свойства.

Поэтому код из предоставленного примера:

 const Template = (...args) => {};
const Default = Template.bind({});
Default.args = {...};
 

может быть заменен на:

 const Template = (...args) => {};
Default = function () { Template(...arguments); }
Default.args = {...};
 

Преимущество этого второго шаблона в том, что он не используется bind нестандартным способом.