React 组件状态的默认函数参数值

Question

今天给同事复习了一下，发现了一个让我感兴趣的函数定义。如果函数调用没有提供参数，他在一个带有默认参数值的反应组件内实现了一个函数。他使用一个state值作为默认参数。

它看起来像这个例子：

class CustomComponent extends React.Component {

    constructor(props) {

         this.state = {

             loadedData = [], // array of objects

         };

         this.filterDates = (fromUtc, toUtc, loadedData = this.state.loadedData) {

             // do something with 'loadedData' based on time range 'fromUtc' and 'toUtc'

         }

    }

}

他无法给我一个很好的解释。只有它在他的实施中起作用。

我一直使用“静态”默认参数值（例如[]，数字等）。我很好奇是否可以使用某种“动态”默认参数，它会随着state变化而改变。

这样写可以吗？会不会有问题的案例？

Answer 1

根据Airbnb Javascript Style Guide -es6 默认参数，这种方法很好。但是，我质疑将默认值分配给根据定义是可变的状态，除非它是所需的效果。默认参数不应该是可变的。就个人而言，我第一次看到这种方法，我认为它不直观，但也许这只是我的经验。在我看来，下面的代码更干净、更容易理解并且错误更少：class CustomComponent extends React.Component {    constructor(props) {         this.state = {             loadedData = [], // array of objects         };         this.filterDates = (fromUtc, toUtc, loadedData = []) => {             // do something with 'loadedData' based on time range 'fromUtc' and 'toUtc'         }    }}

Answer 2

在构造函数中，this.state 是一个简单的对象，没有任何神奇的状态特性。因此，与第二个loadedData = this.state.loadedData相同，loadedData = []但第二个更具可读性。