使用状态与使用 ref - Javascript

在 React.js 中，状态（state）是用于存储组件内部可变化的数据的对象，而 ref 是用于获取组件内部元素的引用。在本文中，我们将重点介绍如何使用状态和 ref。

使用状态

使用状态可以使 React 组件具有交互性。当状态变化时，React 会自动重新渲染组件，并将变更应用于用户界面上。以下是使用状态的示例：

import React, { useState } from "react";

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

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

在示例中，我们使用 useState Hook 来声明一个状态 count，其初始值为 0。使用 setCount 方法可以更新状态的值。每当用户点击“Click me”按钮时，increment 函数会增加计数器的值，并使用 setCount 方法更新状态的值。最后，我们将计数器的值显示在用户界面上。

使用 ref

使用 ref 可以访问组件内部的 DOM 元素或子组件，例如，可以使用 ref 获取输入框的值或调用子组件方法。以下是使用 ref 的示例：

import React, { useRef } from "react";

function TextInput() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

在示例中，我们使用 useRef Hook 来声明一个 ref inputRef。我们可以将 ref inputRef 见传递给输入框元素的 ref 属性，从而获得对输入框的引用。当用户点击“Focus input”按钮时，handleClick 函数将使用 inputRef.current.focus() 将焦点设置为 inputRef 引用的元素。

总结

使用状态和 ref 是 React 构建交互性 Web 应用的重要工具。状态可以将组件与用户交互的状态分离，并自动重新渲染组件，从而提高应用程序的性能。而 ref 可以使我们轻松地访问组件内部元素的引用，并执行相应的操作。