每日一篇——23秋招React面经（1）

何小幸
97 阅读4分钟

每日一篇——23秋招React面经（1）

⭐简要介绍一下 React Hooks，并举例说明它的用途和使用方式。

React Hooks 是 React v16.8 引入的一项功能，它可以让你在函数组件中使用状态（state）和其他 React 特性。传统的 React 类组件使用类来管理状态和生命周期方法，而 React Hooks 让你在无需编写类的情况下，能够使用状态和其他 React 的特性。

React Hooks 提供了一些预定义的钩子函数，例如 useState、useEffect、useContext 等。这些钩子函数允许你在函数组件中管理状态、进行副作用操作、访问全局的上下文等。使用 Hooks 可以使代码更简洁、可读性更好，并且方便进行复用和测试。

以下是几个常用的 React Hooks：

🌰useState：useState 钩子允许在函数组件中创建和管理状态。它返回一个包含当前状态和更新状态的函数的数组。可以通过解构赋值的方式获取和更新状态的值。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

🌰useEffect：useEffect 钩子用于处理副作用操作，例如订阅事件、异步请求等。它在每次渲染完成后执行，并且可以通过返回一个清理函数来处理取消订阅或清理操作。

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 在组件加载和更新后执行副作用操作
    console.log('Component rendered');

    // 返回清理函数，在组件卸载前执行
    return () => {
      console.log('Component unmounted');
    };
  }, []);

  return <div>Example Component</div>;
}

🌰useContext：useContext 钩子允许在函数组件中访问全局上下文。它接收一个 Context 对象作为参数，返回该 Context 的当前值。

import React, { useContext } from 'react';
import MyContext from './MyContext';

function Example() {
  const value = useContext(MyContext);

  return <div>Context Value: {value}</div>;
}

🌰Reducer：Reducer是一种状态管理方式，它通过一个纯函数来管理状态。该函数接收两个参数，一个是当前状态，另一个是触发状态变化的操作。Reducer会根据操作类型修改状态，并返回一个新的状态，而不直接对原状态进行修改。

在React中使用Reducer可以代替类组件中的setState方法，可以更好地控制状态更新的过程。使用Reducer可以将状态和操作分离处理，并且允许多个组件共享同一个状态对象。

import React, { useReducer } from 'react';

// 定义初始状态
const initialState = {
  count: 0,
};

// 定义Reducer函数
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    default:
      throw new Error('Unsupported action type');
  }
};

const Counter = () => {
  // 使用useReducer创建状态和操作
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

🌰useMemo：useMemo是一个性能优化的钩子，它用于缓存计算结果以避免重复计算。useMemo接收两个参数，第一个是计算结果的函数，第二个是依赖项数组。只有当某个依赖项发生变化时，useMemo才会重新计算结果。否则直接返回缓存的结果。

在React中，由于组件的render()方法会在状态或属性变化时被调用，如果渲染过程中需要执行一些复杂计算，就会影响到页面性能。使用useMemo可以缓存这些计算结果，减少不必要的计算，提高应用性能。

import React, { useMemo } from 'react';

const ExpensiveCalculation = ({ number }) => {
  // 使用useMemo缓存计算结果
  const result = useMemo(() => {
    console.log('Expensive calculation'); // 仅在依赖项变化时触发
    let sum = 0;
    for (let i = 1; i <= number; i++) {
      sum += i;
    }
    return sum;
  }, [number]); // 仅当number变化时重新计算

  return <div>Result: {result}</div>;
};

export default ExpensiveCalculation;

总而言之，React Hooks 是一种用于处理状态和其他 React 特性的方式，它可以让你在函数组件中做很多以前只能在类组件中实现的事情。通过使用 React Hooks，你可以编写更简洁、可维护的代码，并享受更好的开发体验。

⭐Redux的基本使用

  1. 调用createStore创建store，作为公共数据区域
  2. 定义ruducer纯函数，接收state和action，默认返回state
  3. 在组件中通过store.dispatch派发action，其中包含type和payload等值，我们通常将action封装为一个返回action对象的函数，在函数内做操作
  4. reducer接收到action后通过switch根据type来判断要走哪个分支，返回深拷贝并进行操作后的state对象
  5. 在组件中通过subscribe来进行订阅，传入回调函数，store中数据修改就会进行回调通知，通过getState就可以获取到state中的数据
  6. 如果要实现异步操作或日志打印，就需要使用redux中间件redux-thunk/redux-promise和redux-logger来进行
    1. redux-thunk，允许dispatch中传入函数，在函数内部进行异步请求后返回action
    2. redux-promise，允许dispatch中传入promise对象
avatar
文章
阅读
粉丝