什么是React中的无状态受控组件

Question

在一次采访中，我被要求创建一个具有两个条件的自动填充组件， 它应该是受控组件，并且应该是无状态的。 但是在阅读了react文档之后，据我了解，一个组件只有在其输入具有处于状态中的单个真相源时，才是受控组件。

面试官在玩吗？

Answer 1

无状态组件是不使用作出反应的一个组成部分this.setState()或this.getState() 您可以通过两种方式声明它：

• 扩展React.Component并确保this.setState()和this.getState()不使用
• 将其声明为函数，您将无法访问this

受控组件是其状态由应用程序而不是浏览器管理的组件 。

考虑一下文本输入：在标准的Web应用程序中，您可以在输入中编写一些内容（例如：“ John”），然后浏览器管理文本输入的重绘以显示您所写的内容。 浏览器控制该组件。 您的应用程序不需要处理，这是一个不受控制的组件。

在受控组件中，您需要编写该逻辑，并将有关该组件状态的每个相关详细信息存储在某个位置（例如：“ John”）。 在React中，通常使用this.setState() ， this.setState() this.getState()和一些事件处理程序方法来实现。

面试官可能在思考与Redux类似的事情，在Redux Store中，您拥有每个组件的状态（您的唯一事实来源）。 然后，您可以创建无状态组件，并通过其道具“注入”状态。 您还为每个状态更改调度Redux动作。

普拉卡什·沙玛（Prakash sharma）举了一个很好的例子。

Answer 2

无状态受控组件示例：

const InputComponent = (props) => {
  return (
    <input value={props.text} onChange={props.handleChange} />
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'test'
    };    
  }
  handleChange=(event)=> {
    this.setState({
      name: event.target.value
    });
  }
  render() {
    return (
      <InputComponent text={this.state.text} handleChange={this.handleChange} />
    );
  }
}

Answer 3

我认为这就是面试官的期望

function MyStatelessControlledComponent(props) {
  return <input value={props.value} onChange={props.handleChange} />;
}