Reactjs 什么时候在函数中定义组件？（反应钩）

假设我有一个呈现列表项的组件：

const ListItem = ({ itemName }) => {
  return (
    <div>
      {itemName}
    </div>
  )
}

const ListItem=（{itemName}）=>{
返回(
{itemName}
)
}

由于此列表项在我的应用程序中的许多地方都使用，因此我定义了一个自定义挂钩来呈现列表并控制每个列表实例的行为：

const useListItems = () => {
  const [ showList, setShowList ] = useState(true)
  const { listItemArray, isLoaded } = useListContext() // Context makes api call
  
  const toggleShowList = setShowList(!showList)
  
  function renderListItems() {
    return isLoaded && !!listItemArray ? listItemArray.map((itemName, index) => (
      <ListItem key={index} isVisible={showList} itemName={itemName}/>
      )) 
      : 
      null
  }
  // Some other components and logic...
  
  return {
    // ...Other components and logic,
    renderListItems,
    toggleShowList,
  }
}

const useListItems=（）=>{
const[showList，setShowList]=useState（true）
const{listItemArray，isLoaded}=useListContext（）//上下文进行api调用
const-toggleShowList=setShowList（！showList）
函数renderListItems（）{
返回isLoaded&！！listItemArray？listItemArray.map（（itemName，index）=>(
)) 
: 
无效的
}
//其他一些组件和逻辑。。。
返回{
//…其他组件和逻辑，
Renderlitiems，
切换显示列表，
}
}

我的第一个问题是，什么时候才能实际评估列表项数组？是否每次调用renderListItems（）时都会计算renderListItems（）产生的jsx？还是每次调用useListItems（）时都会发生这种情况

第二个问题：如果我在另一个组件中调用useListItems（），但不调用renderListItems（），这是否会影响组件是否被评估

---

我一直在努力寻找答案，所以请提前感谢。

>什么时候才能实际评估ListItems数组？当您调用

useListItems（）

时，每次渲染都会如此

renderListItems（）

是一个使用者，所以如果它没有被调用，它就不会使用数组，但是数组在它之前被引用，所以它在上面的范围内，所以无论你是否使用

renderListItems（）

它都会被使用。谢谢，所以我想。我想我想知道的是……如果我没有在特定组件中调用renderListItems（），那么这是否值得关注？显然，它实际上不会呈现到页面上，但是在这里运行函数会对性能产生很大影响吗？或者与呈现本身相比，它是非常小的吗？这取决于您如何实现

useListContext

，如果对该数组的引用没有无故更改，这样，调用

useListItems