返回

React Hook 10 条经验，高效构建 React 组件

前端

React Hooks 是 React 16.8 中引入的一项新特性，它允许你直接在函数组件中使用状态和生命周期方法。这使得编写 React 组件更加简单和灵活。

经过一段时间的使用，我总结了一些 React Hook 的使用经验，希望能对大家有所帮助：

  1. 合理使用 useMemo 取代 useState + useEffect

不要把父组件传递进来的 props 直接赋值给子组件的 state ，然后又监听父组件的 props。

这样做会导致子组件每次重新渲染时都会重新计算 props 的值，这可能会导致性能问题。

更好的做法是使用 useMemo 钩子来缓存 props 的值。这样，只有当 props 的值发生变化时，useMemo 才会重新计算。

const MyComponent = ({ props }) => {
  const cachedProps = useMemo(() => props, [props]);

  // 使用 cachedProps 而不是 props
  return <div>{cachedProps.value}</div>;
};
  1. 使用 useCallback 优化子组件的 props

当子组件的 props 是函数时，每次父组件重新渲染，子组件都会重新创建该函数。

这可能会导致性能问题，尤其是当子组件的 props 函数很复杂时。

为了解决这个问题，可以使用 useCallback 钩子来缓存子组件的 props 函数。这样，只有当子组件的 props 函数发生变化时，useCallback 才会重新创建该函数。

const MyComponent = ({ onButtonClick }) => {
  const memoizedOnButtonClick = useCallback(onButtonClick, [onButtonClick]);

  return <button onClick={memoizedOnButtonClick}>Click me</button>;
};
  1. 使用 useRef 来存储可变数据

有时，我们需要在组件中存储一些可变数据，例如表单输入的值或计时器的引用。

可以使用 useRef 钩子来存储这些数据。useRef 返回一个可变的 ref 对象，该对象可以存储任何类型的数据。

const MyComponent = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
};
  1. 使用 useContext 来共享数据

当多个组件需要访问相同的数据时，可以使用 useContext 钩子来共享数据。

const MyContext = React.createContext(null);

const MyProvider = (props) => {
  const value = props.value;

  return <MyContext.Provider value={value}>{props.children}</MyContext.Provider>;
};

const MyComponent = () => {
  const value = useContext(MyContext);

  return <div>{value}</div>;
};
  1. 使用 useReducer 来管理复杂状态

当组件的状态很复杂时，可以使用 useReducer 钩子来管理状态。

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
};

const MyComponent = () => {
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
};
  1. 使用 useLayoutEffect 来执行副作用

当需要在浏览器布局更新后执行副作用时，可以使用 useLayoutEffect 钩子。

const MyComponent = () => {
  useLayoutEffect(() => {
    // 在浏览器布局更新后执行的副作用
  }, []);

  return <div>Hello world</div>;
};
  1. 避免过度使用 Hooks

Hooks 是一种强大的工具，但不要过度使用它们。

过度使用 Hooks 会导致代码难以阅读和维护。

尽量只在需要时才使用 Hooks。

  1. 使用 ESLint 插件来检查 Hooks 的用法

有许多 ESLint 插件可以帮助你检查 Hooks 的用法。

这些插件可以帮助你避免常见的错误，并确保你正确地使用 Hooks。

推荐使用 eslint-plugin-react-hooks 插件。

  1. 学习 Hooks 的最佳实践

有很多资源可以帮助你学习 Hooks 的最佳实践。

推荐阅读以下资源：

  1. 在项目中使用 Hooks

最好的学习 Hooks 的方法是在项目中使用它们。

在项目中使用 Hooks 可以帮助你更好地理解 Hooks 的工作原理，并积累使用 Hooks 的经验。