Нужно применять this и bind в объекте в React или не нужно?

Question

Прохожу курс по реакту на ютубе. В теме по redux создали файл state. в нем объект store, в котором объекты с массивами объектов внутри - набор данных. и методы, которые эти данные добавляют и выводят по нажатию кнопок. Я еще до начала урока по этой теме оформил свой объект store, как на скриншоте. Пробросил все props. Зарефакторил и все работает. А лектор в ролике сделал по другому: он наставил thisы практически везде. например в методе addNews - this.store... и так делее. Потом ему пришлось биндить bindом в index.js все эти методы. Я же не применял this и биндить мне не пришлось. И у меня все работает. Ошибок не выводит. Сообщения добавляются и выводятся потом в UI. Допускается ли делать, как сделал я? или все-таки надо делать, как автор показывает?

Сначала мой идет index.js Затем store и index.js лектора

Answer 1

Разницы вообще нет. Js сам установит контест для функции, которая объявлена внутри объекта. Как пример, вот код:

const obj = {
    name: "Name",
    addSurname() {
        this.name += " Surname";
        return this;
    }
    
};

console.log({...obj});
obj.addSurname();
console.log({...obj});

-> Logs
{name: 'Name', addSurname: ƒ}
{name: 'Name Surname', addSurname: ƒ}

Поэтому использовать this или прямой доступ к переменно зависит от ситуации. Например, когда ты знаешь, что у каждого объекта, который ты передашь в функцию, есть своя функция с одноименным названием, то используй this.

Пример:

function add() {
    this.step += 1;
    return this;
};

const obj1 = {
    step: 1
};
const obj2 = {
    step: 8,
    b: 1
};
const obj3 = {
    step: 5,
    c: 1,
    
};

const goStep = (state) => {
    add.call(state);
    console.log({...state});
};

[obj1, obj2, obj3].map(goStep)
->>
{step: 2}
{step: 9, b: 1}
{step: 6, c: 1}

БЛОГ НА HUSL

Нужно применять this и bind в объекте в React или не нужно?

Ответы (1 шт):