React 进阶之旅：揭开组件之下的秘密

2023-11-19 06:55:21

导语：
欢迎来到 React 进阶之旅的第二课，在这个章节中，我们将深入了解 React 组件的底层机制，探索那些使它们如此强大且灵活的秘密武器。从 Refs 到 Hooks，我们将揭开组件之下的秘密，赋予你掌控 React 世界的超能力。

Refs（引用）允许你直接访问 DOM 节点或类组件实例，这在某些情况下非常有用。例如，你可能需要手动聚焦输入元素或获取子组件的当前状态。

用法：

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

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
};

Context 提供了一种在组件树中共享状态的优雅方式，而无需显式地逐层传递 props。这对于管理全局状态或在不同组件之间共享数据非常有用。

用法：

// 创建 Context 对象
const MyContext = createContext(defaultValue);

// 在父组件中提供 Context
const MyProvider = ({ children }) => {
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

// 在子组件中消费 Context
const MyConsumer = () => {
  const value = useContext(MyContext);
  return <p>{value}</p>;
};

高阶组件（HOC）是一种高级技术，用于在不修改原始组件的情况下扩展组件的功能。它们通过包装原始组件并返回增强后的组件来工作。

用法：

const withLoading = (WrappedComponent) => {
  return (props) => {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
      // 异步操作
      setIsLoading(false);
    }, []);

    return isLoading ? <Loading /> : <WrappedComponent {...props} />;
  };
};

Hooks 是 React 16.8 中引入的强大工具，它们提供了状态管理、生命周期方法等功能，而无需使用类组件。Hooks 简化了组件的编写，使代码更简洁、更易于维护。

用法：

const MyFunctionalComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 生命周期方法
  }, []);

  return (
    <button onClick={() => setCount(count + 1)}>
      点击我 {count}
    </button>
  );
};