Lift state up。基本上在App中定义状态，并将更新状态的处理程序向下传递给子组件，以便它可以使用新值调用它。
在这个例子中，我有一个呈现子组件的主组件。在那个组件中有一个div，它显示来自父状态的count，还有一个按钮，用来增加它的值。注意，一个函数（处理程序）被写在父组件中，然后对它的引用被传递到子组件的属性中--连同值一起。
当按钮被点击时，函数被调用。这将更新状态，导致新的呈现，并且更新的状态通过更新的值反映在子组件中。

const { Fragment, useState } = React;

function Example() {

  // Initialise state
  const [ count, setCount ] = useState(0);

  // A function called `handleClick` that
  // updates the state. This handler is passed down
  // to the child component via its props
  function handleClick() {
    setCount(prev => prev + 1);
  }

  // The child component accepts both the
  // `count` state, and the handler as its props
  return (
    <ChildComponent 
      count={count}
      handleClick={handleClick}
    />
  );

}

// We destructure the count and the (reference to the)
// function from the component's props.
// When the button is clicked it calls the handler.
// Changes to the state are reflected here when the parent
// component re-renders
function ChildComponent({ count, handleClick }) {
  return (
    <Fragment>
      <div>{count}</div>
      <button
        type="button"
        onClick={handleClick}
      >Increment count
      </button>
    </Fragment>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>