react hooks 父子传值

React Hooks 提供了一些函数来处理父子组件之间的传值，其中最常用的是 useState 和 useContext。

useState 可以在父组件中定义一个状态，然后将该状态和修改该状态的函数传递给子组件。子组件可以使用该函数来修改父组件中的状态。

useContext 可以在父组件中创建一个 Context 对象，并将该对象传递给子组件。子组件可以使用 useContext 函数来获取父组件中的状态，而不需要通过 props 传递。

下面是一个使用 useState 和 useContext 的简单示例：

import React, { useState, createContext } from 'react';

const CounterContext = createContext();

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <<Child setCount={setCount} />
      <CounterContext.Provider value={count}>
        <<Grandchild />
      </CounterContext.Provider>
    </div>
  );
}

function Child({ setCount }) {
  return (
    <button onClick={() => setCount(count => count + 1)}>
      Increment
    </button>
  );
}

function Grandchild() {
  const count = useContext(CounterContext);

  return (
    <h2>Count from context: {count}</h2>
  );
}

在这个例子中，父组件定义了一个状态 count，并将其和修改状态的函数 setCount 传递给了 Child 组件。Child 组件通过调用 setCount 函数来增加 count 的值。

然后，父组件创建了一个 CounterContext 对象，并将 count 的值传递给了 Grandchild 组件。Grandchiild 组件使用 useContext 函数获取 count 的值，并将其显示在页面上。

这个例子展示了如何在父子组件之间传递值，并且展示了 useState 和 useContext 的使用方法。