为什么我的嵌套组件会自行重建？答案

【问题标题】：Why is my nested component rebuilding itself?为什么我的嵌套组件会自行重建？
【发布时间】：2019-09-23 08:20:31
【问题描述】：

我正在尝试基于本机输入/范围元素构建自定义滑块。汇总代码如下所示：

const Slider = ({ className, backgroundColor, ...inputAttributes }) => {
  const [value, setValue] = useState(5);

  const handleSliderChange = event => {
    setValue(event.currentTarget.value);
  };

  const SliderElement = () => (
    <input value={value} onChange={handleSliderChange} {...inputAttributes} />
  );

  // ...

  return (
    <>
      <SliderElement />
      <p>
        <Display>{value}</Display>
      </p>
    </>
  );
};

它是这样称呼的：

<Slider type="range" min={1} max={10} step={1} />

完整运行代码：https://codesandbox.io/s/000qm47pjw

带有嵌套的 SliderElement 组件

使用上面的代码，我一次只能移动一个滑块（我必须“取消单击”滑块并再次单击它以进行下一步）。我怀疑这是因为每次移动滑块时都会重新渲染SliderElement。

不过……

如果我完全跳过 SliderElement 并将 <input... 直接放入返回的 JSX 中，它可以完美运行。

完整运行代码：https://codesandbox.io/s/5469y582yn

没有嵌套的 SliderElement 组件

为什么SliderElement 每次我使用它时都会重新渲染（假设是这种情况）？

我怎样才能将<input... 包裹在嵌套组件中，并且仍然能够提供黄油般流畅的体验？

【问题讨论】：

标签： javascript reactjs nested custom-component rerender

【解决方案1】：

区分这两个：

var aReactElement = <input />
var aReactComponent = () => <input />

一个反应组件负责决定它是否应该重新渲染它管理的反应元素。它在一个前提下工作，组件对象 instance 应该保持不变，以便作为一个持久状态的引用键。

在您的示例中，SliderElement 实例在 Slider 的每次重新渲染中都在不断变化，它每次都是一个新函数。因此，您的 DOM 树会不断卸载然后安装 <input /> 元素。

您可以将SliderElement 设置为元素，而不是将其设置为元素。

const SliderElement = (
    <input value={value} onChange={handleSliderChange} {...inputAttributes} />
  );

  // ...

  return (
    <>
      {SliderElement}
      <p>
        <Display>{value}</Display>
      </p>
    </>
  );

【讨论】：