ReactJS 高阶用法详解

2023-09-11 17:15:05

ReactJS 是一个强大的 JavaScript 库，用于构建用户界面。它以其组件化、声明式和高效的特性而著称。在 ReactJS 中，我们可以使用函数组件来定义组件，函数组件是 ReactJS 中引入的一种新型组件，它使用 JavaScript 函数来定义组件的行为。函数组件与传统的类组件相比，具有更简单的语法和更强的灵活性。

函数组件中可以使用 Hook，Hook 是 ReactJS 中引入的一种新特性，它允许我们在函数组件中使用 state 和生命周期方法。Hook 是一个函数，它可以在函数组件中调用，并且可以访问和修改组件的状态。常用的 Hook 有 useState、useEffect、useContext、useReducer、useRef、useMemo 和 useCallback。

useState

useState Hook 用于在函数组件中管理状态。它接受一个初始值作为参数，并返回一个包含当前状态值和一个更新状态的函数的数组。我们可以通过数组的第二个元素来更新状态值。

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

const incrementCount = () => {
  setCount(count + 1);
};

useEffect

useEffect Hook 用于在组件挂载、更新和卸载时执行某些副作用。它接受两个参数，第一个参数是一个回调函数，该函数会在组件挂载、更新和卸载时执行。第二个参数是一个依赖数组，如果依赖数组中的值发生变化，则回调函数也会被执行。

useEffect(() => {
  // 组件挂载时执行的代码
}, []);

useEffect(() => {
  // 组件更新时执行的代码
}, [count]);

useEffect(() => {
  // 组件卸载时执行的代码
  return () => {
    // 清理工作
  };
}, []);

useContext

useContext Hook 用于在组件中使用 Context。Context 是 ReactJS 中一种共享数据的方式，它允许组件在不直接传递 props 的情况下访问数据。

const MyContext = React.createContext();

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

  return <div>{value}</div>;
};

useReducer

useReducer Hook 用于在组件中管理状态。它接受一个 reducer 函数和一个初始值作为参数，并返回一个包含当前状态值和一个更新状态的函数的数组。reducer 函数是一个纯函数，它接受当前状态和一个动作作为参数，并返回一个新的状态。

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

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

const incrementCount = () => {
  dispatch({ type: 'INCREMENT' });
};

const decrementCount = () => {
  dispatch({ type: 'DECREMENT' });
};

useRef

useRef Hook 用于在组件中创建一个可变的引用。可变引用是一个特殊的对象，它可以存储任何类型的值，并且该值不会随着组件的重新渲染而改变。

const ref = useRef(null);

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

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

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