跳到主要内容

子组件的三个参数

接收的参数

在 React 中，子组件接收的三个参数通常是 props、state 和 context 。

props：props 是从父组件传递到子组件的属性，子组件可以通过 this.props 来访问这些属性。
state：state 是组件的内部状态，子组件可以通过 this.state 来获取和修改自己的状态。父组件可以通过 props 将一部分 state 传递给子组件，并通过更新父组件的 state 来重新渲染子组件。
context：context 是一种在组件树中共享数据的方法。父组件可以通过设置 context，子组件可以通过 this.context 来访问共享的数据。

在最新的 React 版本中，官方已经推荐使用 React Hooks 来代替类组件中的 state 和生命周期方法。

使用 Hook 方式

props：在函数组件中，可以直接通过函数的参数接收传递进来的 props。

function MyComponent(props) {
  // 使用 props
}

state：可以使用 useState Hook 来定义和修改组件的状态。它返回一个状态值和一个用于更新状态的函数。

import React, { useState } from 'react'

function MyComponent() {
  const [state, setState] = useState(initialState)

  // 使用 state 和 setState
}

context：可以使用 useContext Hook 来获取共享的数据。在父组件中使用 createContext 创建一个 context，然后在子组件中使用 useContext 进行订阅。

import React, { createContext, useContext } from 'react'

// 创建 context
const MyContext = createContext()

// 父组件中设置共享的数据
function ParentComponent() {
  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  )
}

// 子组件中订阅共享的数据
function ChildComponent() {
  const data = useContext(MyContext)
  // 使用共享的数据
}

通过这种函数式写法，可以在函数组件中实现类似于类组件中的 props、state 和 context 的功能。

接收的参数
使用 Hook 方式