03. 组件

分为 class 组件和 function 组件，class 组件已经基本不用，现在每个 React 组件都是一个 JavaScript 函数

React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母

父子组件通信

父传子：props

React 组件使用 props 来进行组件之间的通讯，直接通过类似写 HTML 特性的形式传参

父

function Parent() {
  return (
    <Child value="hello"></Child>
  )
}

子

function Child(props) {
  return (
    <div>{props.value}</div>
  )
}

每次渲染都会收到新版本的 props，不能改变 props。当需要交互性时可以设置 state

父访问子

forwardRef

在 React 18 及更早版本中，需要通过 forwardRef 来获取子组件的 ref。
从 React 19 开始， ref 可直接作为组件的 prop 使用。就不需要 forwardRef 了（已废弃）。

useImperativeHandle

配合 ref 使用，子组件只暴露想要父组件去调用的方法

跨层级祖孙通信

Context

1.创建 Context：

// 新建 `MyContext.js`
 
import { createContext } from 'react';
 
export const MyContext = createContext(defaultValue);

2.上层组件提供 Context:

import { MyContext } from './MyContext.js';
 
// 祖父组件 - 提供数据
export default function A() {
  return (
      <MyContext value={1}>
        <Parent />
      </MyContext>
  );
}
 
// 父组件 - 中间组件，不传递任何 props
function Parent() {
  return (
    <div>
      <Child />
    </div>
  );
}

3.孙组件使用 Context:

import { useContext } from 'react';
import { MyContext } from './MyContext.js';
 
// 孙组件 - 消费 Context 数据
export default function C() {
  const context = useContext(MyContext); // 读取到 1
  // ...
}

插槽

在 JSX 标签中嵌套 JSX 时，父组件将在名为 children 的 prop 中接收到该内容

function Parent() {
  return (
    <Child value="hello">
      <Comp />
    </Child>
  )
}
 
function Child({ children }) { // 解构语法
  return (
    <div>{children}</div> // 直接渲染传入的 jsx: <Comp />
  )
}

React 内置组件

• <Fragment>：作为空的父节点（因为 react 只能有一个 root 节点），简写：<>...</>
• <Suspense>：允许在子组件完成加载前展示后备内容
• <Profiler>：可以编程式测量 React 树的渲染性能
• <StrictMode>：在开发过程中尽早地发现组件中的常见错误