这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

React Hooks 技巧

介绍

React hooks 是一种在不创建类组件的情况下在组件之间创建可重用逻辑和状态的好方法。本文章将记录一些使用React Hooks时的注意点和技巧，帮助在开发时充分利用React hooks。

技巧一：使用useMemo和useCallback来优化性能

useMemo和useCallback hooks可以通过记忆值和函数来帮助优化React应用程序的性能。这可以有助于提高React应用程序的整体性能。

注意点：

React.memo() 的原理是对函数组件进行优化，其可以支持传递一个参数从而发挥告知React起到shouldComponentUpdate 的判断作用

但是如果使用类组件直接export，就无法起到其作用故而需要使用函数式组件（开发中个人也更倾向于函数式组件）

例子如下：

// 使用React.memo优化函数组件
const MyComponent = React.memo(({ data }) => {
  // render something based on the data prop
});

// 直接export类组件
class MyComponent extends React.Component {
  // render something based on this.props.data
}

export default MyComponent;

技巧2：使用 useCallback和 useMemo 优化性能

使用 React 提供的 useCallback 和 useMemo 可以缓存函数和函数的返回值，这有助于优化应用程序的性能。它们可以将经常使用的函数存储在缓存中，使应用程序只需在初始化时执行一次，而不是每次渲染时都要重新计算，从而极大地提高性能。这意味着使用这些函数可以帮助降低应用程序中重复的计算和渲染，从而减少 CPU 消耗和内存消耗，从而提高性能。

例子如下：

const MyComponent = () => {
  const [data, setData] = useState({});

  // 使用 useCallback 优化函数
  const fetchData = useCallback(() => {
    // do something async and setData
  }, [setData]);

  // 使用 useMemo 缓存函数的返回值
  const computedValue = useMemo(() => {
    // do some expensive computation and return value
  }, [data]);

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      {computedValue}
    </div>
  );
};

技巧3：使用 useContext 避免 prop-drilling

使用 useContext 可以有效地避免 props-drilling，它可以帮助在不同层级的组件之间共享数据。不仅如此，使用 useContext 在某种程度上可以更加简单易懂，因为它可以直接从上下文中访问数据，而不用通过 props 一层一层传递，更重要的是，它可以大大减少组件之间传递 props 的工作量。例如，可以将用户信息放在上下文中，然后在组件中使用 useContext 来获取用户信息，而不需要将用户信息一层层传递到组件中，这样可以大大提高开发效率，节省更多的时间和精力。

例子如下：

const UserContext = React.createContext();

// 使用 Context Provider
const App = () => {
  const user = { name: 'Jane', email: 'jane@example.com' };

  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
}

// 使用 useContext
const Profile = () => {
  const user = useContext(UserContext);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

useContext 不仅可以提升代码的可读性和可维护性，还可以帮助减少传递 props 的代码量，让代码更加简洁易读，提高开发效率。此外，可以使用 useContext 来更改上下文中的值，使代码更容易管理和维护，更加便捷，提升程序的性能。它还可以节省大量的开发时间，让开发者们更加专注于代码的质量和可维护性。

结论

使用一些React Hooks的使用技巧能够在开发过程中更加专注于代码的质量和可维护性，而不必担心性能问题。

该笔记将持续记录React Hooks相关技巧，不断学习