reactjs - 根据 ID 更新 React.js 中的特定组件实例

Question

在react.js应用程序中，我想知道为每个组件提供一个ID的最佳实践是什么，该ID可用于根据需要仅更新该组件的信息。

例如，如果我们有一个显示销售信息的组件，并且我们创建并显示其中 20 个组件，因为我们有 20 个产品，那么我们会每隔一段时间从服务器检索 JSON 以查询任何已更新的产品，然后希望只更新那些发生变化的内容，我们如何才能做到这一点。

过去，我们会使用 PHP 创建小部件并根据 ID 赋予它们 id 属性(例如“sales”+ Productid)。然后，当 JSON 从我们的服务器返回且产品 ID 已更改时，我们可以仅定位需要更新的小部件。我们会知道它们的 id 属性，并可以使用以下内容更新它们:
this.element.find(“#” + “sales” + Productid).html(“此处更改后的 html”)

(是的，这很麻烦)

在 React 中，如何仍然拥有这种类型的控件来仅更新基于从服务器或数据库返回的某些有意义的 ID 的组件？有没有办法为组件提供 ID 并在以后使用/定位它？

Answer 1

下面是一个简单的示例，它模拟每秒获取产品列表并呈现该列表。产品 ID 在渲染列表中用作 key，并允许 React 在每次更新时有效地重新渲染列表。

class ProductsInfoContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { products: [] };
    this.fetchProducts = this.fetchProducts.bind(this);
  }

  componentDidMount() {
    this.refreshTimer = setInterval(this.fetchProducts, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.refreshTimer);
  }

  fetchProducts() {
    //simulate API fetch from server - we'll just create a list with random prices
    const products = [
      {id: "123-456", name: "Widget", price: this.getPrice()},
      {id: "234-567", name: "Widget Spinner", price: this.getPrice()},
      {id: "345-678", name: "Fidget", price: this.getPrice()},
      {id: "456-789", name: "Fidget Spinner", price: this.getPrice()},
    ];
    this.setState({ products });
  }

  getPrice() {
    return (Math.random() * 100).toFixed(2);
  }

  render() {
    return <ProductsInfo products={this.state.products} />;
  }
}

const ProductsInfo = ({ products }) => (
  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      {products.map(product =>
        <tr key={product.id}>
          <td>{product.id}</td>
          <td>{product.name}</td>
          <td>{product.price}</td>
        </tr>
      )}
    </tbody>
  </table>
);

ReactDOM.render(<ProductsInfoContainer />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>

<div id="root"></div>

当您的 products 数据更新来自服务器时，容器中的状态更改将导致 React 重新渲染您的 ProductsInfo 组件，并找出发生了什么变化并进行相应更新。为每个产品提供 key 可以使该过程更加高效。

显然这是一个简单的例子，但它给了你一个好主意。您正在声明性地定义 UI 在给定输入数据的情况下的外观，并让 React 关心如何有效地将其转换为屏幕上的内容。您可以在 React 中获取 DOM 节点的 ref 并直接更新它，但这完全违背了 React 的本质，在我看来应该谨慎使用。

如果您需要对如何渲染每个产品进行更复杂的操作，您可以定义另一个组件并从 map 函数中渲染它，例如

{products.map(product => <Product key={product.id} info={product}/>)}

如果您正在谈论数千(或更多)产品，那么您可能会采取不同的方法，或者至少考虑对数据进行分页等。

如果有任何不清楚的地方，请随时提出任何问题。