正確的方式來重新渲染我的React組件？

Question

我對React（來自Angular 1）非常陌生，並且一直在玩弄它。我有一個測試腳本，通過多維對象循環，並將其綁定到dom。

然後我將一個新項目添加到包裝在setTimeout中的對象。在下面調用ReactDOM.render是重新渲染React組件的最佳方式？

var items = [ 
    { name: 'Matt', link: 'https://google.com' }, 
    { name: 'Adam', link: 'https://bing.com' }, 
    { name: 'Luke', link: 'https://yahoo.com' }, 
    { name: 'John', link: 'https://apple.com' } 
]; 

var RepeatModule = React.createClass({ 
    getInitialState: function() { 
     return { items: [] } 
    }, 
    render: function() { 

    var listItems = this.props.items.map(function(item) { 
     return (
      <li key={item.name}> 
       <a className='button' href={item.link}>{item.name}</a> 
      </li> 
     ); 
    }); 

    return (
     <div className='menu'> 
      <h3>The List</h3> 
      <ul> 
       {listItems} 
      </ul> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(<RepeatModule items={items} />, document.getElementById('react-content')); 

setTimeout(function() { 
    var newline = { name: 'Added item', link: 'https://amazon.com' }; 
    items.push(newline); 
    ReactDOM.render(<RepeatModule items={items} />, document.getElementById('react-content')); 
}, 2000); 

非常感謝:)

Answer 1

裹父組件內的RepeatModule。項目應該是國家的一部分。有一個按鈕來添加新項目。單擊新項目時，將項目詳細信息傳遞給父組件。父組件應更新狀態。

您的代碼將無法正常工作，因爲您正在將項目推送到項目。在推動它之前你應該切片。 React使用===運算符檢查道具/狀態更改。

setTimeout(function() { 
    var newline = { name: 'Added item', link: 'https://amazon.com' }; 
    var newItems = items.slice(); 
    newItems.push(newline); 
    ReactDOM.render(<RepeatModule items={newItems} />, document.getElementById('react-content')); 
}, 2000); 

Answer 2

您可以使用反應狀態

工作演示：http://codepen.io/anon/pen/WGyamK

var RepeatModule = React.createClass({ 
    getInitialState: function() { 
     return { items: [ 
      { name: 'Matt', link: 'https://google.com' }, 
      { name: 'Adam', link: 'https://bing.com' }, 
      { name: 'Luke', link: 'https://yahoo.com' }, 
      { name: 'John', link: 'https://apple.com' } 
     ] } 
    }, 
    componentDidMount() { 
     var _this = this 
     setTimeout(function() { 
      var newline = { name: 'Added item', link: 'https://amazon.com' }; 
      _this.setState({items: _this.state.items.concat(newline)}); 
     }, 2000); 

    }, 
    render: function() { 

     var listItems = this.state.items.map(function(item) { 
      return (
       <li key={item.name}> 
        <a className='button' href={item.link}>{item.name}</a> 
       </li> 
      ); 
     }); 

     return (
      <div className='menu'> 
       <h3>The List</h3> 
       <ul> 
        {listItems} 
       </ul> 
      </div> 
     ); 
    } 
}); 
ReactDOM.render(<RepeatModule />, document.getElementById('react-content')); 

話雖這麼說，你應該使用一些庫trigerring的重新呈現給你。你來自Angular，所以首先你需要知道React不是像角度這樣的整個框架，而只是「MVC中的V」。

我使用與redux結合的反應。查看更多https://github.com/reactjs/redux。

有一些很好的樣板代碼可以快速入門。我喜歡這個https://github.com/davezuko/react-redux-starter-kit

希望你覺得這個有用。

Answer 3

反應文檔建議將異步調用放在componentDidMount方法中。通過AJAX

負載初始數據在componentDidMount獲取數據。當 響應到達時，將數據存儲在狀態中，觸發渲染到 更新您的UI。
https://facebook.github.io/react/tips/initial-ajax.html

這裏是一個演示：http://codepen.io/PiotrBerebecki/pen/KgZGao

const App = React.createClass({ 
    getInitialState: function() { 
    return { 
     items: [ 
     { name: 'Matt', link: 'https://google.com' }, 
     { name: 'Adam', link: 'https://bing.com' }, 
     { name: 'Luke', link: 'https://yahoo.com' }, 
     { name: 'John', link: 'https://apple.com' } 
     ] 
    }; 
    }, 

    componentDidMount: function() { 
    setTimeout(() => { 
     this.setState({ 
     items: [ 
      ...this.state.items, 
      { name: 'Added item', link: 'https://amazon.com' } 
     ] 
     }); 
    }, 2000); 
    }, 

    render: function() { 
    var listItems = this.state.items.map(function(item) { 
      return (
       <RepeatModule key={item.name} href={item.link} itemName={item.name} /> 
     ); 
    }); 

    return (
     <div> 
     <h3>The List</h3> 
     {listItems} 
     </div> 
    ); 
    } 
}); 


const RepeatModule = React.createClass({ 
    render: function() { 
     return (
      <div className='menu'> 
       <ul> 
       <li> 
        <a className='button' href={this.props.href}>{this.props.itemName}</a> 
       </li> 
       </ul> 
      </div> 
    ); 
    } 
}); 


ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);