Mydoc | Mydoc

代码

jsx

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

function MyComponent(props) {
  // 使用useState hook来创建一个state变量和一个设置该变量的函数
  const [count, setCount] = useState(0);

  // 使用useRef hook来创建一个ref
  const myRef = useRef(null);

  // 使用useEffect hook来处理副作用（比如组件加载和更新时的行为）
  useEffect(() => {
    console.log('Component updated');
    // 可以使用myRef.current来访问DOM元素
  });

  // 事件处理函数，用于更新state
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
      <div ref={myRef}>I'm a ref!</div>
    </div>
  );
}

export default MyComponent;

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

function MyComponent(props) {
  // 使用useState hook来创建一个state变量和一个设置该变量的函数
  const [count, setCount] = useState(0);

  // 使用useRef hook来创建一个ref
  const myRef = useRef(null);

  // 使用useEffect hook来处理副作用（比如组件加载和更新时的行为）
  useEffect(() => {
    console.log('Component updated');
    // 可以使用myRef.current来访问DOM元素
  });

  // 事件处理函数，用于更新state
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
      <div ref={myRef}>I'm a ref!</div>
    </div>
  );
}

export default MyComponent;

在这个例子中，我们创建了一个名为MyComponent的函数组件。它接受外部传入的props，在这个例子中是props.name

State（状态）: 使用useState hook来创建一个局部状态count，并提供一个方法setCount来更新这个状态。
Refs（引用）: 使用useRef hook来创建一个引用myRef，它可以用来直接访问DOM元素或组件实例。
Props（属性）: 组件通过props参数接收从父组件传递过来的数据。在这个例子中，我们使用props.name来显示传递进来的名称。

副作用处理: 使用useEffect hook来处理组件的副作用，比如在组件挂载或更新时执行一些操作。这里我们在控制台输出了一条消息。

代码 ​

代码