React——深挖组件三大核心属性之refs与事件处理

2024-02-23 14:31:09

React 是一个用于构建用户界面的 JavaScript 库。它使用声明式编程范式，可以更轻松地构建交互式用户界面。React 组件是构成 React 应用程序的基本构建块。每个组件都有一个渲染方法，该方法返回一个 React 元素。React 元素可以是原生 DOM 元素、另一个组件或一个片段。

组件的三大核心属性是：

props：组件从父组件继承的数据。
state：组件自己的数据。
refs：组件的引用。

Refs 允许你访问组件的 DOM 元素或其他底层实例。这对于某些用例非常有用，例如：

聚焦输入字段
手动更新 DOM
与第三方库交互

有两种方法可以创建 ref：

字符串形式的 ref
回调函数形式的 ref

字符串形式的 ref 不推荐使用，因为它已被标记为过时。回调函数形式的 ref 更为灵活，并且可以与函数组件一起使用。

要使用回调函数形式的 ref，你可以在组件中定义一个 ref 属性，并将其设置为一个函数。该函数将接收一个参数，该参数是组件的 DOM 元素或其他底层实例。

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

  return <div ref={ref}>Hello, world!</div>;
};

然后，你可以在组件的父组件中使用 useRef 钩子来获取组件的 ref。

const ParentComponent = () => {
  const ref = useRef(null);

  return <MyComponent ref={ref} />;
};

现在，你就可以使用 ref.current 来访问组件的 DOM 元素或其他底层实例。

console.log(ref.current); // <div>Hello, world!</div>

事件处理是 React 中另一个重要的概念。事件处理程序是响应用户输入的函数。React 中有许多内置的事件处理程序，例如 onClick、onChange 和 onSubmit。

要使用事件处理程序，你可以在组件中定义一个事件处理程序属性，并将其设置为一个函数。该函数将接收一个参数，该参数是事件对象。

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return <button onClick={handleClick}>Click me!</button>;
};

然后，你可以在组件的父组件中使用 useCallback 钩子来创建事件处理程序。

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return <MyComponent onClick={handleClick} />;
};