弹指掌握React组件实例三大属性，成为前端大神指日可待！

前端

2022-12-07 02:23:28

React 组件实例的三大属性：State、Props 和 Refs

简介

在当今数据驱动的世界里，我们经常需要处理大量信息，从管理待办事项和财务状况，到与朋友分享回忆。虽然有许多工具和应用程序可以帮助我们完成这些任务，但如果没有一种可以满足我们所有需求的工具，那就太棒了。

认识 React

React 应运而生，它是一种开源的前端 JavaScript 库，用于构建交互式且动态的用户界面 (UI)。它让创建复杂的 Web 应用程序变得轻而易举，而这些应用程序通常需要多个工具和应用程序才能实现。

深入了解组件实例

React 应用程序是由称为组件的模块化构建块组成的。每个组件都有一个特定的目的，它们通过树形结构相互连接。组件实例有三个关键属性：

1. State

State 是组件的私有数据存储。它只在该组件内部可见，不能被其他组件访问。State 可以包含任何类型的数据，例如字符串、数字、数组或对象。

2. Props

Props 是组件的公共属性。它们从父组件传递给子组件，用于配置子组件的行为。Props 是只读的，子组件不能修改它们。Props 可以包含任何类型的数据，与 State 类似。

3. Refs

Refs 是对组件实例的引用。它们允许我们直接访问组件的 DOM 元素、调用组件的方法等等。Refs 可以包含任何类型的数据，但通常用于存储 DOM 元素的引用。

代码示例

为了更深入地理解组件实例的属性，让我们编写一个简单的 React 计数器组件：

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

const Counter = (props) => {
  // State：用于存储当前计数
  const [count, setCount] = useState(0);

  // Ref：用于存储输入框元素
  const inputRef = useRef(null);

  // Effect：在组件加载后聚焦输入框
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  // 处理输入框更改事件
  const handleInputChange = (event) => {
    setCount(parseInt(event.target.value));
  };

  // 处理按钮点击事件
  const handleButtonClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <input type="number" ref={inputRef} value={count} onChange={handleInputChange} />
      <button onClick={handleButtonClick}>+</button>
    </div>
  );
};

export default Counter;