目录
编辑
前言
Hooks的前世
函数组件
类组件
状态和生命周期的管理
Hooks用途以及相应代码
状态管理
用于生命周期管理和副作用操作的 Hooks
用于上下文管理的 Hooks
其他用途的 Hooks
前言
React Hooks 是在 React 16.8 版本中引入的一个非常强大的新特性，它允许在不编写 class 组件的情况下使用 state 和其他 React 特性。Hooks 提供了一种更直接的方式来使用 React 的特性和生命周期功能，让函数组件的能力大大增强。
有关state状态的详细解释可以在这篇文章找到解释，粗糙理解就是app的数据flutter向 一文就够了 以声明式编程的角度理清到处都用的“状态state”是什么-CSDN博客
Hooks的前世
既然说到hooks在16.8才引入，那之前是怎么处理代码的呢
React 16.8 引入 Hooks 之前，React 的组件主要通过两种方式编写：函数组件和类组件
函数组件
在 React 16.8 之前，函数组件被称为无状态组件，主要用于展示，不能使用状态（state）和生命周期方法。函数组件的主要优点是简洁易懂。它接收 props 作为输入，返回需要渲染的 JSX。
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }类组件
类组件允许使用更多的特性，如内部状态（state）和生命周期方法。通过这些特性，可以控制组件的创建、更新和销毁过程。
class Welcome extends Component {constructor(props) {super(props);this.state = { counter: 0 };}componentDidMount() {// 组件挂载后执行}componentDidUpdate() {// 组件更新后执行}componentWillUnmount() {// 组件卸载前执行}render() {return <h1>Hello, {this.props.name}</h1>;}
}
状态和生命周期的管理
在 Hooks 出现之前，要在函数组件中使用状态和生命周期，开发者需要将其重构为类组件。这一点限制了函数组件的使用场景，也增加了组件代码的复杂性。
所以不难理解，这样会有如下麻烦
- 在组件之间复用状态逻辑很难： 在 Hooks 出现之前，复用状态逻辑需要高阶组件或渲染属性模式，这些模式使得代码难以理解。
- 复杂组件变得难以理解： 类组件经常需要理解 JavaScript 中的
this关键字，且代码往往分散在多个生命周期方法中。 - 难以理解的类： 对于初学者和非 JavaScript 背景的开发者来说，类是一个比较难以理解和使用的概念。
Hooks用途以及相应代码
状态管理
useState：这是最基本的 Hook，允许在函数组件中添加局部状态。状态通常是指组件中的数据，如用户输入、列表项等。
function Example() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
用于生命周期管理和副作用操作的 Hooks
useEffect：允许在函数组件中执行副作用操作（如数据获取、订阅或手动修改 DOM 等），它可以被看作是componentDidMount、componentDidUpdate和componentWillUnmount这些生命周期方法的组合。
function Example() {const [count, setCount] = useState(0);// 类似于 componentDidMount 和 componentDidUpdate:useEffect(() => {// 使用浏览器的 API 更新页面标题document.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
用于上下文管理的 Hooks
useContext：允许在函数组件中访问 React 的 Context 特性，使得跨组件层级的数据传递变得简单。
function Example() {const theme = useContext(ThemeContext);return <div style={{ background: theme.background, color: theme.color }}>我是使用了 ThemeContext 的文本</div>;
}
其他用途的 Hooks
useReducer：为状态管理提供了更复杂的替代方案，类似于 Redux 中的 reducer，适用于组件有复杂状态逻辑时使用。useCallback：返回一个记忆化的回调函数，只有在一个依赖项改变时才会更新，适用于传递给子组件的回调优化。useMemo：返回一个记忆化的值，只有在依赖项改变时才重新计算，用于性能优化。useRef：返回一个可变的 ref 对象，其.current属性被初始化为传入的参数（initialValue），用于访问 DOM 节点或存储任何可变值。
更多hook查看react官网
React 内置 Hook – React 中文文档
