新闻中心

react hook

发布时间：2024-10-15 08:13:50 点击量：55

React Hooks 是 React 16.8 中引入的全新功能。它使函数组件在功能上更加接近类组件，同时提供了一种更简洁、更直观的方式来管理状态和生命周期。

React Hooks 的优势

状态逻辑简单化

使用类组件时，管理状态逻辑通常需要通过 this.state 和 this.setState。而使用 hooks，如 useState，可以在函数组件中直接定义和更新状态，而不需要类的复杂性。
```
const [count, setCount] = useState(0);
```
少了冗长的生命周期方法

类组件必须使用多个生命周期方法来管理组件的不同阶段，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。通过使用 useEffect，可以在同一个地方处理这些生命周期逻辑，从而简化了代码并减少了潜在的错误。
```
useEffect(() => {
 // 在组件挂载和更新后执行的代码
 return () => {
   // 在组件卸载时执行的清理工作
 };
}, [dependencies]);
```
更好的代码重用

在类组件中，重用状态逻辑的主要方法是使用高阶组件或 render props，这些技术会导致组件树过度嵌套并使代码难以阅读。Hooks 提供了一种通过自定义 hooks 来重用逻辑的新方式，使代码更具可读性和可维护性。
函数优先思想

React 社区，现在越来越倾向于使用函数式编程思想。函数组件更简单，并且可以很容易地组合在一起，而 hooks 提供了在函数组件中使用状态和其他 React 特性的能力。

常用 React Hooks

useState

useState 是一个最基础的 hook，用于在函数组件中添加状态。它接受初始状态作为参数，并返回一个包含当前状态和更新函数的数组。
```
const [count, setCount] = useState(0);
```
useEffect

useEffect 用于在组件的生命周期中执行副作用操作。它可以用来读取数据、直接 DOM 操作、启动和清除订阅等等。
```
useEffect(() => {
 document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 改变时执行
```
useContext

useContext 允许函数组件访问上下文，这是 React 提供的一种用于跨组件共享数据的方法。
```
const value = useContext(MyContext);
```

useReducer

useReducer 是 useState 的替代方案，适合于更复杂的组件状态逻辑。

const initialState = { count: 0 };

function reducer(state, action) {
 switch (action.type) {
   case 'increment':
     return { count: state.count + 1 };
   default:
     return state;
 }
}

const [state, dispatch] = useReducer(reducer, initialState);

useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数，可以持有任何可变的值，例如 DOM 元素。
```
const inputEl = useRef(null);
```
useMemo 和 useCallback

在 React 中，每次组件更新时，函数体内的所有对象和函数都在内存中重新创建。useMemo 和 useCallback 可以帮助优化性能，通过缓存值或函数来避免不必要的计算或函数实例化。
```
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => {
 doSomething(a, b);
}, [a, b]);
```

自定义 Hooks

自定义 hooks 允许你将组件逻辑提取到可重用的函数中，从而在应用程序的不同部分共享同样的逻辑。例如，如果你有多个组件需要访问浏览器窗口的大小，你可以创建一个 useWindowSize 的自定义 hook。

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

function Component() {
  const size = useWindowSize();
  return <div>Width: {size.width}, Height: {size.height}</div>;
}