Зачем создавать контексты, а не просто экспортировать объекты? - PullRequest
Новая
       2

Зачем создавать контексты, а не просто экспортировать объекты?

1 голос
/ 01 мая 2019

Итак, я хочу избежать глубокого вложения реквизита, и я начал использовать контекст React для этого, но потом мне пришло в голову «почему я просто не экспортирую объекты вместо этого?»

Например, вместо записи: 

const handleClick: = event => {
  event.preventDefault();
  doSomething();
};
const calcPrice = (quantity) = {
  return quantity * 100
};
export const ComponentContext = createContext({});

export const ParentComponent = () => {
  return (
    <ComponentContext.Provider value={{ handleClick, calcPrice }}>
      <ChildComponent quantity={12} />
    </ComponentContext.Provider>

}

И импортируйте его как: 

export const ChildComponent = (quantity) = {
  const { handleClick, calcPrice } = useContext(ComponentContext);
  const totalPrice = calcPrice(quantity);
  return <button onClick={handleClick}>Total is ${totalPrice}</button>
}

Я мог бы вместо этого просто написать это как: 

const handleClick: = event => {
  event.preventDefault();
  doSomething();
};
const calcPrice = (quantity) = {
  return quantity * 100
};
export const componentProps = { handleClick, calcPrice };

export const ParentComponent = () => {
  return <ChildComponent quantity={12} />
}

И импортировать его как: 

const { handleSignUpClick, calcPrice } = componentProps;
export const ChildComponent = (quantity) = {
  const totalPrice = calcPrice(quantity);
  return <button onClick={handleClick}>Total is ${totalPrice}</button>
}

В чем преимущество работы с контекстом, а не с функциями?

1 Ответ

1 голос
/ 24 мая 2019

Кажется, что в вашем примере вы просто экспортируете некоторые вспомогательные функции.И в этом случае использования не может быть никакой разницы между экспортом объекта (с этими функциями) и использованием хука useContext().

https://reactjs.org/docs/hooks-reference.html#usecontext

Но из Реагируя на DOCs (ссылка выше), мы получаем, что:

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

Как бы вы этого достигли (перерисовка потребителей), используя экспортируемый объект?

С родительской точки зрения всеэто может вызвать повторную визуализацию дочернего компонента, когда вы визуализируете его с другим props объектом.И как то, что вы экспортировали, что живет за пределами функции компонента (поскольку вы не можете экспортировать локальные переменные функции и «методы»), сможет изменить объект props, созданный внутри области действия функции компонента?

TLDR:

Основное отличие состоит в том, что вы не можете вызвать повторный рендеринг дочерних объектов с экспортированным объектом.По крайней мере, не без полного анти-паттерна React.

Представьте, что у вас есть ParentComponent, который отображает два дорогих дочерних компонента, для которых вы хотите выбрать. И для этого вы будете использовать React.memo(), поэтому вы будете перерисовывать только те дочерние компоненты, если их props изменится.

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

Пример SandBox: https://vq30v.codesandbox.io/

ParentComponent.js 

import React, { useState } from "react";
import SomeContext from "./SomeContext";
import ExpensiveChildComponent from "./ExpensiveChildComponent";
import ExpensiveChildComponentExport from "./ExpensiveChildComponentExport";

let count = null; // VARIABLE THAT WILL BE EXPORTED
console.log("Outside ParentComponent...");

function ParentComponent() {
  const [myState, setMyState] = useState(0);

  console.log("Rendering Parent Component...");
  count = myState; // UPDATING THE EXPORTED VARIABLE

  function handleClick() {
    setMyState(prevState => prevState + 1);
  }

  // SETTING UP CONTEXT PROVIDER
  return (
    <div>
      <SomeContext.Provider value={myState}>
        <button onClick={handleClick}>Count</button>
        <h3>Uses Context</h3>
        <ExpensiveChildComponent />
        <h3>Uses Exported Object</h3>
        <ExpensiveChildComponentExport />
      </SomeContext.Provider>
    </div>
  );
}

console.log("After ParentComponent declaration...");

export { ParentComponent, count }; // EXPORTING COMPONENT AND VARIABLE

ExорогоChildComponent.js (использует контекст) 

import React, { useContext } from "react";
import SomeContext from "./SomeContext";

// REACT MEMO WILL ONLY UPDATE IF PROPS OR CONTEXT HAS CHANGED
const ExpensiveChildComponent = React.memo(function ExpensiveChildComponent() {
  console.log("Rendering ExpensiveChildComponent...");
  const context = useContext(SomeContext);
  return <div>{context}</div>;
});

export default ExpensiveChildComponent;

ExорогоChildComponentExport.js (использует экспортированное свойство) 

import React from "react";
import { count } from "./ParentComponent"; // IMPORTING THE EXPORTED VARIABLE

console.log("Outside ExpensiveChildComponentExport...");

// REACT MEMO WILL ONLY UPDATE IF PROPS OR CONTEXT HAS CHANGED (AND BOTH ARE NOT BEING USED)
const ExpensiveChildComponentExport = React.memo(
  function ChildComponentExport() {
    console.log("Rendering ExpensiveChildComponentExport...");
    return (
      <React.Fragment>
        <div>{count}</div>
      </React.Fragment>
    );
  }
);

export default ExpensiveChildComponentExport;

РЕЗУЛЬТАТ:

enter image description here

ПРИМЕЧАНИЕ:

Если вы удалите React.memo из ExpensiveChildComponentExport, он будет перерисован, потому что React создает новый объект props на каждомrender (это будет пустой объект, но каждый раз он будет другим).Вот почему я добавил React.memo(), потому что он будет выполнять поверхностное сравнение с props объектом.Итак, я могу проиллюстрировать поведение, которое useContext имеет, а простой экспортируемый объект - нет.

...