React-分解时的defaultProps vs ES6默认参数（性能问题）

Z时代
2024-01-10
分类：问答

我只是在我的之一中设置默认值时遇到了一个关于React性能的问题。

此组件有defaultProps其定义row: false，但我不喜欢它，因为defaultProps是

的文件，这实际上使得它很难看到的。因此，我们不知道默认属性。因此，我将其直接移至函数声明，并使用ES6默认参数值对其进行了分配。

const FormField = ({
  row = false,
  ...others,
}) => {
  // logic...
};

但是随后我们与一位同事争论说这。因为这样做似乎很简单，但由于默认值，因此对性能也可能有很大影响。

我相信在这种情况下，这是微不足道的。因为它是布尔值，而不是对象/数组，因此在对帐期间不会被视为不同的值。

但是，现在让我们来看一个更高级的用例：

const FormField = ({
  input: { name, value, ...inputRest },
  label = capitalize(name),
  placeholder = label,
  row = false,
  meta: { touched, error, warning },
  ...others,
}) => {
  // logic...
};

在此，我基于placeholderfrom

的值label，其本身基于input.name。将ES6解构与参数的默认值一起使用可使整件事非常容易编写/理解，并且就像一个魅力。

但这是个好主意吗？如果没有，那么您将如何正确执行呢？

回答：

我在Discord #reactiflux频道上与几个人进行了交谈，实际上得到了我想要的答案。

React组件基本上有三个用例，在其中一些中，解构参数会影响性能，因此了解幕后情况很重要。

无状态功能组件

const MyComponent = ({ name = 'John Doe', displayName = humanize(name), address = helper.getDefaultAddress() }) => {
  return (
    <div>{displayName}</div>
  );
};

这是一个无状态的功能组件。没有状态，它是有功能的，因为它不是Class实例，而是简单的函数。

在这种情况下，没有生命周期，您不能有componentWillMount或shouldComponentUpdate或constructor那里。而且由于没有生命周期的管理，因此对性能没有任何影响。此代码是完全有效的。有些人可能更喜欢displayName在函数体内处理默认值，但最终并不重要，它不会影响性能。

无状态非功能组件

（不要这样做！）

class MyComponent extends React.Component {
render() {
        const { name = 'John Doe', displayName = humanize(name), address = helper.getDefaultAddress() } = this.props;
        return (
            <div>{displayName}</div>
          );
    }
}

这是无状态的非功能组件。没有状态，但由于是状态，所以它不是“功能性”的class。并且由于它是一个扩展类，React.Component所以它意味着您将拥有一个生命周期。你可以有componentWillMount或shouldComponentUpdate或constructor有。

而且，由于它具有生命周期，因此编写此组件的方式很。但为什么？

简而言之，React提供了一个defaultProps属性来处理默认的props值。实际上，在处理非功能组件时最好使用它，因为所有依赖的方法都将调用它this.props。

先前的代码段创建了名为name和的新局部变量displayName，但是

。如果您希望将默认值应用于每种方法，例如React生命周期中的默认值（shouldComponentUpdate，等等），则

使用defaultProps相反的值。

因此，先前的代码实际上是一个错误，可能导致对的默认值的误解name。

要获得相同的行为，应改用以下方法：

class MyComponent extends React.Component {
    render() {
        const { name, displayName = humanize(name), address } = this.props;
        return (
            <div>{displayName}</div>
          );
    }
}
MyComponent.defaultProps = {
    name: 'John Doe',
    address: helper.getDefaultAddress(),
};

这个更好。因为John Doe如果未定义名称，它将始终存在。address还处理了默认值，但不处理displayName…为什么？

好吧，我还没有找到解决这个特殊用例的方法。因为displayName应当基于name属性，所以我们在定义时无法访问（AFAIK）defaultProps。我看到的唯一方法是render直接在方法中处理它。也许有更好的方法。

我们的address属性没有这个问题，因为它不是基于MyComponent属性，而是依赖于完全独立的东西，不需要道具。