Question

我在React组件的state中存储了一个UI状态，比如this.state.receivedElements，这是一个数组。每当元素被推送到receivedElements时，我都想重新渲染。我的问题是，当数组变空时，我可以不触发渲染吗？或者一般情况下，我可以只调用一次setState()而无需重新渲染，同时重新渲染所有其他时间吗？（有没有选择，解决方案？）
我已经阅读了这个帖子：https://github.com/facebook/react/issues/8598但没有找到任何内容。

Answer 1

每当元素被推送到receivedElements时，我都想重新渲染。

请注意，如果使用

，将不会重新呈现

this.state.receivedElements.push(newElement); // WRONG

违反了您不得直接修改州的限制。你需要：

this.setState(function(state) {
    return {receivedElements: state.receivedElements.concat([newElement])};
});

（它需要是回调版本，因为它依赖于当前状态来设置新状态。）

我的问题是，当数组变空时，我不能触发渲染吗？

是的 - 在这种情况下不要致电setState。

听起来好像receivedElements不应该是您所在州的一部分，而是您分别管理的信息，并在state中反映。例如，您可能在组件本身上有receivedElements，在displayedElements上有state。然后：

this.receivedElements.push(newElement);
this.setState({displayedElements: this.receivedElements.slice()});

...和

// (...some operation that removes from `receivedElements`...), then:
if (this.receivedElements.length) {
    this.setState({displayedElements: this.receivedElements.slice()});
}

请注意，如果setState为空，我们不会致电this.receivedElements。

Answer 2

useRef 怎么样？

文档说： useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数 (initialValue)。返回的对象将在组件的整个生命周期内持续存在。

因此，如果您更改 useEffect 中的 ref 值，它将不会重新渲染组件。

  const someValue = useRef(0)
  useEffect(() => {
    someValue.current++
  },[])

调用setState而不触发重新渲染

2 个答案: