React native 具有多个输入（列表）的状态管理

我试图找出在react native中管理输入列表状态的最佳位置，但没有找到任何好的、全面的示例或明确的指导，我可以看到一些选项

为了简单起见，不包括关于管理状态的工具的细节，因为我的理解是状态的存储方式不会影响管理它的组件

脚本 一种屏幕组件，接收一组项目作为道具显示在列表项目列表中。为了简单起见，每个ListItem都包含一个输入，请想象一个开关布尔值

用例包括一系列表单问题或设置，这些问题或设置将显示在列表中，并允许用户输入。伪代码：

class SettingsView extends Component {
  render () {
    return (
      <View>
        <List style={styles.list}>
          {this.props.inputArray.map((item, index) => (
            <ListItem
              title={item.title}
              isSwitched={item.value}
              key={index}
              onSwitchChange = {this.onChange}
            />
          ))}
        </List>
      </View>
    );
  }
}

选择1 根据页面，我想到的一个选项是在屏幕设置视图级别管理状态，方法是在设置视图构造函数状态中创建inputArray.length数组，并让onChange函数根据键更新该数组

选择2 我看到的第二个选项是让每个ListItem管理其显示的状态。从封装的角度来看，这对我来说是有意义的，但对于状态的管理来说就不那么有意义了，因为onSwitchChange函数在setingsview中，我不太清楚它是如何工作的

还有其他我没有考虑的选择吗？承认React/RN的经验是有限的，def来自于更为对象化的思维方式，如iOS的列表数据源模型

注意：另一个选项是使整个inputArray处于状态，而不是作为道具传递。我的理解是，状态应该最小化，因此在设计时，inputArray中每个项目的输入都应该处于状态。i、 e.表格标签，即问题是道具而不是状态。

选项1是更好的选择，有智能组件和哑组件这一概念

智能组件：通常保存与其关联的所有子组件的状态，它还定义传递给子组件以修改其状态的函数

哑组件：这些组件接收包含数据和函数的道具，它们通常没有自己的状态，并且严重依赖父组件

问题是，当你创建一个组件时，你需要决定它是智能的还是哑的，通常我会将一个屏幕与一个智能组件相关联，在您的示例中，将由SettingsViewsmart保存状态和函数，其子组件将是哑组件，但这实际上是特定于应用程序的决定，因为您可能有一个基于上下文的动态SettingsView，因此最好将其设置为哑组件让我们使用上面的示例

因为设置视图依赖于从父级传递的this.props.inputArray Component将调用此无法修改的ParentComponent 直接在SettingsView中输入数组您可以做的是从 将ParentComponent设置为SettingsView，这是一个修改inputArray的函数

class ParentComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputArray: [],
        };
        this.onSwitchChange = this.onSwitchChange.bind(this); // when passing fn
    }
    onSwitchChange(index) { // index will come from the child component
        // do some logic here based on the index then update the state
        this.setState('inputArray' updatedState); // updatedState is just an example variable
    }
    render() {
        return (
            <View>
                <SettingsView 
                    onSwitchChange={(index) => () => this.onSwitchChange(index)}
                    inputArray={this.state.inputArray} 
                />
            </View>
        );
    }
    /*
        (index) => () => this.onSwitchChange(index)
        this is a function that will return another function
        we need this because we want to delay the execution of onSwitchChange
        and capture index and associate it with that method, typically this
        is used if were passing function to child component(SettingsView) which will be used as
        a handler for events.
    */
}

class SettingsView extends Component {
  render () {
    return (
      <View>
        <List style={styles.list}>
          {this.props.inputArray.map((item, index) => (
            <ListItem
              title={item.title}
              isSwitched={item.value}
              key={index}
              onSwitchChange={this.props.onSwitchChange}
            />
          ))}
        </List>
      </View>
    );
  }
}

---

此示例可能毫无意义，因为您可以将SettingsView用作ListItem和其他组件的父级，但由于SettingsView状态现在由ParentComponent管理，因此它现在是一个哑组件，可以在具有SettingsView需要操作的特定状态的其他屏幕中使用。我们的总体目标是创建尽可能多的哑组件，原因是这些类型的组件具有高度的可重用性，因为您只需要将道具传递给它们就可以正常工作。

这个示例只差了一个级别，我正在讨论ListItem是“智能”还是“哑”。ParentComponent添加了第三个级别，但这些概念仍然适用。回答得很好，我会把国家放在父母身上。