javascript - 如何渲染一个独立于状态的元素

Question

我如何在 React Native 中渲染一个元素，该元素随后不受任何其他渲染/状态更新的影响？

我想要实现的目标:

我有一个按钮。每次按下该按钮时，页面上某处的数字都会增加 1。此外，当按下同一按钮时， float 的“+1”会出现 1 秒钟，然后消失。 “+1”与总数无关。如果按钮被按下 5 次，我希望看到 5 个 float 的“+1”。

我正在存储(并删除)状态中 float “+1”的数量。但是，每次我通过单击按钮添加一个时， float 的“+1”都会重新渲染并重新启动它们的动画。如何在单击按钮时呈现这些元素，而不是在单击另一个按钮时重新呈现它们？

“+1”是一个在 componentDidMount 上启动动画的类。

现在的情况:Buttonclick -> Update State -> Render floating “+1” -> Buttonclick -> Update State -> Rerender all floating “+1”

期望的情况Buttonclick -> Update State -> Render floating "+1"-> Buttonclick -> Update State -> Render only the new added floating "+1"

Answer 1

这是我草拟的一些小东西，希望它能对你有所帮助:https://codesandbox.io/s/m30ym10m9p

基本上，您有一些 elems在存储在状态的数组中，你有一个 <button>它向所述数组添加新元素，每次添加元素时，您还会创建一个 setTimeout一旦超时结束，它将自己从数组中删除。代码如下所示:

在状态中设置一个 super 基本数组:

state = {
  elems: []
};

从状态渲染元素:

render() {
  // pretty basic, just a normal button to add elements & map through state to render
  return (
    <>
      <button onClick={this.addElem}>Add elem!</button>
      {this.state.elems.map((elem, i) => (
        <p key={i}>{elem.text}</p>
      ))}
    </>
  );
}

将元素添加到状态(在帖子底部有更详细的解释):

addElem = () => {
  const elems = [...this.state.elems];

  // create empty id to be filled later
  let timeoutProps = { id: null };

  // set timeout for element to be removed
  const timeoutId = setTimeout(
    ({ id }) => {
      this.removeElem(id);
    },
    1000,
    timeoutProps
  );

  // quickly add timeout id to props, which will get passed back in to timeout
  timeoutProps["id"] = timeoutId;

  // add new element to "elems" array
  elems.push({
    text: `New!! (${timeoutId})`,
    id: timeoutId
  });

  // update state
  this.setState({ elems });
};

从状态中移除元素:

removeElem = id => {
  let elems = [...this.state.elems].filter(elem => elem.id !== id);
  this.setState({ elems });
};

render非常简单，但如果您对此有任何疑问，请告诉我。我的代码中最时髦的部分是 addElem方法。我想确保 timeoutId在创建超时后被保存，并且在超时到期后，removeElem可以使用传递给它的超时 ID 来调用函数。

为了将超时的 id 传递给 removeElem (在超时到期后)，我不得不对 javascript 对象有点棘手。

• 首先，我们创建一个带有空 id 的对象 Prop :let timeoutProps = { id: null };
  • 注意:我在这里使用了一个对象，因为这意味着 timeoutProps变量只是指向数据的指针 {id: null} .因此它可以在其他地方更改，并且将来可以使用 timeoutProps将使用更新后的数据。
• 接下来，我们将其传递给 setTimeout打回来。
  • 注意:此时回调还没有触发!
• 最后，我们编辑 timeoutProps属性(property)id到 timeoutId
  • 注意:由于setTimeout回调仍然没有被触发，timeoutProps变量现在指向更新的数据 {id: timeoutId}
• 一旦setTimeout触发回调，setTimeout现在可以访问 {id: timeoutId} , 它将能够通过 timeoutId至 removeElem .

希望这是有道理的？这是关于 Javascript 的令人困惑(和有趣)的事情之一:D 如果需要，很乐意解释更多。