在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 并在以后使用/定位它？
下面是一个简单的示例，它模拟每秒获取产品列表并呈现该列表。产品 ID 用作key https://facebook.github.io/react/docs/lists-and-keys.html在渲染的列表中，并且将允许 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 关心如何有效地将其转换为屏幕上的内容。你可以获得一个ref https://facebook.github.io/react/docs/refs-and-the-dom.html到 React 中的 DOM 节点并直接更新它，但这完全违背了 React 的本质，在我看来应该谨慎使用。
如果您需要对如何呈现每个产品做一些更复杂的事情，您可以定义另一个组件并从地图函数中渲染它，例如
{products.map(product => <Product key={product.id} info={product}/>)}
如果您正在谈论数千（或更多）产品，那么您可能会采取不同的方法，或者至少考虑对数据进行分页等。
如果有任何不清楚的地方，请随时提出任何问题。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
