React 独门妙技，释放大招轻松装逼

2023-12-02 13:59:38

在React 中，有不少看似无用、却能让你装出“高手”范儿的有趣知识。虽然这些知识可能在实际开发中派不上用场，但它们可以帮助你更深入地了解 React 的底层实现原理，从而成为一名更优秀的 React 开发人员。

神奇的 `React.memo`

React.memo 是一个高级组件，它可以让你对函数组件进行“记忆”。当函数组件的 props 没有发生变化时，React.memo 会阻止该组件重新渲染。这意味着，如果你的函数组件只依赖于它的 props，那么你就可以使用 React.memo 来优化它的性能。

举个例子，假设你有一个函数组件 MyComponent，它只依赖于它的 props name。你可以使用 React.memo 来对 MyComponent 进行“记忆”，这样当 name 没有发生变化时，MyComponent 就不会重新渲染。

import React, { memo } from "react";

const MyComponent = (props) => {
  return <h1>{props.name}</h1>;
};

export default memo(MyComponent);

神秘的 `useEffect`

useEffect 是一个 React 钩子，它允许你在组件的特定生命周期阶段执行某些操作。你可以在组件挂载时、组件更新时、组件卸载时或其他特定的生命周期阶段使用 useEffect。

举个例子，假设你有一个组件 MyComponent，你想在组件挂载时获取数据并将其存储在状态中。你可以使用 useEffect 来实现这一功能。

import React, { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://example.com/api/data")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <h1>{data}</h1>;
};

export default MyComponent;

奇妙的 `useContext`

useContext 是一个 React 钩子，它允许你在组件中使用 Context 对象。Context 对象是一个全局状态对象，它可以在组件之间共享。你可以使用 useContext 来访问 Context 对象中的值，而无需将它们显式地传递给组件。

举个例子，假设你有一个 Context 对象 MyContext，其中存储了用户的信息。你可以使用 useContext 来访问 MyContext 中的值，而无需将它们显式地传递给组件。

import React, { useContext } from "react";
import { MyContext } from "./context";

const MyComponent = () => {
  const { user } = useContext(MyContext);

  return <h1>{user.name}</h1>;
};

export default MyComponent;

特殊的 `useReducer`

useReducer 是一个 React 钩子，它允许你在组件中使用 reducer 函数来管理状态。Reducer 函数是一个纯函数，它接收一个状态对象和一个动作对象，并返回一个新的状态对象。你可以使用 useReducer 来简化组件的状态管理。

举个例子，假设你有一个组件 MyComponent，你想使用 useReducer 来管理它的状态。你可以定义一个 reducer 函数，该函数接收一个状态对象和一个动作对象，并返回一个新的状态对象。然后，你可以在组件中使用 useReducer 来使用这个 reducer 函数。

import React, { useReducer } from "react";

const initialState = {
  count: 0
};

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
};

export default MyComponent;