React 函数式父子组件,父组件数据更新，子组件如何获取更新的值

在 React 函数式组件中，父组件的数据更新通常是通过 `useState` 或 `useReducer` 等 React 钩子函数实现的。如果想让子组件获取到更新后的值，可以通过将这些值以 `props` 的形式传递给子组件。

具体来说，可以在父组件中定义一个 `useState` 状态，用来保存需要传递给子组件的值。然后将这些值以 `props` 的形式传递给子组件，在子组件中通过 `props` 获取这些值，实现获取更新后的值。

示例代码如下：

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [data, setData] = useState('initial value');

  function handleDataChange(newValue) {
    setData(newValue);
  }

  return (
    <div>
      <p>Data in Parent Component: {data}</p>
      <ChildComponent data={data} onDataChange={handleDataChange} />
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent(props) {
  function handleClick() {
    const newValue = 'new value';
    props.onDataChange(newValue);
  }

  return (
    <div>
      <p>Data in Child Component: {props.data}</p>
      <button onClick={handleClick}>Update Data in Parent Component</button>
    </div>
  );
}

export default ChildComponent;

在上面的代码中，父组件中定义了一个 `data` 状态，初始值为 `'initial value'`，并将其以 `props` 的形式传递给子组件。同时，还定义了一个 `handleDataChange` 函数，用来更新 `data` 状态的值。在子组件中，可以通过 `props` 获取 `data` 的值，并在点击按钮时调用 `props.onDataChange` 函数来通知父组件更新 `data` 的值。这样，更新后的 `data` 值就可以在父组件和子组件中共享了。