为什么这个不受控制的组件在不使用State的情况下如此完美地工作

Question

当我阅读ReactJS文档时，它建议使用state来创建受控组件。但是，下面不受控制的代码更清晰，运行完美。我可以理解为什么父组件应该使用状态，但下面的代码是如此干净，我不明白为什么建议使用受控组件。 “MyModule”前缀是可选的，我甚至不必包括它。

module MyModule {
   export let userName: string = "";

   interface iProps {
      userName?: string;
   }

   export class Build extends React.Component<iProps, {}> {
      constructor(props: iProps) {
         super(props);

         if (props.userName) {
            MyModule.userName = props.userName;
         }
      }

      handleChange(event) {
         MyModule.userName = event.target.value;
      }

      render() {
         return (<input type="text" defaultValue={MyModule.userName} onChange={this.handleChange.bind(this)} /> );
      }
   } //end class.
} //end module.

Answer 1

它的工作原理是因为handleChange(event)正在更新的值存储在组件类之外。

所以基本上它适用于整个应用程序中只有一个Build组件实例。如果您有同一组件的多个实例，则可能需要确保每个实例都有自己的userName值。您可以创建多个变量并以某种方式将每个变量与每个组件实例相关联，但是使用组件状态或像redux这样的应用程序范围的状态存储是更好的方法。

Answer 2

输入将显示正确的值，因为它们是不受控制的。但是同一页面上的所有js实例都具有相同的用户名。你也将失去javascript的“反应”部分。例如。如果您在输入中添加一个标签，该标签将在输入框中显示用户名，则不会在更改时更新。