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

React函数式组件

特点

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

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

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

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

 useState, useEffect

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 提供给子组件。）

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;