Question

我总是直接使用props而不将其设置为state，并且效果很好，但是我应该真正从props设置state，然后使用该状态。有什么区别？

 function createGraph() {
    var sheet = SpreadsheetApp.getActiveSheet() // You can replace this with gettingSheetbyName()
       // Read variables
       var startRow1 = 13;  // What row to start reading at
       var startColumn1 = 8;  // What column to start reading
       var startRow2 = 13;  // What row to start reading at
       var startColumn2 = 13;  // What column to start reading  
       var numOfColumns = 4;  // Number of columns to read   
     // Graph variables
        var posX1 = 6;  // Column to anchor graph to
        var posX2 = 12;  // Column to anchor graph to
        var posY = 16;  // Row to anchor graph to
        var width = 600; // Graph Width
        var xTitle = 'Condition'; // XAxis Title
        var yTitle = 'Number of Records'; // YAxis Title
        var chartType = Charts.ChartType.COLUMN; // Chart Type
        var range1 = sheet.getRange(startRow1, startColumn1,  sheet.getLastRow()-startRow1+1, numOfColumns);
        var range2 = sheet.getRange(startRow2, startColumn2,  sheet.getLastRow()-startRow2+1, numOfColumns);

        var chart1 = sheet.getCharts()[0];
        var chart2 = sheet.getCharts()[0];

 //If charts already exist, update them
   if (chart1){
     chart1.modify()
     .removeRange(chart1.getRanges()[0])
     .addRange(range1)
     .setPosition(posY, posX1, 0, 0)
     .setOption('width', width)
     .setOption('vAxis.title', yTitle)
     .setOption('hAxis.title', xTitle)
     .setChartType(chartType)
     .build();
     sheet.updateChart(chart1);
   }
    //If not, create them
   else {
     var chart1 = sheet.newChart();
     chart1.addRange(range1)
     .setPosition(posY, posX1, 0, 0)
     .setOption('title', 'Out of Box Failure')
     .setOption('width', width)
     .setOption('vAxis.title', yTitle)
     .setOption('hAxis.title', xTitle)
     .setChartType(chartType);
     sheet.insertChart(chart1.build());
   }
    //If charts already exist, update them
   if (chart2){
     chart2.modify()
     .removeRange(chart2.getRanges()[0])
     .addRange(range2)
     .setPosition(posY, posX2, 0, 0)
     .setOption('width', width)
     .setOption('vAxis.title', yTitle)
     .setOption('hAxis.title', xTitle)
     .setChartType(chartType)
     .build();
     sheet.updateChart(chart2);
   }
    //If not, create them
   else {
     var chart2 = sheet.newChart();
     chart2.addRange(range2)
     .setPosition(posY, posX2, 0, 0)
     .setOption('title', 'Deliver quality')
     .setOption('width', width)
     .setOption('vAxis.title', yTitle)
     .setOption('hAxis.title', xTitle)
     .setChartType(chartType);
     sheet.insertChart(chart2.build());
   }

 }

Answer 1

如果值相同，则确实没有必要。考虑到每次使用this.setState()都会导致组件的其他重新渲染。付出的代价很小，但是如果您说10000条消息，那以后可能会意味着更多。因此，通过更新state不会带来任何好处。只需直接使用道具即可。

如果您打算将这些道具用作中介检查，则更新状态会很有意义。假设您有这样的事情：

class App extends React.Component{
   state = {
     display: none
   }

   componentDidUpdate(){
      if(this.props.data.length > 0){
        this.setState({
           display: true
        })
      }
   }

   render(){
     <div>
       { this.state.display ? "Show value" : "" }
     </div>
   }
}

我们可以使用道具更新状态值，该状态值确定我们是否应该显示一些内容。

Answer 2

最好使用props中的数据，而无需更新它来声明仅添加2 3行代码和setState函数的额外执行，但是用户不会有任何不同。

反应，我应该从道具设置状态吗？

2 个答案: