React 中父子组件如何通信？

推荐答案

在 React 中，父子组件之间的通信主要通过以下两种方式实现：

1. 父组件向子组件传递数据：父组件通过 props 将数据传递给子组件。
2. 子组件向父组件传递数据：父组件通过 props 将一个回调函数传递给子组件，子组件调用该回调函数并将数据作为参数传递回父组件。

示例代码

-- -------------------- ---- -------
-- ---
------ ------ - -------- - ---- --------
------ -------------- ---- -------------------

-------- ----------------- -
  ----- --------- ----------- - --------------- ---- ---------

  ----- ------------------ - -------------- -- -
    -------------------------
  --

  ------ -
    -----
      ------------------
      --------------- ------------------------------ --
    ------
  --
-

------ ------- ----------------

-- ---
------ ----- ---- --------

-------- ---------------- --------- -- -
  ----- ------------------- - -- -- -
    ---------------- ---- --------
  --

  ------ -
    -----
      ------- ---------------------------------- ------- -- ---------------
    ------
  --
-

------ ------- ---------------

本题详细解读

父组件向子组件传递数据

在 React 中，父组件可以通过 props 将数据传递给子组件。子组件通过 props 接收父组件传递的数据，并在组件内部使用这些数据。

• 优点：简单直接，适用于单向数据流。
• 缺点：如果数据层级较深，可能会导致 props 传递过多，代码冗余。

子组件向父组件传递数据

子组件可以通过调用父组件传递的回调函数，将数据传递回父组件。父组件在回调函数中处理子组件传递的数据。

• 优点：灵活，适用于需要子组件向父组件传递数据的场景。
• 缺点：需要定义回调函数，可能会增加代码复杂度。

使用场景

• 父组件向子组件传递数据：适用于展示型组件，子组件仅负责展示父组件传递的数据。
• 子组件向父组件传递数据：适用于交互型组件，子组件需要将用户输入或操作结果传递给父组件进行处理。

注意事项

• 单向数据流：React 推崇单向数据流，数据从父组件流向子组件，子组件通过回调函数将数据传递回父组件。
• 避免过度使用回调：如果回调函数过多，可能会导致代码难以维护，建议合理设计组件结构，避免过度依赖回调函数。