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>

它工作得很好，只是想知道这可能会带来副作用，或者是完全不鼓励使用它，为什么。

Answer 1

与类组件不同，在功能组件中，还有一种使用useContext钩子来使用上下文值的方法，并且是编写Consumer然后使用render prop模式的一种替代方法。

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>;
}

这似乎是您执行操作的方式。

“您唯一需要注意的是，您必须将整个上下文对象传递给useContext –不仅是使用者！如果您忘记了，React会警告您，但是要记住，是吗？” -是useContext钩子和Comsumer之间的唯一区别。

有关更多详细信息，请阅读-

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

在没有使用者的情况下使用contexProvider是否会被视为不良做法

2 个答案: