1.React Hooks带来了什么便利？
React Hooks是React16.8版本中引入的新特性，它带来了许多便利。
-
更简单的状态管理
使用useState Hook可以在函数组件中方便地管理状态，避免了使用类组件时需要继承React.Component的繁琐操作。 -
避免使用类组件：函数式组件的书写方式更加简单、直观，避免了类组件中this指针的混乱问题。
-
更少的重复代码：使用useEffect Hook可以方便地实现数据获取、DOM操作等副作用相关的操作，避免了在不同的生命周期函数中重复编写相似的代码。
-
更好的代码复用：自定义Hook可以将一些可复用的逻辑封装起来，方便在不同的组件中复用。
-
更好的逻辑分离：使用useContext、useReducer和自定义Hook等可以帮助将逻辑分离到独立的模块中，提高代码的可维护性和可扩展性。
总之，React Hooks带来了更加简单、直观、高效的编程方式，可以让开发者更加专注于组件的逻辑实现。使得React的函数组件也具备了类组件的一些特性。
2. 列举几个常见的 Hook?
-
useState Hook：用于在函数组件中管理状态，可以通过调用useState Hook来声明一个状态变量和更新函数，例如：
const [count, setCount] = useState(0); -
useEffect Hook：用于在函数组件中处理副作用，可以传入一个回调函数和一个依赖数组，例如：
useEffect(() => { // 处理副作用 }, [dependency]); -
useContext Hook：用于在函数组件中访问React Context中的值，例如：
3.1. 在MyContext.js中定义MyContext上下文对象：
import { createContext } from 'react';
const MyContext = createContext();
export default MyContext;
3.2. 在App.js中使用MyContext.Provider包裹Child组件，传递要共享的数据
import MyContext from './MyContext';
import Child from './Child';
function App() {
const data = 'hello world';
return (
<MyContext.Provider value={data}>
<Child />
</MyContext.Provider>
);
}
3.3 在Child.js中使用useContext函数获取到MyContext传递的值：
import MyContext from './MyContext';
function Child() {
const data = useContext(MyContext);
return <h1>{data}</h1>;
}
export default Child;
- useReducer Hook：用于在函数组件中管理复杂状态，可以将一个reducer函数和初始状态传入useReducer Hook，返回一个状态和派发更新的函数，例如：
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}
- useCallback Hook：用于在函数组件中缓存回调函数，避免因为每次渲染都重新创建回调函数导致子组件重复渲染，例如：
import React, { useState, useCallback } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment Count</button>
</div>
);
}
在这个示例中，我们使用了 useCallback Hook 缓存了 handleClick 函数。handleClick 会在点击按钮时被调用，并将 count 的值加 1。我们将 count 作为依赖数组传入 useCallback 中，确保每次 count 发生变化时，handleClick 函数都会被更新。
使用 useCallback Hook 可以避免在每次渲染时都创建新的函数引用，从而提高性能。这对于传递给子组件的回调函数尤其有用，确保子组件不会不必要地重新渲染。同时，也可以使用 useMemo Hook 缓存计算结果，从而进一步提高性能。
- useMemo Hook：提供的一个 Hook，用于缓存计算结果，避免在每次渲染时都重新计算，从而提高性能。它接收一个计算函数和一个依赖数组作为参数，返回缓存的计算结果。
例如：
import React, { useMemo, useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const expensiveCalculation = useMemo(() => {
console.log('Calculating...');
let result = 0;
for (let i = 0; i < count * 1000000; i++) {
result += i;
}
return result;
}, [count]);
return (
<div>
<p>Count: {count}</p>
<p>Expensive Calculation: {expensiveCalculation}</p>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
</div>
);
}
- useRef: 获取组件的真实节点或存储一些不常更新的数据，这些数据不受组件重新渲染影响。
- 获取真实节点
const ref = useRef(null)
<div ref ={ref} > </div>
// 设置真实节点属性 .current为固定用法
ref.current.style.color = 'red'
- 存储数据
const ref_obj = useRef({
name:'icy',
age:23
})
// 改变存储的数据
ref.obj.current.name = 'icy-godlike'
还有其他常用的Hook函数，如useImperativeHandle、useLayoutEffect等，开发者可以根据具体的需求选择不同的Hook函数。
