React 是一个非常强大的工具，但要真正掌握它，光学基础还不够，还需要了解一些鲜为人知的小技巧，以让开发过程更加顺畅。下面是我个人整理的 20 个 React 技巧，这些技巧可以显著提升开发效率，帮助你编写更简洁、更高效的代码。让我们一起来看看这些实用的例子吧！
-
使用短路求值进行条件渲染
使用短路求值代替冗长的
if语句来进行条件渲染。{isLoading && <Spinner />}这样只有当
isLoading为true时才会渲染<Spinner />，保持你的JSX简洁明了。 -
使用
classnames库实现动态类名classnames库可以让你轻松地根据条件应用不同的类名。npm install classnamesimport classNames from 'classnames'; const buttonClass = classNames({ 'btn': true, 'btn-primary': isPrimary, 'btn-secondary': !isPrimary, }); <button className={buttonClass}>Click Me</button> -
使用
useMemo缓存复杂计算结果如果某个计算过程比较复杂且耗时，可以使用
useMemo进行缓存，这样React就不会在不必要的时候重新计算，提高性能。const sortedData = useMemo(() => data.sort(), [data]);这段代码只有在
data发生变化时才会重新计算sortedData。 -
使用
useEffect对输入进行防抖处理通过对输入变化进行防抖处理，避免频繁的重新渲染。
const [value, setValue] = useState(''); const [debouncedValue, setDebouncedValue] = useState(''); useEffect(() => { const handler = setTimeout(() => setDebouncedValue(value), 500); return () => clearTimeout(handler); }, [value]); <input value={value} onChange={(e) => setValue(e.target.value)} /> -
使用自定义
Hook实现可重用逻辑将逻辑封装到自定义
Hook中，以便在多个组件中复用。function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url).then(res => res.json()).then(setData); }, [url]); return data; } const Component = () => { const data = useFetch('/api/data'); return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>; }; -
使用
React.lazy实现组件的懒加载通过拆分组件实现懒加载，可以优化页面的加载时间。
const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <React.Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </React.Suspense> ); } -
使用
useRef获取之前的Props或State如果需要访问之前的状态值，可以使用
useRef。const [count, setCount] = useState(0); const prevCount = useRef(count); useEffect(() => { prevCount.current = count; }, [count]); console.log(`Previous: ${prevCount.current}, Current: ${count}`); -
使用
useCallback传递函数以避免不必要的重新渲染如果一个函数不需要改变，可以使用
useCallback进行缓存，避免每次重新生成，从而减少不必要的重新渲染。const increment = useCallback(() => setCount(count + 1), [count]); -
解构
Props使代码更加简洁在函数参数中直接解构
props，使代码更加简洁明了。const User = ({ name, age }) => ( <div>{name} is {age} years old</div> ); -
使用
React.Fragment分组元素，避免额外的div标签使用
React.Fragment可以包裹元素而不添加额外的DOM节点。<> <p>Paragraph 1</p> <p>Paragraph 2</p> </> -
使用错误边界捕获
JavaScript错误在子组件中捕获错误，以防止整个应用崩溃。
class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } render() { if (this.state.hasError) return <h1>Something went wrong.</h1>; return this.props.children; } } -
使用
PropTypes进行Prop验证通过定义
prop类型，可以及早捕获错误，确保组件使用正确的数据类型。import PropTypes from 'prop-types'; function MyComponent({ name }) { return <div>{name}</div>; } MyComponent.propTypes = { name: PropTypes.string.isRequired, }; -
使用
useReducer管理复杂的状态对于复杂的状态逻辑，
useReducer可以更高效地管理状态。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: return state; } } const [state, dispatch] = useReducer(reducer, initialState); -
使用
useLayoutEffect进行DOM操作在
DOM更新后、浏览器重绘前运行效果，以确保DOM操作及时生效。useLayoutEffect(() => { console.log("Layout effect"); }, []); -
使用
Context和useContext封装状态逻辑使用
Context创建全局状态，避免层层传递props的麻烦。const ThemeContext = React.createContext(); function MyComponent() { const theme = useContext(ThemeContext); return <div style={{ background: theme }}>Hello!</div>; } -
避免在
JSX中定义内联函数在
JSX中定义内联函数会导致组件重新渲染。应将这些函数定义在组件外部，以避免不必要的性能开销。const handleClick = () => console.log("Clicked"); <button onClick={handleClick}>Click Me</button> -
在
JSX中使用可选链（?.）安全访问属性使用可选链（
?.）可以优雅地处理null或undefined值，避免访问不存在属性时报错。<p>{user?.name}</p> -
使用
key属性来避免重新渲染问题在渲染列表时，一定要使用唯一的
key值，以确保React正确管理每个元素，避免渲染问题。{items.map(item => ( <div key={item.id}>{item.name}</div> ))} -
使用命名导出来更好地控制组件的导入
使用命名导出可以更方便地按需导入特定的组件。
export const ComponentA = () => <div>A</div>; export const ComponentB = () => <div>B</div>;然后按需导入组件：
import { ComponentA } from './Components'; -
可重用组件模式：高阶组件（
HOCs）使用高阶组件（
HOCs）包裹组件，以添加额外的逻辑功能。function withLogging(WrappedComponent) { return function Wrapped(props) { console.log('Component Rendered'); return <WrappedComponent {...props} />; }; } const MyComponentWithLogging = withLogging(MyComponent);
掌握这些技巧将帮助你编写更简洁、可读性更强且高效的 React 代码！
