Question

此问题已被多次询问，并在互联网上的其他地方进行了讨论。但是我找不到任何理由为什么状态对于某些数据比实例变量更好，除了保持一些分离。

可以替代 -

   this.setState({variableA: "xyz"});  // access variable as this.state.variableA

与

   this.variableA = "xyz";  // access variable as this.variableA
   this.setState({});

上述两个代码选项中是否存在“功能差异”？

我有一种情况，维持状态变量会产生更多问题，而不是提供分离可以弥补。我有两个共享'状态'的组件，即改变组件A中的某些东西会改变组件B的渲染，反之亦然 - 它们都接受输入。现在，如果我要维护状态，我将需要回调函数，以保持共享状态同步。将共享的'state'作为props中的对象引用传递并在输入上修改它并在两个组件上调用setState（{}）来重新渲染似乎要容易得多 - 我们不再需要同步了。这有什么功能上的缺点吗？

例如考虑 -

class A extends React.component {
  render() {
    return (
      <div onClick={() => {
        this.props.data.reset(); 
        this.setState({});
      }}>
        <B data={this.props.data} onDataChange={() => {
          this.setState({});
        }}/>
        {/* ... */}
        {this.props.data.value}
      </div>
    );
  }
}

class B extends React.component {
  render() {
     return (
       <input 
         type="text" 
         onChange={event => {
           this.props.data.value = event.target.value;
           this.props.onDataChange();
         }} 
         value={this.props.data.value} 
       />
     );
  }
}

我不想合并A和B，因为它们都非常复杂（上面的代码只是显示共享'state'的示例）。

在状态变量中没有捕获this.props.data是否存在任何功能问题？

Answer 1

你可能想要lift the state up，即将这个共享状态移动到他们的共同祖先并使用道具。这基本上就是你正在做的事情，但没有将状态暴露在你的组件之外，这是不推荐的。

功能差异：状态变量与具有setState（{}的实例变量）

1 个答案: