react中的useState和Hook、副作用

react的组件分为类组件和函数组件，Hook 是一种特殊的函数，可以让你在函数组件中使用类组件中才有的一些特性。useState、useEffect、useReducer都是Hook。其中useState用于在函数组件中添加状态，useEffect用于在函数组件中执行副作用，而useReducer则是useState的加强版。在 React 中，“副作用”（side effect）通常指的是那些在组件渲染之外发生的操作，即那些不直接参与 UI 渲染的行为。这些副作用可以包括数据获取、订阅服务、记录日志、修改 DOM、设置定时器等任何与组件渲染本身无关的操作。

一、useState

react、vue这类框架，我看都属于单页面应用（SPA）。也就是，所有的内容呈现，都在一张页面中完成。我们所看到的其中千变万化，内有乾坤，都是javascript控制的结果。javascript改变页面中变量或元素的值，页面需要重新渲染才能反映最新结果。那么如何才能让页面重新渲染反映最新结果呢，在vue中，大概就是要将变量声明为所谓响应式，比如

const state = reactive({v1:0,v2:false
})

而在react中，就稍有点复杂。react也是组件式开发，但它的组件分为类组件和函数组件。类组件出现时间较早，较为笨重，函数组件是后来才有的，相对较为轻盈，且越来越流行。当然，类组件也不可或缺，各自有适用场景。比如当需要用到生命周期事件时，就要使用类组件。比如组件加载完毕就怎样怎样，组件卸载又如何如何，诸如此类。

react中，如果是类组件，使用 this.state 来定义组件的状态，使用 this.setState() 方法来更新状态。如果是函数组件则使用useState来设置状态。

1、类组件中控制状态

import React, { Component } from 'react';class Counter extends Component {constructor(props) {super(props);this.state = {count: 0};this.handleIncrement = this.handleIncrement.bind(this);this.handleReset = this.handleReset.bind(this);}handleIncrement() {this.setState(prevState => ({count: prevState.count + 1}));}handleReset() {this.setState({ count: 0 });}render() {return (<div><p>Count: {this.state.count}</p><button onClick={this.handleIncrement}>Increment</button><button onClick={this.handleReset}>Reset</button></div>);}
}export default Counter;

2、函数组件中使用useState控制状态

useState 接受一个参数作为初始状态，并返回一个包含两个元素的数组：

import React, { useState } from 'react';function Example() {// 设置初始状态为 0const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

二、useReducer

useReducer是useState的威力加强版（也就是说，它也只用在函数组件中）。useReducer 通常用于替代 useState，当状态逻辑变得更加复杂时，使用 useReducer 可以让代码更易于理解和维护。

useReducer 接受一个 reducer 函数和一个初始状态作为参数，并返回一个包含当前状态和一个 dispatch 函数的数组。其中reducer函数是自定义的，主要是根据参数来设置各个状态值。也就是说，useState设置一个状态值，而useReducer可以设置多个状态值。而dispatch函数则负责执行reducer函数。（真绕啊）

import React, { useReducer } from 'react';function counterReducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };case 'reset':return { count: 0 };default:throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(counterReducer, { count: 0 });return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button><button onClick={() => dispatch({ type: 'reset' })}>Reset</button></div>);
}export default Counter;

三、useEffect

useEffect用于在函数组件中执行副作用操作。副作用可以包括数据获取、订阅服务、记录日志、直接操作 DOM 等与渲染本身不直接相关的操作。

1、类组件执行副作用操作

类组件可以通过生命周期方法来处理副作用，例如：

componentDidMount 用于在组件挂载后执行副作用。
componentDidUpdate 用于在组件更新后执行副作用。
componentWillUnmount 用于在组件卸载前清理副作用。

2、函数组件中执行副作用操作

函数组件，可以使用 useEffect Hook 来处理副作用。useEffect就是类组件中上述三个生命周期方法（componentDidMount 、componentDidUpdate、componentWillUnmount）的综合体。

useEffect 接受一个回调函数作为第一个参数，该回调函数会在组件渲染之后执行。它还可以接受一个可选的依赖项数组作为第二个参数，该数组定义了哪些变量的变化会导致副作用回调重新运行。

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;// 清理副作用return () => {document.title = 'React App';};}, [count]); // 依赖项数组，只在 count 改变时运行return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

当 useEffect 的依赖项数组为空时，这意味着副作用回调函数仅会在组件挂载完成后运行一次，并且在组件卸载前运行清理函数（如果有的话）。这是因为空数组 [] 表示没有任何依赖项，所以副作用回调不会因为任何状态或属性的变化而重新运行。

import React, { useEffect } from 'react';function Example() {useEffect(() => {console.log('Component mounted');// 设置一个定时器const timer = setInterval(() => {console.log('Timer tick');}, 1000);// 清理副作用return () => {console.log('Component will unmount');clearInterval(timer); // 清除定时器};}, []); // 依赖项为空数组return (<div><p>Hello, World!</p></div>);
}

四、Hook

1、Hook专属于类组件

在 React 中，Hooks 是一种允许在函数组件中使用状态和其他 React 特性的机制。Hooks 使得函数组件能够具有与类组件相同的功能，同时保持代码的简洁性和可读性。

2、Hooks 的规则

为了确保 Hooks 正确工作，需要遵循以下规则：

只在顶层调用 Hooks：不要在循环、条件或嵌套函数内部调用 Hooks。
只在 React 函数中调用 Hooks：不要在普通的 JavaScript 函数中调用 Hooks。

通过遵循这些规则，可以确保 Hooks 在每次渲染时都按照预期工作，并且状态管理逻辑是可预测的。

3、常用Hooks

一些常用的 Hooks：

useState
用于在函数组件中添加状态。它接受一个初始值，并返回一个状态值和一个更新该状态的方法。

useEffect
用于执行副作用操作，如数据获取、订阅或手动更改 DOM。它类似于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount。

useContext
用于消费 React Context 对象中的值。这比使用 Consumer 组件或 withContext 高阶组件更简洁。

useReducer
类似于 useState，但它允许你使用 Reducer 模式管理状态，这对于复杂的组件状态非常有用。

useCallback
用于返回一个被优化过的函数引用，以避免在每次渲染时创建新的函数。

useMemo
用于缓存昂贵的计算结果，以避免在每次渲染时重新计算。

useRef
创建一个可变的引用对象。它的 .current 属性被初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期内保持不变。

useImperativeHandle
自定义暴露给父组件的 ref 的值。

useLayoutEffect
类似于 useEffect，但在所有 DOM 更新完成后同步运行。这使得它适合于布局相关的操作。

五、副作用

在 React 中，术语“副作用”（side effect）用来描述那些不在组件渲染过程中直接发生的操作。换句话说，副作用是指那些在组件的生命周期中执行的、与 UI 渲染逻辑无关的操作。这些操作可能会对应用程序的状态、DOM 或外部系统产生影响。

1、为什么称为“副作用”

副作用这个词来源于函数式编程的概念，在函数式编程中，一个纯粹的函数只依赖于它的输入参数，并且只产生输出而不修改任何外部状态。在这样的环境中，函数不应该有除了返回值之外的任何其他效果。然而，在实际的编程中，特别是在 React 这样的框架中，我们经常需要执行一些非纯粹的操作，比如数据获取、DOM 操作、设置定时器等。这些操作虽然不是纯粹的，但对于应用程序的正常运行是必不可少的。

在 React 中，常见的副作用包括但不限于：

1）数据获取:
从服务器或其他数据源获取数据。
通常在组件加载时或状态/属性发生变化时执行。

2）订阅服务:
订阅 WebSocket、RSS Feed 或其他实时数据流。
在组件卸载时取消订阅以避免内存泄漏。

3）设置定时器:
使用 setTimeout 或 setInterval 来执行延迟或周期性的任务。
在组件卸载时清除定时器以避免内存泄漏。

4）记录日志:
记录用户交互或调试信息。
不直接影响 UI 的渲染过程。

5）直接操作 DOM:
修改页面上的元素，而不是通过 React 的虚拟 DOM。
这种做法一般不推荐，但在某些情况下可能是必需的。

2、为什么需要处理副作用

处理副作用很重要，因为它们有助于组件与外部世界交互，例如从服务器获取数据或更新外部服务的状态。此外，适当的清理副作用也很重要，以避免内存泄漏或不必要的资源消耗。