Question

当尝试将refs存储在循环内的数组中时，当页面重新渲染时（在页面首次渲染时一切都如预期的那样），我会得到奇怪的结果。

我在这个非常小的jsfiddle中重现了这个问题：https://jsfiddle.net/69z2wepo/68251/

class Hello extends React.Component {
  constructor(props) {
      super(props);

      setTimeout(() => { this.setState({foo: 'bar'}); }, 1000);
  }

  render() {
    console.log('--- RENDER ---');

    const divs = [];
    this.elements = [];

    for (let i = 1; i <= 2; i++) {
        divs.push(
            <div
                key={i}
                ref={(ref) => {
                    this.elements.push(ref);

                    console.log(this.elements);
                }}
            >
            </div>
        );
    }

    return (
        <div>
            {divs}
        </div>
    );
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

你可以看到当页面第二次渲染时，我突然得到空值并最终得到一个包含4个元素的数组。

有谁可以解释为什么它的行为？为什么在第二次渲染后处理ref的函数执行了4次？

Answer 1

来自documentation：

React支持可以附加到任何属性的特殊属性零件。 ref属性采用回调函数，而安装组件后将立即执行回调或未安装。

因此调用四个引用回调的原因是因为卸载了两个组件而安装了两个组件。

问题在循环中存储ref元素

1 个答案: