【React】精选题

1.React Hooks带来了什么便利？

React Hooks是React16.8版本中引入的新特性，它带来了许多便利。

1. 更简单的状态管理
   使用useState Hook可以在函数组件中方便地管理状态，避免了使用类组件时需要继承React.Component的繁琐操作。

2. 避免使用类组件：函数式组件的书写方式更加简单、直观，避免了类组件中this指针的混乱问题。

3. 更少的重复代码：使用useEffect Hook可以方便地实现数据获取、DOM操作等副作用相关的操作，避免了在不同的生命周期函数中重复编写相似的代码。

4. 更好的代码复用：自定义Hook可以将一些可复用的逻辑封装起来，方便在不同的组件中复用。

5. 更好的逻辑分离：使用useContext、useReducer和自定义Hook等可以帮助将逻辑分离到独立的模块中，提高代码的可维护性和可扩展性。

总之，React Hooks带来了更加简单、直观、高效的编程方式，可以让开发者更加专注于组件的逻辑实现。使得React的函数组件也具备了类组件的一些特性。

2. 列举几个常见的 Hook?

1. useState Hook：用于在函数组件中管理状态，可以通过调用useState Hook来声明一个状态变量和更新函数，例如：

   const [count, setCount] = useState(0);
   

2. useEffect Hook：用于在函数组件中处理副作用，可以传入一个回调函数和一个依赖数组，例如：

   useEffect(() => {
     // 处理副作用
   }, [dependency]);
   

3. 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;

4. 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>
 );
}

5. 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 缓存计算结果，从而进一步提高性能。

6. 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>
  );
}

8. 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函数。