Question

我使用ReactDOM.render渲染到元素中，但它完全覆盖了其中的现有节点。我不想绑定任何类似redux的状态功能，我只想渲染一个字符串并追加到一个元素。这可能吗？

我怀疑人们会告诉我只是使用状态和什么不是，但我想我的后续问题就是，我有一个元素将有数百/数千个图像，它会每次都重新渲染使用React？操纵一个有数千个物体的状态会慢吗？

Answer 1

考虑列出的产品示例：

class Product extends React.Component{

  shouldComponentUpdate(nextProps, nextState) {
    return (this.props.product !== nextProps.product)
  }

  render(){
    console.log('rendering product '+this.props.product.name)
    return (<li>
      <h4>{this.props.product.name}</h4>
      <img src={this.props.product.img} alt={this.props.product.name}/>
      </li>)
  }
}

class ProductList extends React.Component{
  render(){
    const items = this.props.products.map((product)=>
            <ul key={product.id}>
        <Product product={product}/>
      </ul>)
    return (<ul>{items}</ul>)
  }

}

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {products:[]}

    //following is just a simple simulation of products being added to the list through time
    setTimeout(
        ()=>{this.setState({products:[...this.state.products,
        {id:1,name:'Product A', img:'productA.png'}]})},
      1000
        )
    setTimeout(
        ()=>{this.setState({products:[...this.state.products,
        {id:2,name:'Product B', img:'productB.png'}]})},
      3000
        )
    setTimeout(
        ()=>{this.setState({products:[...this.state.products,
        {id:3,name:'Product C', img:'productC.png'}]})},
      5000
        )
    }

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

React.render(<App/>,document.getElementById('root'))

新元素（产品）会定期添加到列表中，但不会导致其余部分重新呈现。

Product上的方法shouldComponentUpdate正在控制它。另一种选择是扩展React.PureComponent。

看看这个文档：

https://facebook.github.io/react/docs/optimizing-performance.html

在没有任何redux的情况下附加React组件？

1 个答案: