React 入门基础指南

本文是很基础的react大概的一个使用

什么是React？

React是一个由Facebook开发并维护的JavaScript库，用于构建用户界面。它是一个声明式、高效、灵活的库，可以用于构建单页面应用（SPA）和复杂的交互式用户界面。

React的核心概念是组件化，它允许你将用户界面划分成小而独立的部分，每个部分都可以独立开发、维护和重用。

安装React

要开始使用React，首先需要确保你的项目环境中已经安装了Node.js和npm（Node Package Manager）。然后，在你的项目文件夹中打开终端，运行以下命令来创建React应用：

npx create-react-app my-app
cd my-app
npm start

这将创建一个名为my-app的React应用，并在开发模式下启动应用。

React组件

React应用由多个组件组成。组件是可以独立运作的、可复用的代码单元。每个组件都有自己的状态（state）和属性（props）。

创建一个简单的React组件

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

export default MyComponent;

渲染React组件

将组件渲染到DOM中，需要在主文件中进行渲染。

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

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

组件的Props和State

Props

Props是组件的属性，是从父组件传递给子组件的数据。在组件内部，可以通过this.props来访问这些属性。

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

export default MyComponent;

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

ReactDOM.render(<MyComponent name="Alice" />, document.getElementById('root'));

State

State是组件内部的状态，可以在组件中管理和更新数据。使用setState方法来修改状态，并在render方法中使用它来更新UI。

import React from 'react';

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

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

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

export default Counter;

事件处理

在React中，可以通过事件处理函数来响应用户的操作。

import React from 'react';

class ButtonClick extends React.Component {
  handleClick = () => {
    alert('Button clicked!');
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

export default ButtonClick;

条件渲染

根据条件来渲染不同的内容是React中常见的一种用法。

import React from 'react';

class ConditionalRendering extends React.Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;

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

export default ConditionalRendering;

列表渲染

使用map函数来渲染一个数据列表。

import React from 'react';

class ListRendering extends React.Component {
  render() {
    const items = this.props.items;

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

export default ListRendering;

生命周期方法

React组件有一些生命周期方法，可以在不同的组件生命周期阶段执行一些操作。

以下是常用的生命周期方法：

• componentDidMount: 组件渲染完成后调用，可以进行异步操作或数据获取。
• componentDidUpdate: 组件更新后调用，可以根据新的props或state执行操作。
• componentWillUnmount: 组件将要卸载时调用，可以进行一些清理工作。

import React from 'react';

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

  componentDidUpdate(prevProps, prevState) {
    console.log('Component has updated!');
  }

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

  render() {
    return <div>Component Lifecycle Example</div>;
  }
}

export default LifecycleExample;

使用React Hooks

Hooks是React 16.8版本引入的新特性，它可以让你在无需编写类组件的情况下使用状态和其他React特性。

import React, { useState } from 'react';

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

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

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

export default HookExample;

组件通信

在React中，组件之间可以通过props和回调函数进行通信。如果两个组件有共同的父组件，可以通过父组件来传递数据和方法。

父向子组件传递数据

import React from 'react';

class ParentComponent extends React.Component {
  render() {
    const message = "Hello from Parent!";
    return <ChildComponent message={message} />;
  }
}

class ChildComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

export default ParentComponent;

子向父组件传递数据

通过回调函数来实现子组件向父组件传递数据：

import React from 'react';

class ParentComponent extends React.Component {
  handleChildData = (data) => {
    console.log('Data from child:', data);
  };

  render() {
    return <ChildComponent sendDataToParent={this.handleChildData} />;
  }
}

class ChildComponent extends React.Component {
  sendDataToParent = () => {
    this.props.sendDataToParent('Hello from Child!');
  };

  render() {
    return (
      <div>
        <button onClick={this.sendDataToParent}>Send Data to Parent</button>
      </div>
    );
  }
}

export default ParentComponent;

表单处理

在React中，表单的处理和普通的HTML表单有一些不同。React中的表单元素的状态由React管理，因此需要使用onChange事件来处理表单的输入变化。

import React from 'react';

class FormExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }

  handleInputChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted:', this.state.username, this.state.password);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="username"
          value={this.state.username}
          onChange={this.handleInputChange}
          placeholder="Username"
        />
        <input
          type="password"
          name="password"
          value={this.state.password}
          onChange={this.handleInputChange}
          placeholder="Password"
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default FormExample;

React Router

React Router是用于处理在React应用中进行导航和路由的库。它允许你根据不同的URL路径来渲染不同的组件。

首先，你需要安装React Router：

npm install react-router-dom

然后，使用BrowserRouter组件将应用包裹起来，并在需要导航的地方使用Link组件：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;
const Contact = () => <div>Contact Page</div>;

const App = () => (
  <Router>
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>

    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  </Router>
);

export default App;

受控组件与非受控组件

在React中，表单元素可以分为受控组件和非受控组件。

受控组件是由React来管理表单元素的状态，包括其值和变化。通常通过value和onChange来控制表单元素的值和变化。

import React, { useState } from 'react';

const ControlledForm = () => {
  const [username, setUsername] = useState('');

  const handleInputChange = (event) => {
    setUsername(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Username:', username);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={handleInputChange}
        placeholder="Username"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

非受控组件则是由DOM本身来管理表单元素的状态，通常通过ref来访问DOM节点。

import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Username:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        ref={inputRef}
        placeholder="Username"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;

使用Context进行状态管理

Context是React提供的一种跨组件层级共享数据的机制。它允许你在组件树中传递数据，而不必通过props手动传递。

import React, { createContext, useContext, useState } from 'react';

// 创建一个Context
const MyContext = createContext();

// 提供数据的组件
const ParentComponent = () => {
  const [message, setMessage] = useState('Hello from Context');

  return (
    <MyContext.Provider value={message}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// 使用数据的组件
const ChildComponent = () => {
  const message = useContext(MyContext);

  return <div>{message}</div>;
};

export default ParentComponent;

错误边界

错误边界是React 16版本引入的新特性，它允许你在组件层级之间捕获JavaScript错误，并显示替代UI而不是导致整个组件树崩溃。

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 这里可以记录错误信息，发送到服务器等处理
    console.error('Error:', error);
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

然后，在使用错误边界的地方包裹需要捕获错误的组件：

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const SomeComponent = () => {
  // 模拟出现错误
  throw new Error('Error occurred');

  return <div>Some Component</div>;
};

const App = () => {
  return (
    <ErrorBoundary>
      <SomeComponent />
    </ErrorBoundary>
  );
};

export default App;

使用PropTypes进行类型检查

PropTypes是React提供的一种属性类型检查机制，可以帮助你验证组件接收的props是否符合预期的类型。

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

export default MyComponent;

样式处理

在React中，有多种方式来处理组件样式：

内联样式

import React from 'react';

const MyComponent = () => {
  const styles = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
  };

  return <div style={styles}>Hello, World!</div>;
};

export default MyComponent;

使用CSS模块

在Create React App中，可以使用CSS模块来为组件添加局部样式。

首先，确保文件名以.module.css结尾。

/* MyComponent.module.css */
.myComponent {
  background-color: blue;
  color: white;
  padding: 10px;
}

然后，在组件中引入样式并应用它。

import React from 'react';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return <div className={styles.myComponent}>Hello, World!</div>;
};

export default MyComponent;

优化性能

在React中，性能优化是一个重要的主题，特别是对于大型或复杂的应用程序。以下是一些优化性能的方法：

使用React.memo

React.memo是一个高阶组件，可以用于优化组件的性能，它将组件的props进行浅比较，如果props没有改变，组件将不会重新渲染。

import React from 'react';

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

export default MyComponent;

使用useCallback和useMemo

useCallback和useMemo是React Hooks，它们可以用于缓存回调函数和计算结果，避免在每次渲染时重新创建它们。

import React, { useCallback, useMemo } from 'react';

const MyComponent = ({ items }) => {
  const handleClick = useCallback((item) => {
    // 处理点击事件
  }, []);

  const totalItems = useMemo(() => items.reduce((sum, item) => sum + item, 0), [items]);

  return (
    <div>
      {items.map((item, index) => (
        <button key={index} onClick={() => handleClick(item)}>
          Item {item}
        </button>
      ))}
      <p>Total: {totalItems}</p>
    </div>
  );
};

export default MyComponent;

前端路由

React Router是用于处理在React应用中进行导航和路由的库。它允许你根据不同的URL路径来渲染不同的组件。

首先，你需要安装React Router：

npm install react-router-dom

然后，使用BrowserRouter组件将应用包裹起来，并在需要导航的地方使用Link组件：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;
const Contact = () => <div>Contact Page</div>;

const App = () => (
  <Router>
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>

    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  </Router>
);

export default App;