爆肝整理！10个让你起飞的React实战技巧，前端工程师必看

爆肝整理！10个让你起飞的React实战技巧，前端工程师必看

前端开发的小伙伴们！在如今竞争激烈的技术圈，React 稳坐前端框架的“顶流”宝座，几乎成了每个前端工程师的必备技能。无论是开发单页应用（SPA）、复杂的企业级应用，还是热门的移动端应用，React 都能轻松拿捏。今天就给大家带来 10个超实用的React实战技巧 ，结合当下高频前端类热搜词，让你在面试和项目开发中脱颖而出，代码写得又快又好！

技巧一：巧妙使用React Hook，告别繁琐的类组件

在 React 开发中，Hook 堪称“神器”，尤其是 useState 和 useEffect ，它们让函数式组件的开发变得更加简洁高效，这也是当下前端开发的热门趋势之一。

1.1 useState的基础使用

useState 用于在函数组件中添加状态。以前我们在类组件中定义状态，需要复杂的 this.state 和 this.setState ，现在用 useState 几行代码就搞定！

import React, { useState } from'react';

// 定义一个简单的计数器组件
const Counter = () => {
  // 声明一个状态变量count，初始值为0，以及更新状态的函数setCount
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>当前计数: {count}</p>
      {/* 点击按钮调用setCount更新count的值 */}
      <button onClick={() => setCount(count + 1)}>增加计数</button>
    </div>
  );
};

export default Counter;

1.2 useEffect实现副作用操作

useEffect 可以用来处理副作用，比如 数据请求、订阅事件、DOM 操作 等。在 React 中，useEffect 是实现 数据获取 的常用方式，也是面试高频考点！

import React, { useState, useEffect } from'react';

const DataFetching = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 模拟异步数据请求
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const jsonData = await response.json();
      setData(jsonData);
      setIsLoading(false);
    };
    fetchData();
  }, []);

  return (
    <div>
      {isLoading? (
        <p>加载中...</p>
      ) : (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default DataFetching;

这里的 useEffect 第二个参数是一个空数组 [] ，表示只在组件 挂载 时执行一次，相当于类组件中的 componentDidMount 生命周期函数。

技巧二：性能优化之React.memo和useCallback

在大型 React 应用中，性能优化 是重中之重，React.memo 和 useCallback 就是优化性能的“得力助手”。

2.1 React.memo优化子组件渲染

React.memo 是一个高阶组件，它可以对函数组件进行 浅比较 ，只有当组件的 props 发生变化时才重新渲染，避免不必要的渲染开销。

import React from'react';

// 使用React.memo包裹子组件，进行性能优化
const ChildComponent = React.memo((props) => {
  return <p>{props.message}</p>;
});

export default ChildComponent;

2.2 useCallback缓存函数引用

useCallback 可以用来缓存函数的引用，防止函数在每次组件重新渲染时都重新创建，这对于 性能优化 和防止子组件不必要的重新渲染非常有用。

import React, { useState, useCallback } from'react';

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  // 使用useCallback缓存函数，避免每次渲染都重新创建
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={handleClick}>点击计数</button>
      <p>计数: {count}</p>
    </div>
  );
};

export default ParentComponent;

技巧三：状态管理方案Redux Toolkit

在复杂的 React 应用中，状态管理 是绕不开的话题。Redux Toolkit 是官方推荐的 Redux 最佳实践，它简化了 Redux 的使用流程，提高了开发效率。

3.1 安装和配置Redux Toolkit

首先，安装必要的依赖：

npm install @reduxjs/toolkit react-redux

然后，创建 store ：

import { configureStore } from '@reduxjs/toolkit';

// 这里可以先不添加任何reducer，后续逐步添加
const store = configureStore({
  reducer: {},
});

export default store;

3.2 创建Slice和Reducer

Slice 是 Redux Toolkit 中一个强大的概念，它将 action 和 reducer 组合在一起，简化了代码结构。

import { createSlice } from '@reduxjs/toolkit';

// 创建一个名为counter的slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      // 在Redux Toolkit中，这里可以直接修改state，它会自动处理不可变更新
      state.value++;
    },
    decrement: (state) => {
      state.value--;
    },
  },
});

// 导出action和reducer
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

最后，将 reducer 添加到 store 中：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

在组件中使用 Redux Toolkit 管理的状态：

import React from'react';
import { useSelector, useDispatch } from'react-redux';
import { increment, decrement } from './counterSlice';

const CounterWithRedux = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Redux计数: {count}</p>
      <button onClick={() => dispatch(increment())}>增加</button>
      <button onClick={() => dispatch(decrement())}>减少</button>
    </div>
  );
};

export default CounterWithRedux;

技巧四：路由管理React Router

React Router 是 React 应用中实现 路由 的必备工具，它可以让我们轻松实现单页应用的页面切换和导航。

4.1 安装和基本配置

安装 React Router ：

npm install react-router-dom

在 App.js 中配置路由：

import React from'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

4.2 嵌套路由

在实际应用中，经常会遇到嵌套路由的情况，比如一个页面中有多个子页面。

import React from'react';
import { Routes, Route } from'react-router-dom';
import Dashboard from './Dashboard';
import Users from './Users';
import Orders from './Orders';

const DashboardRoutes = () => {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="users" element={<Users />} />
        <Route path="orders" element={<Orders />} />
      </Route>
    </Routes>
  );
};

export default DashboardRoutes;

技巧五：测试React组件Jest和React Testing Library

在 前端开发 中，单元测试 是保证代码质量的重要手段。Jest 和 React Testing Library 是 React 组件测试的黄金搭档。

5.1 安装和配置

安装 Jest 和 React Testing Library ：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

在 package.json 中配置 Jest ：

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "setupFilesAfterEnv": [
      "@testing-library/jest-dom/extend-expect"
    ]
  }
}

5.2 编写测试用例

假设我们有一个简单的 Button 组件：

import React from'react';

const Button = ({ text, onClick }) => {
  return <button onClick={onClick}>{text}</button>;
};

export default Button;

编写测试用例：

import React from'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('按钮点击时调用onClick函数', () => {
  const mockFn = jest.fn();
  const { getByText } = render(<Button text="点击我" onClick={mockFn} />);
  const button = getByText('点击我');
  fireEvent.click(button);
  expect(mockFn).toHaveBeenCalled();
});

技巧六：样式管理CSS Modules和Styled Components

在 React 中，样式管理 也是一个重要的部分，CSS Modules 和 Styled Components 是两种常用的方式。

6.1 CSS Modules

CSS Modules 可以实现样式的局部作用域，避免样式冲突。

首先，创建一个 styles.module.css 文件：

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

在组件中使用：

import React from'react';
import styles from './styles.module.css';

const ButtonWithCSSModules = () => {
  return <button className={styles.button}>CSS Modules按钮</button>;
};

export default ButtonWithCSSModules;

6.2 Styled Components

Styled Components 允许我们用 JavaScript 编写 CSS ，更加灵活和直观。

安装 Styled Components ：

npm install styled-components

使用示例：

import React from'react';
import styled from'styled-components';

const StyledButton = styled.button`
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

const ButtonWithStyledComponents = () => {
  return <StyledButton>Styled Components按钮</StyledButton>;
};

export default ButtonWithStyledComponents;

技巧七：处理表单React Hook Form

在 React 应用中，表单处理 是常见的需求。React Hook Form 是一个轻量级的表单处理库，它可以提高表单开发的效率和性能。

7.1 安装和基本使用

安装 React Hook Form ：

npm install react-hook-form

使用示例：

import React from'react';
import { useForm } from'react-hook-form';

const SignUpForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("username", { required: true })}
        placeholder="用户名"
      />
      {errors.username && <p>用户名是必填项</p>}
      <input
        {...register("password", { minLength: 6 })}
        type="password"
        placeholder="密码"
      />
      {errors.password && <p>密码至少6位</p>}
      <button type="submit">提交</button>
    </form>
  );
};

export default SignUpForm;

技巧八：代码分割和懒加载React.lazy和Suspense

在大型 React 应用中，为了提高应用的加载速度，我们可以使用 代码分割 和 懒加载 技术。React.lazy 和 Suspense 是 React 官方提供的实现方式。

8.1 使用React.lazy和Suspense实现懒加载

import React, { lazy, Suspense } from'react';

// 懒加载About组件
const About = lazy(() => import('./About'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>加载中...</div>}>
        <About />
      </Suspense>
    </div>
  );
}

export default App;

这里 React.lazy 接收一个函数，该函数动态导入组件，Suspense 组件在组件加载完成前显示 fallback 内容。

技巧九：错误边界Error Boundaries

在 React 应用中，难免会遇到一些错误，为了避免应用崩溃，我们可以使用 错误边界 来捕获和处理错误。

9.1 创建错误边界组件

import React from'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新state，触发重新渲染，显示错误信息
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 可以将错误信息发送到服务器进行日志记录
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <p>发生错误！请稍后重试。</p>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

在应用中使用错误边界组件：

import React from'react';
import ErrorBoundary from './ErrorBoundary';
import ErrorProneComponent from './ErrorProneComponent';

function App() {
  return (
    <div>
      <ErrorBoundary>
        <ErrorProneComponent />
      </ErrorBoundary>
    </div>
  );
}

export default App;

技巧十：移动端适配和响应式设计

随着移动互联网的发展，移动端适配 和 响应式设计 变得越来越重要。在 React 应用中，我们可以使用一些工具和技巧来实现。

10.1 使用CSS媒体查询

@media (max-width: 768px) {
  /* 当屏幕宽度小于等于768px时应用的样式 */
  body {
    font-size: 14px;
  }
}

10.2 使用Flexbox和Grid布局

Flexbox 和 Grid 是 CSS 中强大的布局方式，它们可以轻松实现响应式布局。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 300px;
  margin: 10px;
}

以上就是10个非常实用的 React 实战技巧，涵盖了从基础开发到性能优化、状态管理、测试等多个方面。希望这些技巧能帮助大家在 React 开发中少走弯路，提高开发效率！如果你在实际开发中还有其他问题或更好的经验，欢迎在评论区分享交流~