Question

我有一个包含多个文本输入的表单。我将它们全部设置为受控输入。键入时，新文本在字段中显示的延迟最多可达数秒。这是一个示例字段：

string

我无法弄清楚是什么导致它变得如此之慢或者该如何解决它。

更新：这里的组件应该足以显示正在发生的事情。

cin

Answer 1

我有类似的情况，我的解决方案是禁用React Dev Tools。它们以某种方式影响输入字段。问题是如果您单击了React Dev Tools选项卡，则刷新页面是不够的。它们仍在影响您的投入。您必须打开新页面才能阻止它们。您也可以完全从Chrome中删除它们，但我不建议这样做，因为它们很有用。：）

Answer 2

发生这种情况的原因有很多。我遇到了类似的问题并将主要原因过滤到：

大状态，所以它需要一段时间
React Dev Tool /使用非缩小反应
变异状态数据

无论是什么原因，我找到了一个快速解决方案。如果您只想将其存储到状态但不使用它进行实时渲染。然后，您可以安全地替换＆＃39; onChange＆＃39; to＆＃39; onBlur＆＃39;。这没有dealay和滞后。如果你知道其他任何不起作用的情况，请告诉我！

更改代码如下：

<label>Event Name</label>
<input 
   type="text" 
   placeholder="Title"
   className="form-control"
   name="title"
   value={this.state.event.title}
   onBlur={this.handleChange} />

Answer 3

这是我找到的修复程序。它将父状态设置为onBlur。请审核这个

import React, { useState } from 'react';
import MUIField from '@material-ui/core/TextField';
import _ from 'lodash';

export default (props) => {
  const [value, setValue] = useState(props.defaultValue);
  const prop = _.omit(props, ['onChange', 'value', 'defaultValue']);

  return (
      <MUIField {...prop} value={value}
                onChange={e => { setValue(e.target.value); }}
                onBlur={() => {
                  props.onChange({ target:{ value }});
              }}/>);
};

Answer 4

以下是输入模式Plug in or pattern for dealing with large forms in React?的示例。主要的是将您的输入作为一个组件，将更改传递给父级，但如果它们是相同的，则不会从props更新。

Answer 5

我的问题是我的状态对象很复杂，因此导致呈现问题。我的解决方案是管理组件中注释的状态，然后在模糊时更新容器状态。

const { data, onEdit } = props;
const { containerNotes } = data;

const [notes, setNotes] = useState('');

useEffect(
  () => {
    setNotes(containerNotes);
  },
  [containerNotes],
);

const onChangeNotes = () => ({ target: { value } }) => {
  setNotes(value);
};

const onBlurNotes = (prop) => ({ target: { value } }) => {
  const newData = update(data, {
    [prop]: { $set:  value },
  });
  onEdit(newData);
};

return (
  <input 
     type="text" 
     placeholder="Title"
     name="title"
     value={notes}
     onChange={onChangeNotes()}
     onBlur={onBlurNotes('containerNotes')}
 />
)

Answer 6

看到它仍然可以得到答复，以为我会更新并关闭它。在handleChange中调用onChange将使整个表单在每次更改时都重新呈现，从而减慢了速度。如果您使用的是简单表单，则可以更新onBlur或创建单独的输入组件，以便将重新渲染隔离到该输入。就个人而言，我会并建议使用Formik来构建表单，因为它会为您抽象出这种复杂性。

Answer 7

显然，React-Hook-Form擅长于最大程度地减少重新渲染，并可能优化性能。我还没有尝试过。

Answer 8

我有redux logger中间件需要足够的时间来创建这个输入延迟。所以，尝试禁用它。

多个受控文本输入反应缓慢

8 个答案: