ANYを使わないで反応成分を加える？

Question

私はReactDOM.renderを要素にレンダリングしていますが、要素内の既存のノードを完全に上書きします。私はreduxのような状態の機能性を結びつけたくないので、文字列にレンダリングして要素に追加したいだけです。これは可能ですか？

私は人々が私に状態と何もないと言っていると思うだろうと思うが、私はそれに続く質問があると思います。何百/何千ものイメージを持つ要素があります。いつもReactを使って？何千ものオブジェクトを持つ状態を操作するのが遅くなるのですか？

Answer 1

は、リストされた製品のこの例を考えてみましょう：

https://jsfiddle.net/pf7z8z4m/12/

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を拡張することです。

このdocを見てみましょう：

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