React 速查备忘单

<Student
  firstName="Julie"
  lastName="Johnson"
  age={23}
  pro={true}
/>

import React from 'react';

export default function Student(props) {
  return (
    <h1>
      {props.firstName} {props.lastName} is {props.age}.
    </h1>
  );
}

import React, { useState } from 'react';

export default function Hello(props) {
  let [name, setName] = useState('Julie');
  function updateName() {
    let newName = prompt('What is your name?');
    setName(newName);
  }

  return (
    <div>
      <h1>{name}</h1>
      <button onClick={updateName}>Update name</button>
    </div>
  );
}

import React from 'react';

export default function Hello() {
  function handleClick(event) {
    event.preventDefault();
    alert('Hello World');
  }

  return (
    <a href="/" onClick={handleClick}>
      Say Hi
    </a>
  );
}

注意：最常见的事件监听器是链接/按钮的 onClick 和表单的 onSubmit。

let elements = ['one', 'two', 'three'];

return (
  <ul>
    {elements.map(function (value, index) {
      return <li key={index}>{value}</li>;
    })}
  </ul>
);

注意：map 循环中的每个列表项都需要一个具有唯一值的 key 属性，通常是索引。

let elements = [
  {
    name: 'one',
    value: 1
  },
  {
    name: 'two',
    value: 2
  },
  {
    name: 'three',
    value: 3
  }
];
return (
  <ul>
    {elements.map(function (element, index) {
      return (
        <li key={index}>
          The value for {element.name} is {element.value}
        </li>
      );
    })}
  </ul>
);

注意：map 循环中的每个列表项都需要一个具有唯一值的 key 属性，通常是索引。

import React, { useState } from 'react';

export default function LoginForm() {
  let [username, setUsername] = useState('');
  let [password, setPassword] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Loging in with ${username} and ${password}`);
  }

  function updateUsername(event) {
    setUsername(event.target.value);
  }

  function updatePassword(event) {
    setPassword(event.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Username" onChange={updateUsername} />
      <input type="password" placeholder="Password" onChange={updatePassword} />
      <input type="submit" value="Login" />
    </form>
  );
}

import React from 'react';
import './Student.css';

export default function Student() {
  return <div className="Student">Julie Johnson</div>;
}

注意：你需要创建一个名为 Student.css 的 CSS 文件

import React from 'react';
import axios from 'axios';

export default function Weather(props) {
  function handleResponse(response) {
    console.log(response);
  }

  if (notifications) {
    return <p>notifications</p>;
  } else {
    let url = `https://notifications.com`;
    axios.get(url).then(handleResponse);
    return <p>Loading notifications..</p>;
  }
}

注意：确保先将 Axios 导入到你的项目中。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

注意：useState Hook 是 React 的内置钩子，允许函数式组件管理本地状态。它提供了一种在函数式组件中声明状态变量并更新它们的方法。示例代码演示了如何使用它

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  const [isCompleted, setIsCompleted] = useState(false);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const toggleCompletion = () => {
    setIsCompleted(!isCompleted);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>

      <input
        type="text"
        value={name}
        onChange={handleNameChange}
        placeholder="Enter your name"
      />

      <label>
        <input
          type="checkbox"
          checked={isCompleted}
          onChange={toggleCompletion}
        />
        Completed
      </label>
    </div>
  );
}

export default Counter;

注意：你可以通过在函数式组件中多次调用 useState Hook 来声明多个状态变量。每次调用 useState 都会管理一个单独的状态。

import { useState } from 'react';

function FormExample() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(
      `Name: ${formData.name}, Email: ${formData.email}, Message: ${formData.message}`
    );
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input
        type="text"
        id="name"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />

      <label htmlFor="email">Email:</label>
      <input
        type="email"
        id="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />

      <label htmlFor="message">Message:</label>
      <textarea
        id="message"
        name="message"
        value={formData.message}
        onChange={handleChange}
      />

      <button type="submit">Submit</button>
    </form>
  );
}

export default FormExample;

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Seconds: {seconds}</div>;
}

export default Timer;

注意：React 中的 useEffect Hook 用于在函数式组件中执行副作用。它允许你根据组件生命周期事件（如挂载、更新和卸载）执行代码。

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

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        setUsers(response.data);
      })
      .catch((error) => {
        console.error('Error fetching users:', error);
      });
  }, []);

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

注意：确保先将 Axios 导入到你的项目中。

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue !== null ? JSON.parse(storedValue) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

export default useLocalStorage;

注意：自定义 Hook 是 React 中可重用的函数，包含跨多个组件共享的逻辑。它们允许你将有状态逻辑从组件中提取到独立的函数中。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current); // Access the DOM element
  }

  render() {
    return <div ref={this.myRef}>Hello, world!</div>;
  }
}

export default MyComponent;

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

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    console.log(myRef.current); // Access the DOM element
  }, []);

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

export default MyComponent;

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = null;
    this.setRef = (element) => {
      this.myRef = element;
    };
  }

  componentDidMount() {
    console.log(this.myRef); // Access the DOM element
  }

  render() {
    return <div ref={this.setRef}>Hello, world!</div>;
  }
}

export default MyComponent;

Copy code
import React from "react";

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// Usage
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

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

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

  useEffect(() => {
    // Focus the input element when the component mounts
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
}

export default FocusInput;

注意：Refs 通常用于直接访问和与 DOM 元素交互。这里有一个示例，我们使用 ref 聚焦输入元素。

import React, { useRef } from 'react';

function Form() {
  const firstInputRef = useRef(null);
  const secondInputRef = useRef(null);

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      secondInputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={firstInputRef} type="text" onKeyDown={handleKeyDown} />
      <input ref={secondInputRef} type="text" />
    </div>
  );
}

export default Form;

注意：你还可以使用 refs 在多个元素之间管理焦点。