React 函数组件与类组件属性默认值

Posted 2023-04-06 卡尔特斯

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React 函数组件与类组件属性默认值相关的知识，希望对你有一定的参考价值。

一、函数组件

方式一：使用 defaultProps 设置默认值

import React from "react";
import PropTypes from 'prop-types';

function Sub (props) 
  return (
    <>
      <div>子组件</div>
       props.list.map((item, index) => <p key=index>item</p>) 
    </>
  )


class App extends React.Component 
  render () 
    return (
      <div>
        <Sub></Sub>
      </div>
    )
  


// 设置默认值
Sub.defaultProps = 
  list: [5, 6, 7]


// 给组件 Sub 的属性定义校验规则
Sub.propTypes = 
  // 指定 list 数据必须为数组
  list: PropTypes.array


export default App

推荐 方式二：使用 函数参数 设置默认值

import React from "react";
import PropTypes from 'prop-types';

// 默认值写这里
function Sub ( list = [7, 8, 9] ) 
  return (
    <>
      <div>子组件</div>
       list.map((item, index) => <p key=index>item</p>) 
    </>
  )


class App extends React.Component 
  render () 
    return (
      <div>
        <Sub></Sub>
      </div>
    )
  

// 给组件 Sub 的属性定义校验规则
Sub.propTypes = 
  // 指定 list 数据必须为数组
  list: PropTypes.array


export default App

二、函数组件

方式一：使用 defaultProps 设置默认值

import React from "react";
import PropTypes from 'prop-types';

class Sub extends React.Component 
  render () 
    return (
      <>
        <div>子组件</div>
         this.props.list.map((item, index) => <p key=index>item</p>) 
      </>
    )
  


class App extends React.Component 
  render () 
    return (
      <div>
        <Sub></Sub>
      </div>
    )
  


// 设置默认值
Sub.defaultProps = 
  list: [5, 6, 7]


// 给组件 Sub 的属性定义校验规则
Sub.propTypes = 
  // 指定 list 数据必须为数组
  list: PropTypes.array


export default App

方式二：使用 static defaultProps = 设置默认值

import React from "react";
import PropTypes from 'prop-types';

class Sub extends React.Component 
  // 设置默认值
  static defaultProps = 
    list: [5, 6, 7]
  
  render () 
    return (
      <>
        <div>子组件</div>
        /* 使用方式不变 */
         this.props.list.map((item, index) => <p key=index>item</p>) 
      </>
    )
  


class App extends React.Component 
  render () 
    return (
      <div>
        <Sub></Sub>
      </div>
    )
  


// 给组件 Sub 的属性定义校验规则
Sub.propTypes = 
  // 指定 list 数据必须为数组
  list: PropTypes.array


export default App

React - 偏好：函数组件与类组件[重复]

【中文标题】React - 偏好：函数组件与类组件[重复]【英文标题】：React - Preference: function component vs class component [duplicate] 【发布时间】：2020-09-03 16:10:34 【问题描述】：

类组件是否被废弃？

我看到在几个库中的示例将功能组件作为优先事项。

尤其是 React Navigation。

同样，React 本身与 Hooks 仅使它们可用于函数组件。

主要问题是：为什么功能组件的优先级如此之高？

【问题讨论】：

【参考方案1】：

不，我认为类组件今天不会被抛弃。也许在未来。

它们不像功能组件那样轻量级，但我在社区中看到很多使用类组件的项目。

但是，我们有一些社区支持Functional Components 方法的原因：

类组件需要更多代码，但也会给您带来一些您稍后会看到的好处（Babel 转译的代码也会更大）函数式组件只是一个普通的 JavaScript 函数，它接受 props 作为参数并返回一个 React 元素。函数式组件更易于阅读和测试，因为它们是纯 JavaScript 函数（代码更少）。 React 团队 mentioned 在未来的 React 版本中可能会提升功能组件的性能

看到这个答案：https://***.com/a/49613435/4119452

更多信息：https://www.twilio.com/blog/react-choose-functional-components

【讨论】：

减 1 用于放置需要拥有 Medium 帐户才能获取信息的媒体链接。 @me_digvijay 我刚刚从媒体中删除了链接，并从另一个来源发布了一篇很棒的文章。感谢您的关注！谢谢，让我收回自己【参考方案2】：

现在，类组件和功能组件几乎相同。在函数式组件中之前没有引入 Hooks，为了等效于类组件，函数式组件获得了新的钩子，如 useState、useRef、useMemo，它们等效于 this.state、React.createRef 和 PureComponent。

此外，类组件上的componentDidUpdate可以用于功能组件上的useEffect。

更多详情请查看 Functional Components vs Class Components in React 和 React JS — Understanding Functional & Class Components

【讨论】：

【参考方案3】：

Hooks-first 方法 [2020 年更新]

React 团队目前正在使用 Hooks-first 方法重新构建文档，这应该是所有新功能和应用程序的首选：

将来，类组件是否有可能被弃用？

类组件将在未来几年内出现——例如， Facebook 已经有数以万计的产品在生产。但是，我们确实建议使用功能构建新应用程序组件和 Hooks，这就是为什么我们希望这些文档放在前面和中心。

https://github.com/reactjs/reactjs.org/issues/3308

【讨论】：

以上是关于React 函数组件与类组件属性默认值的主要内容，如果未能解决你的问题，请参考以下文章

react浅探react函数组件与类组件

React - 偏好：函数组件与类组件[重复]

从0到1教你学会 react

React组件进阶