React Hook入门小案例 在函数式组件中使用state响应式数据

import React, { useState } from 'react';
 
function ExampleComponent() {
  // 使用React.useState钩子来保存一个state变量，初始值为'Hello, world!'
  const [greeting, setGreeting] = useState('Hello, world!');
 
  // 更新state变量的函数
  function handleChange(event) {
    setGreeting(event.target.value);
  }
 
  // 渲染UI，其中包含一个输入框和显示文本的p标签
  return (
    <div>
      <input type="text" value={greeting} onChange={handleChange} />
      <p>{greeting}</p>
    </div>
  );
}
 
export default ExampleComponent;

这段代码定义了一个名为ExampleComponent的函数式组件，它使用了Hook useState来管理一个名为greeting的state变量。它还包含一个处理输入变化的函数handleChange，该函数用于更新state变量。最终，这个组件渲染了一个输入框和一个段落，输入框的值绑定到state变量上，并且每次输入变化时，都会更新state变量，并重新渲染组件以显示新的输入值。