react 18 Hooks扩展函数式组件的状态管理

React函数式组件

特点

React函数式组件具有以下特点：

简洁：使用函数的方式定义组件，语法简单直观。
无状态：函数式组件没有内部状态（state），只依赖于传入的props。
可复用：函数式组件易于复用，可以在多个地方使用相同的组件函数。
易于测试：函数式组件是纯函数，只依赖于输入的props，因此易于编写测试用例。

React提供了Hooks作为函数式组件的扩展，它们使函数式组件能够拥有状态和其他特性，例如使用useState来管理组件的状态、使用useEffect来处理副作用等。（注：副作用的来源：配置文件、用户的输入、数据库等等，所有的外部交互都有可能产生副作用，副作用会给程序带来安全隐患和不确定性，要尽可能的控制副作用在可控制的范围内发生。）

以下是一个使用Hooks扩展函数式组件的示例

useState, useEffect

javascript">import React, { useState, useEffect } from 'react';

function Counter(props) {
  const [count, setCount] = useState(0); //第一个为变量名，第二个参数为修改的方法

  useEffect(() => {  //相当于监听
    document.title = `Count: ${count}`;
  }, [count]);      //指定要监听的变量，发生变化后会执行第一个参数（函数）
                    //什么也不传的话，每一个useState变量变化都会执行
                    //传入空数组[]的话，只会在页面挂载的时候执行

  return (
    <div>
      <p>Count: {props.name}</p>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在上面的示例中，我们使用useState来创建了一个名为count的状态变量，并使用setCount函数来更新状态。我们还使用了useEffect来在组件渲染后更新文档标题，并在count发生变化时进行更新。

通过 useContext 获取上下文的值（在父组件ParentComponent中，我们将需要共享的数据 name通过 MyContext.Provider 提供给子组件。）

javascript">import React, { createContext, useContext } from 'react';

// 创建一个上下文
const MyContext = createContext();

// 父组件
const ParentComponent = () => {
  const name = 'John';

  return (
    <MyContext.Provider value={name}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// 子组件
const ChildComponent = () => {
  // 使用 useContext 获取上下文的值
  const name = useContext(MyContext);

  return <h1>Hello, {name}!</h1>;
};

// 渲染应用
const App = () => {
  return <ParentComponent />;
};

export default App;