哪些组件需要状态，了解反应[关闭]

Question

目前我正在构建一个 Web 应用程序，并希望了解状态是如何在组件层次结构中实现的。下面是组件的结构及其子组件

商店

<div>
    <StoreHeader change={handleChange} search={searchInput}/>
    <QuickLinks/>
    <LongAdBanner />
    <SearchGridContainer itemList={itemData} itemGroups={itemGroups} radioChange=
{handleRadioChange} />
</div>

搜索网格容器

   <div className={styles.searchGridContainer}>
      <SearchFilterPanel itemGroups={props.itemGroups} radioChange={props.radioChange}/>
      <SearchResultsPanel itemList={props.itemList}/>
   </div>
    

搜索过滤器面板

 <div className={styles.searchFilterPanel}>
            <h1>Filters</h1>
            <FiltersTable itemGroups={props.itemGroups} changeGroupFilter={props.changeGroupFilter} radioChange={props.radioChange}/>
 </div>

过滤表

const FiltersTable = (props) => {


    //Output a list of all item groups that are able to be filtered.
    const groupFilter = props.itemGroups.map( (itemGroup,index) => 
    <li key={index} className={styles.filterOption}>
        <input 
        id={itemGroup}
        className={styles.filterCheckBox} 
        type="checkbox" 
        name='filterOption'
        onClick={props.radioChange}
        value={itemGroup.group}
        
        ></input>
        <label for={itemGroup.group}>{itemGroup.group}</label>
    </li>);

    return(
        <div className={styles.filtersTable}>
            <ul>
                {groupFilter}
            </ul>
        </div>
    ) }

---

目前，我正在将所有应用程序状态构建到主 Store 组件中，即所有处理程序方法。我已经阅读了Thinking in React。它指出

找出你的状态的绝对最小表示 应用程序需要并按需计算您需要的所有其他内容

我应该在具有复选框的组件中实现状态以应用搜索过滤器 (FilterTable) 还是将该处理程序保留在 Store 组件中并将它们传递下去？

在我的应用程序中唯一需要状态的是用户搜索输入以及用户从列出的选项中选择搜索过滤器的时间。

Answer 1

这是一个超级设计的示例，使用了您在此处提供的 strict 结构。希望它有助于解释如何考虑状态放置，然后我们可以稍微调整它以适应您可能实际上想要的。

| Store
  | StoreHeader
    state: searchInput
    handlers: handleChange
  | QuickLinks
  | LongAdBanner
  | SearchGridContainer
    | SearchFilterPanel
      | FiltersTable
        state: itemGroups
        handlers: radioChange
    | SearchResultsPanel
      state: itemList

我已将所有内容更深入地移动到实际使用它的组件中，因为在您共享的代码中，没有两个组件使用相同的道具。但是，我显然在这里做了一些假设，因为我看不到您使用这些更改处理程序对数据实际做了什么。如果searchInput 和itemGroups 更改影响itemList，正如我所期望的那样，那么这将不起作用。

那么问题就变成了：我们可以在树中保持多低（或多深，取决于您对组件结构的看法），同时仍然使组件能够正常工作？要实现这一点，最少需要多少状态共享？这是第二种结构，我在其中对这可能是什么做出了一些有根据的猜测。

| Store
  state: searchInput
  handlers: handleChange
  | StoreHeader
    props: searchInput, handleChange
  | QuickLinks
  | LongAdBanner
  | SearchGridContainer
    state: itemGroups, itemList
    handlers: radioChange
    props: searchInput
    | SearchFilterPanel
      props: itemGroups, radioChange
      | FiltersTable
        props: itemGroups, radioChange
    | SearchResultsPanel
      props: itemList

这与您的原始结构之间的主要区别在于，我们将与items 相关的所有内容都移到了SearchGridContainer 中。其他组件 - StoreHeader、QuickLinks 和 LongAdBanner - 与它们无关，假设您的 Store 没有渲染任何其他需要它们的东西，它们不需要属于那里。

我再次假设itemGroups 会影响itemList 的渲染，searchInput 也是如此，这就是为什么我们现在将后者作为道具而不是进行所有计算的原因在顶层Store 组件中。

您可能也从中意识到FiltersTable 甚至不需要作为一个单独的组件存在，因为SearchFilterPanel 能够自己完成所有的演示工作。 SearchGridContainer 充当它和SearchResultsPanel 的控制器。