从入门到精通：React 基础知识总结（持续更新）

React 基础知识

React 是一种用于构建用户界面的 JavaScript 库。它使用声明式编程范式，使开发人员能够轻松地创建交互式且高效的 UI。

JSX 语法

JSX 语法是一种 JavaScript 语法扩展，在 React 中可以方便地用来 UI。JSX 语法类似于 HTML，但它允许在 HTML 中嵌入 JavaScript 表达式。

const element = <div>Hello, world!</div>;

组件

组件是 React 的基本构建块。组件可以是函数组件或类组件。函数组件是一种简单组件，它接收属性并返回一个 React 元素。类组件是一种更复杂的组件，它具有状态和生命周期方法。

const MyComponent = () => {
  return <div>Hello, world!</div>;
};

状态

状态是组件的内部数据。状态可以被组件自身或父组件修改。

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

属性

属性是组件从父组件接收的数据。属性是只读的，不能被组件修改。

const MyComponent = (props) => {
  return <div>Hello, {props.name}!</div>;
};

事件处理

事件处理是组件响应用户交互的方式。React 提供了多种事件处理函数，如 onClick、onChange 等。

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return <button onClick={handleClick}>Click me!</button>;
};

生命周期

生命周期方法是组件在不同阶段执行的函数。生命周期方法可以用来初始化组件、更新组件或销毁组件。

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted!');
  }

  componentWillUnmount() {
    console.log('Component unmounted!');
  }

路由

路由是 React 应用中管理页面导航的方式。React 提供了 react-router 库，可以方便地实现路由功能。

import { BrowserRouter, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
};

Redux

Redux 是一个状态管理库，可以帮助管理 React 应用中的全局状态。Redux 提供了一种单向数据流的模式，使状态管理更加简单和可预测。

import { createStore } from 'redux';

const store = createStore(reducer);

结语

React 是一个功能强大且易于使用的 JavaScript 库，非常适合构建交互式且高效的 UI。本文只是对 React 基础知识的简单介绍，更多详细的内容可以参考 React 官方文档。