Question

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

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

过去，我们会使用PHP创建小部件，并根据ID（例如“sales”+ productid）为其提供id属性。然后，当JSON从我们的服务器返回更改的productID时，我们只能定位需要更新的小部件。我们知道他们的id属性，并可以用以下内容更新它们：
this.element.find（“＃”+“sales”+ productid）.html（“这里更改过的html”）

（是的，这很麻烦）

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

Answer 1

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

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

当您的products数据更新来自服务器时，容器中的状态更改将导致React重新呈现您的ProductsInfo组件，并将确定已更改的内容并相应地进行更新。为每个产品提供key可以提高效率。

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

如果您需要对渲染每个产品的方式做一些更复杂的事情，您可以定义另一个组件并从地图函数中渲染它，例如。

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

如果您正在谈论成千上万（或更多）产品，那么您可能采取不同的方法，或者至少考虑分页数据等。

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

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

1 个答案: