React函数组件

React 函数组件是一种定义组件的方式，它通过纯函数的形式接收属性（props）并返回应当渲染的React元素。比起传统的基于类（class-based）的组件，函数组件通常更为简洁，因为它们不涉及React组件生命周期的管理，也不提供内置的this上下文。使用函数组件可以通过钩子（Hooks）如useState和useEffect等来利用React的状态管理和副作用处理能力。

渲染逻辑非常直接：当函数组件被渲染时，React调用它，传入props和上下文context（如果有使用的话）。组件执行并返回JSX，JSX随后被React转换成虚拟DOM，最后映射到实际的DOM中以展示在用户的屏幕上。每当组件的状态或者props变化时，组件函数会被重新调用并渲染出新的JSX，这样React就可以更新DOM以匹配新的输出。

函数组件的使用非常简单，定义一个函数，返回JSX，然后在需要的地方渲染它，就像使用普通的React元素一样。这种方式提高了代码的可读性与可维护性，并使得组件之间的复用和测试变得更加容易。

函数组件创建及使用

创建函数组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
 * @Description: 
 * @Author: xiuji
 * @Date: 2023-12-06 09:42:26
 * @LastEditTime: 2023-12-06 09:47:05
 * @LastEditors: Do not edit
 */

const Header = (props) => {
    console.log(props, 'props');
    return (
        <div>
            <h1>Header</h1>
        </div>
    )
}

export default Header

需要使用的地方引用

1
2
3
4
5
6
7
8
9
10
import React from 'react';
import ReactDOM from 'react-dom/client';
import Header from './views/header';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <Header name="testCom" style={{ color: 'red' }} class="header" />
  </>
);

组件属性props的处理

在React中，单向数据流是指数据以一种确定的方式从顶层组件流向底层组件。这种方式通过props体现，props在React组件中是如何处理的，可以概括为以下几个步骤：

  1. 传递：父组件将数据作为props传递给子组件。在JSX中，这看起来像是为子组件设置HTML属性一样简单。
1
<Header name="value" />
  1. 接收：子组件在其函数或类定义中接收props作为参数。这些props是一个对象，其中包含了传递给组件的所有属性。
1
2
3
4
function Header(props) {
  // 使用props中的someProp
  return <p>{props.name}</p>;
}

  1. 只读性：子组件内部不能修改接收到的props。React的设计哲学认为，所有组件都应该是纯净的，这意味着它们不应该改变输入的props。

  2. 更新：如果父组件的状态变化了，它可能需要更新传递给子组件的props。父组件在自己的状态更新后重新渲染，并向子组件传递新的props值。

1
2
3
this.setState({ newValue: 'updated value' }); // 父组件状态更新

<Header name={this.state.newValue} /> // 传递新的props
  1. 响应变化：当props变化时，子组件会重新渲染以反映新的props值。React会高效地更新DOM以匹配组件的渲染输出。

在整个过程中，props充当着从父组件到子组件的数据桥梁，并且始终保持只读性。如果子组件需要通知父组件对数据进行变更，它必须使用回调函数来通知父组件，而不能直接修改props。这样的设计强制实施了单向数据流，并且保证了组件之间的清晰契约，简化了应用的状态管理。

为属性设置默认值

1
2
3
4
5
/* 通过把函数当对象，设置静态的私有属性 */
Header.defaultProps = {
  name: 'testProps'
}
// 函数组件.defaultProps = { ... }

为属性设置规则校验（依赖于官方插件：prop-types）

  1. 安装prop-types插件

    1
    2
    3
    npm install prop-types

    yarn add prop-types

  2. 导入 prop-types：

    1
    import PropTypes from 'prop-types'

  3. 声明组件的 propTypes：

    使用 PropTypes 对象来定义组件的 propTypes 属性，这告诉 React 你期望每个 prop 是什么类型。

    1
    2
    3
    4
    5
    Header.propTypes = {
        name: PropTypes.string.isRequired
    }

    // 函数组件.propTypes = { ...: PropTypes... }

PropTypes 提供了各种验证器来确保你接收到的数据类型是正确的。例如：

  • PropTypes.array
  • PropTypes.bool
  • PropTypes.func
  • PropTypes.number
  • PropTypes.object
  • PropTypes.string
  • PropTypes.symbol
  • PropTypes.node // 任何可以被渲染的东西：数字，字符串，元素或者数组（或片段）
  • PropTypes.element // 一个 React 元素
  • PropTypes.instanceOf(ClassName) // 类的实例
  • PropTypes.oneOf(['News', 'Photos']) // 枚举值
  • PropTypes.oneOfType([PropTypes.string, PropTypes.number]) // 多个类型中的一个
  • PropTypes.arrayOf(PropTypes.number) // 特定类型的数组
  • PropTypes.objectOf(PropTypes.number) // 特定类型的对象属性值
  • PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }) // 特定形状参数的对象
  • PropTypes.any // 任何类型

使用 PropTypes 进行类型检查有助于开发阶段捕获问题，但是请注意，它是一个运行时检查，这意味着它不会在编译阶段改变代码，而且在生产构建中可能会因为性能考虑而被忽略。