React基础 | 青训营笔记

React是一种用于构建用户界面的JavaScript库，具有以下核心概念和知识点：

1. 组件（Components）：React将用户界面分解为独立的可重用组件。组件是React应用中的构建块，可以包含自己的状态（state）和属性（props）。

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

2. JSX：JSX是一种JavaScript语法扩展，允许在JavaScript代码中编写类似HTML的结构。通过使用JSX，可以以声明式的方式描述UI组件。

import React from 'react';

const MyComponent = ({ title }) => {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

3. 虚拟DOM（Virtual DOM）：React使用虚拟DOM来提高性能。虚拟DOM是一个轻量级的副本，它是React组件树的表示。React通过比较虚拟DOM的差异，只更新必要的部分，从而减少了对实际DOM的操作。

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, React!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

当然！以下是更多React的知识点：

4. 生命周期方法（Lifecycle Methods）：React组件具有生命周期方法，用于在组件不同阶段执行特定的操作，例如组件挂载（componentDidMount）、更新（componentDidUpdate）和卸载（componentWillUnmount）等。

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    // 组件挂载后执行的操作
  }

  componentDidUpdate(prevProps, prevState) {
    // 组件更新后执行的操作
  }

  componentWillUnmount() {
    // 组件卸载前执行的操作
  }

  render() {
    // 组件渲染
  }
}

5. Hooks：Hooks是React 16.8版本引入的一种新特性，它们使函数组件能够拥有状态和其他React特性，而无需编写类组件。常用的Hooks包括useState、useEffect、useContext等。

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

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 组件挂载后执行的操作
    return () => {
      // 组件卸载前执行的操作
    };
  }, [count]);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

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

6. 条件渲染（Conditional Rendering）：React允许根据条件来渲染不同的内容或组件。

import React from 'react';

const MyComponent = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in.</p>}
    </div>
  );
};

7. 列表和键（Lists and Keys）：在React中，可以使用数组和map函数来渲染列表，并使用唯一的键（key）来标识列表中的每个元素。

import React from 'react';

const MyComponent = () => {
  const items = ['Apple', 'Banana', 'Orange'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};