React函数组件值捕获特性

2024-01-30 15:44:37

在 React 中，函数组件是使用 JavaScript 函数定义的组件，而类组件是使用 JavaScript 类定义的组件。函数组件更加轻量级，更容易编写，并且可以更轻松地实现某些功能，例如值捕获。

值捕获是指在组件的子组件内访问父组件的状态或属性。在类组件中，可以通过使用 this 来访问父组件的属性和状态，而在函数组件中，可以使用 useContext 和 useCallback 钩子来实现值捕获。

使用 `useContext` 钩子进行值捕获

useContext 钩子可以让你在函数组件中访问父组件的 context 对象。context 对象是一个共享的数据对象，可以在组件树中传递。

import React, { useContext } from "react";

const MyContext = React.createContext({
  value: 0
});

const ChildComponent = () => {
  const value = useContext(MyContext);
  return <div>The value is {value}</div>;
};

const ParentComponent = () => {
  const value = 10;
  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

在这个例子中，MyContext 是一个 context 对象，ChildComponent 函数组件使用 useContext 钩子来访问父组件的 context 对象，并从 context 对象中获取 value 属性。

使用 `useCallback` 钩子进行值捕获

useCallback 钩子可以让你在函数组件中创建一个 memoized 回调函数。memoized 回调函数是在组件的整个生命周期内保持不变的，即使组件重新渲染了。

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

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const incrementCount = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <>
      <ChildComponent incrementCount={incrementCount} />
      <button onClick={incrementCount}>Increment Count</button>
    </>
  );
};

const ChildComponent = ({ incrementCount }) => {
  useEffect(() => {
    // `incrementCount` 不会在每次渲染时重新创建
    incrementCount();
  }, [incrementCount]);
  return <div>The count is {count}</div>;
};

在这个例子中，incrementCount 是一个 memoized 回调函数，ChildComponent 函数组件使用 useEffect 钩子来在每次渲染时执行 incrementCount 回调函数。因为 incrementCount 是 memoized 回调函数，所以它不会在每次渲染时重新创建，从而提高了组件的性能。