50个开发人员都应该知道的 React.js 超级技巧（下）

接上期的内容我们把后面剩下的25个内容分享完，希望这些内容能够对你有所帮助。

26. 使用 useEffect 处理异步调用

问题：您需要处理组件内的异步操作，例如，获取数据。

解决方案：使用 `useEffect` 钩子来处理异步调用并管理组件生命周期。

```jsx
const DataFetcher = ({ url }) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
const response = await fetch(url);
const result = await response.json();
setData(result);
setLoading(false);
};
fetchData();
}, [url]);
return loading ? <div>Loading…</div> : <div>{data.title}</div>;
};
// Usage
<DataFetcher url="https://api.example.com/data" />
```

27. 函数组件中的去抖动

问题：您需要优化输入处理，以避免快速连续地进行过多的重新渲染或 API 调用。

解决方案：在函数组件中使用去抖动函数来限制函数执行的速率。

```jsx
import { useState, useEffect } from 'react';
const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
};


// Usage
const SearchInput = () => {
const [query, setQuery] = useState('');
const debouncedQuery = useDebounce(query, 500);
useEffect(() => {
if (debouncedQuery) {
console.log(`Searching for ${debouncedQuery}`);
}
}, [debouncedQuery]);
return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
};
```

28. 功能组件中的节流

问题：您需要优化输入处理以限制随时间推移的执行次数，尤其是对于滚动等功能。

解决方案：在功能组件中使用节流函数来控制函数的执行速率。

```jsx
import { useCallback, useEffect, useRef } from 'react';
const useThrottle = (callback, delay) => {
const lastCall = useRef(0);
return useCallback((…args) => {
const now = new Date().getTime();
if (now - lastCall.current >= delay) {
lastCall.current = now;
callback(…args);
}
}, [callback, delay]);
};


// Usage
const ScrollComponent = () => {
const handleScroll = useThrottle(() => {
console.log('Scroll event');
}, 1000);
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [handleScroll]);
return <div>Scroll to see throttling in action</div>;
};
```

29. 使用 useEffect 实现组件生命周期

问题：您需要处理组件生命周期的不同阶段，例如，挂载、更新和卸载。

解决方案：使用 `useEffect` 钩子模拟组件生命周期方法。

```jsx
const LifecycleComponent = () => {
useEffect(() => {
console.log('Component did mount');
return () => {
console.log('Component will unmount');
};
}, []);
useEffect(() => {
console.log('Component did update');
});
return <div>Lifecycle Demo</div>;
};


// Usage
<LifecycleComponent />
```

30. 使用本地存储来持久化状态

问题：您需要在页面重新加载之间持久化组件状态。

解决方案：使用本地存储来持久化状态。

```jsx
import { useState, useEffect } from 'react';
const useLocalStorage = (key, initialValue) => {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error)
{
return initialValue;
}
});
const setValue = (value) => {
try {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error(error);
}
};
return [storedValue, setValue];
};


// Usage
const Counter = () => {
const [count, setCount] = useLocalStorage('count', 0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
```

31. 用于获取数据的自定义钩子

问题：您需要在多个组件中重复使用数据获取逻辑。

解决方案：创建一个自定义钩子来封装数据获取逻辑。

```jsx
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
const response = await fetch(url);
const result = await response.json();
setData(result);
setLoading(false);
};
fetchData();
}, [url]);
return { data, loading };
};
// Usage
const App = () => {
const { data, loading } = useFetch('https://api.example.com/data');
if (loading) return <div>Loading…</div>;
return <div>{data.title}</div>;
};
```

32. 使用 React.memo 优化性能

问题：您需要通过防止不必要的重新渲染来优化组件性能。

解决方案：使用 `React.memo` 来记忆功能组件并防止重新渲染，除非 props 发生变化。

```jsx
const MyComponent = React.memo(({ value }) => {
console.log('Rendering MyComponent');
return <div>{value}</div>;
});


// Usage
const App = () => {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<MyComponent value="Hello" />
</div>
);
};
```

33. 带有 Styled Components 的 CSS-in-JS

问题：单独管理 CSS 可能会导致全局命名空间问题和组件封装不足。

解决方案：使用 CSS-in-JS 库（如 Styled Components）将样式封装在组件内。

```jsx
import styled from 'styled-components';
const Button = styled.button`
background: palevioletred;
border-radius: 3px;
border: none;
color: white;
padding: 0.5em 1em;
`;


// Usage
<Button>Styled Button</Button>
```

34. 使用 Prop-Types 进行类型检查

问题：您想确保传递给组件的 props 具有正确的类型，以避免运行时错误。

解决方案：使用 `PropTypes` 检查组件中的 props 类型。

```jsx
import PropTypes from 'prop-types';
const MyComponent = ({ name, age }) => {
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
};
MyComponent.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
};


// Usage
<MyComponent name="John Doe" age={30} />
```

35. TypeScript 实现类型安全

问题：您想向 React 组件添加静态类型检查，以便在开发过程中捕获错误。

解决方案：使用 TypeScript 和 React 添加静态类型检查。

```tsx
type Props = {
name: string;
age: number;
};
const MyComponent: React.FC<Props> = ({ name, age }) => {
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
};


// Usage
<MyComponent name="John Doe" age={30} />
```

36. 使用 useEffect 处理副作用

问题：您需要处理组件内的副作用，例如获取数据或设置订阅。

解决方案：使用 `useEffect` 钩子来处理副作用。

```jsx
const DataFetcher = ({ url }) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
const response = await fetch(url);
const result = await response.json();
setData(result);
setLoading(false);
};
fetchData();
}, [url]);
return loading ? <div>Loading…</div> : <div>{data.title}</div>;
};
// Usage
<DataFetcher url="https://api.example.com/data" />
```

37. 带有自定义钩子的上下文

问题：在多个组件中使用上下文时，使用上下文会导致重复代码。

解决方案：创建自定义钩子以简化上下文的使用。

```jsx
const ThemeContext = React.createContext('light');
const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
};
const ThemedComponent = () => {
const theme = useTheme();
return <div className={`theme-${theme}`}>Themed Component</div>;
};
// Usage
const App = () => (
<ThemeContext.Provider value="dark">
<ThemedComponent />
</ThemeContext.Provider>
);
```

38. 使用 React.memo 减少重新渲染

问题：当父组件重新渲染时，您的组件也会不必要地重新渲染。

解决方案：使用 `React.memo` 来防止不必要的重新渲染。

```jsx
const MyComponent = React.memo(({ value }) => {
console.log('Rendering MyComponent');
return <div>{value}</div>;
});


// Usage
const App = () => {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<MyComponent value="Hello" />
</div>
);
};
```

39. 异步函数中的错误处理

问题：您需要处理组件中异步函数中的错误。

解决方案：使用 `useEffect` 中的 try-catch 块来处理异步函数中的错误。

```jsx
const DataFetcher = ({ url }) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
if (loading) return <div>Loading…</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>{data.title}</div>;
};


// Usage
<DataFetcher url="https://api.example.com/data" />
```

40. 使用 Next.js 进行服务器端渲染 (SSR)

问题：您想通过在服务器上渲染 React 组件来改善 SEO 和初始加载时间。

解决方案：使用 Next.js 进行服务器端渲染。

```jsx
// pages/index.js
const Home = ({ data }) => {
return (
<div>
<h1>Server-Side Rendered Data</h1>
<p>{data.title}</p>
</div>
);
};
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}


// Usage
export default Home;
```

41. 使用 Next.js 进行静态站点生成 (SSG)

问题：您希望在构建时预渲染页面，以加快加载速度并实现更好的 SEO。

解决方案：使用 Next.js 进行静态站点生成。

```jsx
// pages/index.js
const Home = ({ data }) => {
return (
<div>
<h1>Static Site Generated Data</h1>
<p>{data.title}</p>
</div>
);
};
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}


// Usage
export default Home;
```

42. 使用 React Router 进行客户端路由

问题：您需要在 React 应用程序中处理客户端路由。

解决方案：使用 React Router 进行声明式客户端路由。

```jsx
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const App = () => (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Switch>
<Route path="/" exact component={
Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
// Usage
<App />
```

43. 使用 React 测试库进行测试

问题：您需要为 React 组件编写测试以确保它们正常工作。

解决方案：使用 React 测试库编写测试，重点关注用户如何与您的组件交互。

```jsx
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
const Button = ({ onClick, children }) => (
<button onClick={onClick}>{children}</button>
);
test('renders button with correct text and handles click', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click me</Button>);
const button = screen.getByText(/click me/i);
expect(button).toBeInTheDocument();
fireEvent.click(button);
expect(handleClick).toHaveBeenCalledTimes(1);
});
```

44. 使用 React DevTools 进行调试

问题：如果没有合适的工具，调试 React 应用程序可能很困难。

解决方案：使用 React DevTools 检查组件树、props、状态和钩子。

```jsx
// No code needed, just install React DevTools as a browser extension or as a standalone app.
// Usage:
// - Open your application in the browser
// - Open the DevTools (usually F12 or right-click -> Inspect)
// - Go to the React tab to inspect your component tree
```

45. 使用 useMemo 记忆昂贵的计算

问题：您需要通过记忆不需要在每次渲染时重新运行的昂贵计算来优化性能。

解决方案：使用 `useMemo` 钩子来记忆昂贵的计算。

```jsx
const ExpensiveComponent = ({ value }) => {
const expensiveCalculation = (num) => {
console.log('Calculating…');
return num * 2;
};
const memoizedValue = useMemo(() => expensiveCalculation(value), [value]);
return <div>{memoizedValue}</div>;
};


// Usage
<ExpensiveComponent value={10} />
```

46. 使用 useCallback 的回调函数

问题：将内联函数传递给组件可能会导致它们不必要地重新渲染。

解决方案：使用 `useCallback` 钩子来记忆回调函数。

```jsx
const Button = React.memo(({ onClick, children }) => (
<button onClick={onClick}>{children}</button>
));
const App = () => {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<Button onClick={handleClick}>Increment</Button>
<p>{count}</p>
</div>
);
};


// Usage
<App />
```

47. 环境变量

问题：您需要管理开发、测试和生产环境的不同配置。

解决方案：使用环境变量来管理不同的配置。

```jsx
// .env file
REACT_APP_API_URL=https://api.example.com
// Usage in a component
const App = () => {
const apiUrl = process.env.REACT_APP_API_URL;
useEffect(() => {
fetch(apiUrl)
.then((response) => response.json())
.then((data) => console.log(data));
}, [apiUrl]);
return <div>Check the console for API data</div>;
};
```

48. 使用 react-i18next 进行国际化

问题：您需要在 React 应用程序中添加对多种语言的支持。

解决方案：使用 `react-i18next` 来处理国际化。

```jsx
import i18n from 'i18next';
import { useTranslation, initReactI18next } from 'react-i18next';
i18n.use(initReactI18next).init({
resources: {
en: {
translation: {
welcome: 'Welcome',
},
},
fr: {
translation: {
welcome: 'Bienvenue',
},
},
},
lng: 'en',
fallbackLng: 'en',
interpolation: {
escapeValue: false,
},
});
const App = () => {
const { t } = useTranslation();
return <h1>{t('welcome')}</h1>;
};
// Usage
<App />
```

49. 使用 React.lazy 进行代码分割

问题：您需要将代码分割成更小的块以提高性能和加载时间。

解决方案：使用“React.lazy”动态导入组件。

```jsx
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
const App = () => (
<Suspense fallback={<div>Loading…</div>}>
<LazyComponent />
</Suspense>
);
// Usage
<App />
```

50. 使用 Webpack 进行 Tree Shaking

问题：您想从包中删除未使用的代码以减小其大小。

解决方案：使用 Webpack 的 Tree Shaking 功能删除未使用的代码。

```jsx
// webpack.config.js
module.exports = {
mode: 'production',
optimization: {
usedExports: true,
},
};
// Usage
// Ensure your code is written in an ES6 module format and Webpack will automatically tree-shake.

总结

到这里，我们想要与你分享的50 个 关于React.js 技巧就全部结束了，如果你还有什么问题，请记得在留言区给我留言，我们一起交流学习。

来源：web前端开发