React：更新串列中的一項（setState）而不是全部-有解無憂

我有以下代碼。更改一個元素的值時，會重新渲染整個串列。如何通過僅重繪一個元素來避免它？我使用 setState 和類組件。

import React from "react";
import "./styles.css";

class ListItem extends React.Component {
  
  handleUpdate = () => {
    this.props.onUpdate(this.props.index);
  };

  totalRenders = 0;

  render() {
    
    const { data: { id, value } } = this.props;

    this.totalRenders  = 1;
    console.log("Row rendered");

    return (
      <div>
        <strong>id: </strong>{id}: &nbsp;
        <strong>value: </strong>{value} &nbsp;
        <strong>renders count: </strong>{this.totalRenders} &nbsp;
        <button className="button" onClick={this.handleUpdate}> &nbsp;
          Change row value
        </button>
      </div>
    );
  }
}

export default class App extends React.Component {
  state = { list: [{id: 'id 1', value: '11'}, {id: 'id 2', value: '22'}]};

  handleUpdate = (index) => {
    let newState = this.state.list.slice()
    newState[index].value = Math.round(Math.random()   10);

    this.setState(() => ({
      list: newState
    }));
  };

  render() {
    console.log("App rendered");

    return (
      <div>
        {this.state.list.map((el, index) => (
          <ListItem
            key={el.id}
            data={el}
            index={index}
            onUpdate={this.handleUpdate}
          />
        ))}
      </div>
    );
  }
}

沙盒： React：更新串列中的一項（setState）而不是全部

※附加條款

如果使用function component，可以使用memo來做，參考：React 檔案。

uj5u.com熱心網友回復：

如果您更新應用程式狀態，則應該更新該組件。預期的行為，這就是它應該如何表現。現在來回答你的問題。如果連續更改不應使您的整個應用程式重新呈現。然后，您應該管理您的專案中的狀態，并且應該在其中維護任何更改以防止不必要的重新渲染。

這是一個如何實作它的示例。你可以用這個替換你的 ListItem 并自己檢查。

function UpdatedListItem({ data }) {
  const [row, setRow] = React.useState(data);

  React.useEffect(() => setRow(data), [data]);

  const { id, value } = row;
  console.log("Changes in: ", data);

  function handleChange() {
    setRow({
      ...row,
      value: Math.round(100   Math.random() * 5)
    });
  }

  return (
    <div>
      <strong>id: </strong>
      {id}: &nbsp;
      <strong>value: </strong>
      {value} &nbsp;
      <strong>renders count: </strong>
      {this.renders} &nbsp;
      <button className="button" onClick={handleChange}>
        &nbsp; Change row value
      </button>
    </div>
  );
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/441609.html

標籤：反应列表设置状态重新渲染

上一篇：從串列集合中洗掉串列

下一篇：將Str分別轉換為Int和Float