PureComponent中的受控输入在更改时不呈现

PureComponent是React中的一个优化性能的组件，它是React.Component的一个变体。PureComponent通过浅比较来决定是否重新渲染组件，从而避免不必要的渲染，提高应用的性能。

受控输入是指表单元素的值由React组件的state来控制，并通过onChange事件来更新state的值。当受控输入的值发生变化时，React会重新渲染组件，并将新的值传递给受控输入。

在PureComponent中使用受控输入时，如果每次输入变化都会导致组件重新渲染，可能会降低性能。这是因为PureComponent使用浅比较来判断是否重新渲染组件，而受控输入的值每次变化都会生成一个新的对象。即使新的对象与之前的对象内容相同，但它们的引用不同，浅比较会认为它们是不同的，从而触发重新渲染。

为了解决这个问题，可以使用shouldComponentUpdate方法来手动比较受控输入的值，只有在值发生变化时才返回true，从而避免不必要的重新渲染。示例代码如下：

class MyComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  handleChange = (event) => {
    this.setState({ inputValue: event.target.value });
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.state.inputValue !== nextState.inputValue;
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.inputValue}
        onChange={this.handleChange}
      />
    );
  }
}

在上述代码中，通过重写shouldComponentUpdate方法，只有当inputValue发生变化时才重新渲染组件。

对于受控输入的应用场景，可以用于实时搜索、表单验证等需要实时更新输入值的场景。

腾讯云提供了一系列与云计算相关的产品，例如云服务器、云数据库、云存储等。具体可以参考腾讯云官方文档：腾讯云产品。