在没有消费者的情况下使用 contexProvider 会被认为是不好的做法吗

Question

在没有消费者的情况下使用 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>

它工作得很好，只是想知道它可能会在 line.Or 下产生副作用问题，如果完全不鼓励它，为什么。

Answer 1

与 class 组件不同，在功能组件中，有一种不同的方法可以通过 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>
  )
}

因此，不定义消费者并不意味着您没有上下文值的消费者

Answer 2

你做的事情不像是坏事 -

以下是使用值的 useContext 方式 -

import React, { useContext } from 'react';

// ...

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

这看起来就像你做事的方式。

"The only thing you want to watch out for is that you have to pass the whole context object to useContext – not just the consumer! React will warn you if you forget, but try to rememeber, eh?" - 是 useContext 钩子和 Comsumer 之间的唯一区别。

有关详细信息，您可以阅读它 -

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

在没有消费者的情况下使用 contexProvider 会被认为是不好的做法吗

Will it be considered bad practice, using contexProvider without a consumer

reactjs

react-hooks