React真的很强大，但不仅仅是掌握基础知识，还要学习一些不为人知的小技巧来让开发更顺畅。下面是我个人最喜欢的20个React小技巧，这些技巧能帮助你提高工作效率，帮助你写出更简洁、更高效的代码。直接上例子吧！

内容省略

1. 条件短路计算用于条件渲染

避免使用冗长的 if 语句来进行条件渲染，而应采用短路计算。

    {isLoading && <Spinner />}

进入/退出全屏。

这只会当 isLoading 为 true 时才渲染 <Spinner /> 组件，使你的 JSX 保持整洁。

……

2. 使用classnames库动态生成类名

classnames库让你可以轻松地根据条件应用类。

npm install classnames

这行命令是用于安装classnames包。

全屏, 退出全屏

    import classNames from 'classnames';

    const buttonClass = classNames({
      'btn': true,
      'btn-primary': isPrimary,
      'btn-secondary': !isPrimary,
    });

    <button className={buttonClass}>点我</button>

切换到全屏模式，退出全屏

此处为空白部分

3. 使用useMemo缓存耗时的计算

当一个计算比较耗时，可以使用缓存来避免 React 不必重复计算，比如 memoize。

const sortedData = useMemo(() => data.sort(), [data]); // 这行代码用于记忆化并排序数据

全屏模式：进入/退出全屏

只会当 data 发生变化时才重新计算 sortedData。

……

4. 使用useEffect进行输入防抖

避免因频繁的输入更改而导致的不断重新渲染。通过减少输入变化的频繁触发来避免不断重新渲染。

    const [值, set值] = useState('');
    const [防抖值, set防抖值] = useState('');

    useEffect(() => {
      const 手动器 = setTimeout(() => set防抖值(值), 500);
      return () => clearTimeout(手动器);
    }, [值]);

    <input value={值} onChange={(e) => set值(e.target.value)} />

/* 

* 值：输入框的当前值

* 防抖值：经过防抖处理后的值，用于避免短时间内频繁的输入变化

* useEffect：当值变化时，设置一个500毫秒的延时，以防止快速输入导致不必要的更新

* clearTimeout：清除延时处理
 */

全屏模式 退出全屏

……

5. 自定义 Hooks 用于复用逻辑

将逻辑封装在一个自定义钩子中，以便在不同组件之间重复使用。

    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) : '数据加载中...'}</div>;
    };

进入全屏，退出全屏

此处省略若干字

6. 使用 React.lazy 进行懒加载组件

通过拆分组件来加快加载时间。

    const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

点击这里切换到全屏/退出全屏

……

7. 使用useRef访问旧属性和状态

要访问先前的状态值，用 useRef。

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

    useEffect(() => {
      prevCount.current = count;
    }, [count]);

    console.log("Previous: " + prevCount.current + ", 现在: " + count);

全屏 / 退出全屏

---

8. 使用useCallback传递函数可以避免不必要的组件重新渲染

如果一个函数不需要更新，可以使用 useCallback 进行记忆化。

const increment = useCallback(() => setCount(count + 1), [count]);
// 使用 useCallback 返回一个记忆化的计数递增函数，当 count 更新时重新生成该函数，确保每次调用时 setCount 执行 count + 1 的操作。

全屏切换 退出全屏

---

9. 解构 props 使代码更清晰

直接在函数参数里解构 props

    const User = ({ name, age }) => (
      <div>{name} {age} 岁了</div>
    );

全屏 退出全屏

---

10. React.Fragment 用来不使用额外的 div 标签的元素分组

不添加额外的DOM节点来包裹元素。

    <>
      <p>第一段</p>
      <p>第二段</p>
    </>

全屏模式，退出全屏

---

11. 捕捉JavaScript错误的错误边界处理

捕获子组件中的错误，来防止整个应用的崩溃。

    class ErrorBoundary extends React.Component {
      state = { hasError: false };

      static getDerivedStateFromError() {
        return { hasError: true };
      }

      render() {
        if (this.state.hasError) return <h1>出了一些问题。</h1>;
        return this.props.children;
      }
    }

进入全屏 退出全屏

GitHub个人主页

Jagroop2001 (Jagroop) · GitHub （GitHub上的用户名）

全栈开发者 | 机器学习工程师 | 开发关系专员，Jagroop2001 正在寻找工作机会

GitHub官网

12. 使用PropTypes来验证属性

通过尽早定义 prop 类型来捕获 bugs。

    导入 PropTypes 从 'prop-types';

    function MyComponent({ name }) {
      // MyComponent 接收一个包含 name 属性的对象
      return <div>{name}</div>;
    }

    MyComponent.propTypes = {
      // 定义 MyComponent 组件的 PropTypes，name 必须是一个字符串
      name: PropTypes.string.isRequired,
    };

全屏 退出全屏

---

13. 使用useReducer的状态管理器

对于较复杂的状态逻辑，使用useReducer 可能更有效。

    const initialState = { count: 0 }; // 定义初始状态，计数器初始值为0

    function reducer(state, action) { // 定义一个reducer函数，它接收当前状态和动作作为参数
      switch (action.type) { // 根据动作类型决定状态变化
        case 'increment': return { count: state.count + 1 }; // 如果动作是increment，则计数器加1
        case 'decrement': return { count: state.count - 1 }; // 如果动作是decrement，则计数器减1
        default: return state; // 如果动作不是increment或decrement，则保持当前状态不变
      }
    }

    const [state, dispatch] = useReducer(reducer, initialState); // 使用useReducer来管理状态，并返回当前状态和dispatch函数

进入全屏。退出全屏。

---

14. useLayoutEffect 用于 DOM 操作处理

在 DOM 更新完成后，但在实际绘制前执行效果

    useLayoutEffect(() => {
      // 布局效应是一个React钩子，用于在布局计算之后立即执行副作用
      console.log("布局效应");
    }, []);

全屏开启；全屏关闭；

---

15. 用 Context 和 useContext 封装状态

创建全局状态，无需 prop 传递。

    const ThemeContext = React.createContext();

    function MyComponent() {
      const theme = useContext(ThemeContext);
      return <div style={{ background: theme }}>你好！大家好!</div>;
    }

点击全屏，按Esc退出

---

16. 在 JSX 中不要定义内联函数

内联定义函数会导致重渲染的问题。相反，最好把函数定义在外面。

    // 点击按钮时打印“Clicked”到控制台
    const handleClick = () => console.log("Clicked");

    <button onClick={handleClick}>点我</button>

进入全屏模式 退出全屏

---

17. 在 JSX 中使用可选链进行安全访问属性

优雅地处理 null 或 undefined 的情况。

    <p>{用户?.名字}</p>

全屏退出全屏

---

18. 使用key：来避免不必要的重新渲染

在渲染列表时，始终使用独一无二的键。

    {items.map(item => (
      <div key={item.id}>{item.名称}</div>
    ))}

全屏显示 退出全屏

---

19. 通过命名导出组件来更好地控制导入

命名的导出让导入特定的组件更加简单。

    export const 组件A = () => <div>A</div>;
    export const 组件B = () => <div>B</div>;

点击进入全屏模式，点击退出全屏模式

按需根据需要导入：

（最终选择更口语化的表达：“根据需要导入”）
根据需要导入：

    import { ComponentA } from './Components';

切换到全屏，切换出全屏

---

20. 可复用组件模式：高阶组件（HOCs）（Higher-Order Components）

用HOC包裹组件来添加额外的逻辑。

    function withLogging(WrappedComponent) {
      return function Wrapped(props) {
        console.log('组件已渲染完毕');
        return <WrappedComponent {...props} />;
      };
    }

    const MyComponentWithLogging = withLogging(MyComponent);

您可以切换到全屏 可以退出全屏

---

掌握这些技巧将让你的React代码更简洁、易读且高效！祝你编程快乐！