反应输入范围更新状态缓慢答案

【问题标题】：React Input Range updating state slowly反应输入范围更新状态缓慢
【发布时间】：2016-12-05 21:44:54
【问题描述】：

我正在尝试使用带有type="range" 的html 元素来制作一个范围滑块，当我来回滑动它时将更新状态值。如果我只是在onInputChange() 内部使用console.log e.target.value 而不设置状态，它可以顺利运行，但是如果我尝试使用e.target.value 设置状态，它会滞后太多以至于无法使用。我也尝试设置 value={this.state.rangeValue} inside ，但没有成功。以下是相关代码的示例：

export default class App extends Component {
   constructor() {
   super();
   this.onInputChange = this.onInputChange.bind(this);

   this.state = {
     rangeValue: 50
   }
 }

onInputChange(e) {
   this.setState({ rangeValue: e.target.value});
}

render() {
   var {rangeValue} = this.state;

  // this logs unbearably slow and I want to be able to pass this value 
  // to a child component as a prop as it updates
  console.log(rangeValue)

  return (
     <div className="map-controls">
        <input type="range" onChange={this.onInputChange}></input>
        <ExampleComponent rangeValue={this.state.rangeValue} />
     </div>

  );
 }
}

【问题讨论】：

到底是什么东西这么慢？也许 ExampleComponent 是瓶颈。我用一个简单的 div 输出测试了你的示例，没有性能问题..
@webdeb 看起来很慢的部分是设置状态和重新渲染组件。就像我提到的，如果我只是在onInputChange 中使用console.log(e.target.value)，那么它会在我滑动滑块时正确且响应地记录值。但是，如果我像我的代码示例一样使用 setState，然后在 render 方法中使用console.log(this.state.rangeValue)，则值会以一种非常笨拙的方式更新，有时会在我滑动滑块时冻结。我认为这可能是因为每次滑动滑块时它都会强制组件重新渲染。即使没有 ExampleComponent 也会发生这种情况
yes setState 强制重新渲染组件，但正如我所说，我在新的 react-app 上对其进行了测试，结果很好.. ExampleComponent 在做什么？
@webdeb 不，现在完全可以工作了。从字面上看并没有改变任何事情，但是由于我在工作之间有时间，所以我再次对其进行了测试，它现在就可以工作了。很奇怪，因为我昨天花了一个小时弄乱它，但没有成功。 --_(ツ)_/

标签： javascript forms reactjs input range

【解决方案1】：

不知道我的包裹能不能帮到你？

https://github.com/bluebill1049/react-smooth-range-input

import react from 'react';
import Slider from 'react-smooth-range-input';

export default () => <Slider value={1} min={1} max={30} onChange={/** you can put your callback here */} />;

【讨论】：

【解决方案2】：

@user3737841 看来您正在更新onInputChange() 处理程序上的组件状态。在输入范围滑块的每一步值更改时，都会调用 setState 并重新渲染。在每次输入更改时重新渲染的成本非常高。

如果您避免更新状态，您可能会保存一些渲染并且您的性能会提高。

您也可以使用defaultValue 代替value。然后<input> 被视为uncontrolled 并且任何用户交互都会立即由元素本身反映，而无需调用组件的渲染函数。

只需将value={this.state.rangeValue} 替换为defaultValue={this.state.rangeValue}。将滑块value 作为prop 传递给<ExampleComponent /> 组件，不管组件state。

【讨论】：