Будет ли это считаться плохой практикой при использовании contexProvider без потребителя - PullRequest
Новая
       26

Будет ли это считаться плохой практикой при использовании contexProvider без потребителя

0 голосов
/ 05 июля 2019

enter image description here

Будет ли считаться плохой практикой использование contextProvider без потребителя.Как я сделал ниже.Я узнал, что это работает просто отлично.Не совсем уверен, что это правильный путь. 

// context
import React, { useState } from 'react'
import { storeProducts, detailProduct } from './assets/data'

const ProductContext = React.createContext()

const ProductProvider = (props) => {
  const [products, setProducts] = useState(storeProducts);
  const [productDetails, setProductDetails] = useState(detailProduct)
  console.log(products)
  return (
    <ProductContext.Provider value={{
      products,
      productDetails

    }}>
      {props.children}
    </ProductContext.Provider>
  )
}
const ProductConsumer = ProductContext.Consumer;
export { ProductProvider, ProductConsumer, ProductContext }

/// Context usage

import { ProductContext } from './context'
export default function ProductList() {
  const appContext = useContext(ProductContext)
  const { products } = appContext

  console.log(appContext)
  return (
    <div className="py-5">
      <div className="container">
        <Title name="Product" title="Store"></Title>
        <div className="row">
          {/* <ProductConsumer>
            {(product) => <{product}}
          </ProductConsumer> */}
          {products.map(p => {
            return <h1>{p.title}</h1>
          })}
        </div>
      </div>
    </div>

Он работает просто отлично, просто хотел знать, что это может привести к проблемам с побочными эффектами. Или, если это совершенно не рекомендуется и почему.

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Не похоже на что-то плохое, что вы делаете -

Ниже приведен способ использования значений с помощью useContext - 

import React, { useContext } from 'react';

// ...

function Display() {
  const value = useContext(NumberContext);
  return <div>The answer is {value}.</div>;
}

, который выглядит так, как вы это делаете.

«Единственное, на что вы хотите обратить внимание, - это на то, что вы должны передать весь контекстный объект в useContext, а не только в потребителя! React предупредит вас, если вы забудете, но попытаетесь запомнить, а?»- единственная разница между useContext крючком и Comsumer.

Подробнее об этом вы можете прочитать -

https://daveceddia.com/usecontext-hook/

0 голосов
/ 05 июля 2019

В отличие от компонентов класса, в функциональных компонентах есть другой способ использовать значение контекста с хуком useContext и является альтернативой написанию Consumer и последующему использованию шаблона рендера проп. 

export default function ProductList() {
  const appContext = useContext(ProductContext)
  const { products } = appContext

  console.log(appContext)
  return (
    <div className="py-5">
      <div className="container">
        <Title name="Product" title="Store"></Title>
        <div className="row">
          {products.map(p => {
            return <h1>{p.title}</h1>
          })}
        </div>
      </div>
    </div>
  )
}

Таким образом, отсутствие определения потребителя не означает, что у вас нет потребителя значения контекста

...