函数式组件新设计，不再需要defaultProps！

前端

2023-12-29 05:18:25

函数式组件中的组件默认属性：摒弃defaultProps，拥抱JS默认参数

引言

在React的函数式组件中，设置组件默认属性一直是一个争论的话题。传统上，我们使用defaultProps，但现在React团队宣布了其弃用的决定，取而代之的是JS默认参数。

为什么弃用defaultProps？

React团队认为defaultProps存在几个缺点：

不必要性： JS默认参数提供了一种更简洁、更现代的方式来声明默认属性。
代码混乱： 同时使用defaultProps和JS默认参数可能会导致混乱和错误。
性能影响： React会先检查defaultProps，再检查JS默认参数，这可能会导致性能下降，尤其是在组件频繁渲染的情况下。

JS默认参数：新时代组件默认属性

在React函数式组件中，我们可以使用JS默认参数来声明组件默认属性。这是一种更简洁、更符合ES6语法的做法。

const MyComponent = (props) => {
  const {name = 'John Doe', age = 30} = props;
  // ...
};

在上面的示例中，我们在MyComponent函数的参数中使用=运算符设置了name和age的默认值。如果没有传入这些属性，则它们将使用默认值。

ES6默认参数：另一种选择

我们还可以使用ES6默认参数语法来声明默认属性：

const MyComponent = ({name = 'John Doe', age = 30}) => {
  // ...
};

这两种方法都可以，选择哪种方法取决于个人喜好。

代码示例

让我们用一个代码示例来说明如何在函数式组件中使用JS默认参数：

// MyComponent.js
const MyComponent = (props) => {
  const {name, age} = props;

  return (
    <div>
      <h1>{name || 'John Doe'}</h1>
      <p>{age || 30}</p>
    </div>
  );
};

// App.js
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default App;