关于ZAKER 融媒体解决方案 合作 加入

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

CocoaChina 11-14

在 react.js 应用程序中 , 我想知道最好的做法是为每个组件提供一个 ID, 该 ID 可用于仅根据需要更新该组件的信息 .

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

过去 , 我们将使用PHP创建小部件 , 并根据 ID ( 例如 " sales" productid ) 为它们提供 id 属性 . 然后 , 当 JSON 从我们的服务器返回且具有更改的 productID 时 , 我们可以仅定位需要更新的小部件 . 我们将知道它们的 id 属性 , 并可以通过以下方式对其进行更新:

this.element.find ( "#"" sales" productid ) .html ( " 此处更改的 html" )

( 是的 , 这很麻烦 )

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

最佳答案

下面是一个简单的示例 , 该示例模拟每秒获取产品列表并呈现该列表 . 产品 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>

当您的产品数据更新来自服务器时 , 容器中的状态更改将导致 React 重新呈现您的 ProductsInfo 组件 , 并找出更改内容并进行相应更新 . 为每种产品提供密钥可以使该过程更加有效 .

显然 , 这是一个简单的示例 , 但它为您提供了一个好主意 . 您正在声明性地定义给定输入数据的 UI 外观 , 并使 React 担心如何有效地将其转换为屏幕上的内容 . 您可以在 React 的 DOM 节点上获取ref并直接对其进行更新 , 但这完全违背了 React 的宗旨 , 应谨慎使用 IMO.

如果您需要对呈现每种产品的方式做一些更复杂的事情 , 则可以定义另一个组件并从您的 map 函数进行呈现 , 例如

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

如果您谈论的是成千上万 ( 或更多 ) 的产品 , 那么您可能会采用不同的方法 , 或者至少考虑分页数据等 .

如果不清楚 , 请随时提出任何问题 .

以上内容由"CocoaChina"上传发布 查看原文
相关标签 实例ui屏幕

觉得文章不错,微信扫描分享好友

扫码分享