javascript - defaultProps 中的随机数据

Question

我使用 React 很长时间了，我遇到了一个有趣的问题:基本上，我想使用 defaultProps 作为 fallbackProps - 这就是它们的用途，但有一个困难 - 来自无状态/class extend Component API 的 defaultProps 属性和缓存的 getDefaultProps()来自 React.createClass API 是不可变的(并且是常量)。

例子:

var ExampleComponent = React.createClass({
    getDefaultProps: function () {
        return {
            number: Math.random()
        };
    }
    // ...
});

// or equivalent with ES6 classes

class ExampleComponent extends React.Component {
    // ...
}

ExampleComponent.defaultProps = {
    number: Math.random()
};

// then...

<main>
    <ExampleComponent />            // cached random
    <ExampleComponent />            // cached random
    <ExampleComponent number={1} /> // 1
    <ExampleComponent />            // cached random
    <ExampleComponent />            // cached random
</main>

问题是，我想要dynamic defaultProps - 为每个组件实例分开。

例子:

<main>
    <ExampleComponent />            // fresh random
    <ExampleComponent />            // fresh random
    <ExampleComponent number={1} /> // 1
    <ExampleComponent />            // fresh random
    <ExampleComponent />            // fresh random
</main>

我知道，使用 state 很容易实现这种行为(getInitialState 是per-component)，但我想知道它是否在没有状态和没有 HOC 或类似方法的情况下是可能的。

Answer 1

是的。这可以通过使用 ES5 getter 来定义 defaultProps 对象来实现:

ExampleComponent.defaultProps = Object.create({}, {
  number: {
    enumerable: true,
    get: () => Math.random()
  }
});

Demo

如您所见，defaultProps 是一个静态成员，因此每个类只初始化一次。但是，当 React.createElement 被调用时，它会通过枚举所有属性并将它们复制到一个新的空白对象来创建 defaultProps 的新副本(此枚举是为什么必须在描述符中设置 enumerable: true)。 Relevant part of React's source :

  // Resolve default props
  if (type && type.defaultProps) {
    var defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }

defaultProps[propName] 调用 getter，这会导致生成一个新的随机数，然后将其存储在 props 中。