Question

在一次采访中，我被要求创建一个具有两个条件的自动填充组件它应该是一个受控制的组件，它应该是无状态的。 但是经过反应文档，我理解的是，只有当一个组件的输入具有单一的事实来源时，该组件才是受控组件。

面试官在玩耍吗？

Answer 1

无状态组件是不使用React的this.setState()或this.getState()的组件。您可以通过两种方式声明它：

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

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

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

在受控组件中，您需要编写该逻辑，并在某处存储有关该组件状态的所有相关详细信息（例如：“John”）。在React中，您通常使用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} />;
}

React中的无状态控制组件究竟是什么？

3 个答案: