React

简介

React 简介

React 是由 Facebook 开发和维护的一个开源 JavaScript 库，用于构建用户界面，尤其是单页应用程序。它的设计目的是为了简化开发复杂的用户界面，通过引入组件化的开发方式，提高代码的复用性和可维护性。

核心概念

组件 (Components)
- React 的核心思想是组件化。组件是独立、可复用的 UI 单元，可以是类组件或函数组件。每个组件封装了自己的逻辑和 UI，能够独立地进行开发和测试。
JSX
- JSX 是一种 JavaScript 的语法扩展，它允许在 JavaScript 代码中直接书写 HTML 结构。JSX 让代码更直观、易读。
```
const element = <h1>Hello, world!</h1>;
```
虚拟 DOM (Virtual DOM)
- React 使用虚拟 DOM 来提高性能。虚拟 DOM 是轻量级的 JavaScript 对象，它是对真实 DOM 的抽象表示。React 会在虚拟 DOM 和真实 DOM 之间进行差异比较（diffing），然后只更新实际需要变化的部分。
单向数据流 (One-way Data Flow)
- React 采用单向数据流，即数据从父组件流向子组件。这种方式让数据的流动更清晰，状态管理也更加可控。
状态 (State) 和属性 (Props)
- 状态是组件内部的数据，可以通过 this.setState 方法更新状态，引发组件重新渲染。
- 属性是从父组件传递给子组件的数据，是不可变的。

React 基本使用方法

创建 React 应用
- 使用 create-react-app 快速搭建 React 项目：
```
npx create-react-app my-app
cd my-app
npm start
```

创建组件

函数组件：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件：

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

使用组件

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

状态管理

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

常用工具和生态系统

React Router
- 用于在 React 应用中实现路由。
Redux / MobX
- 用于复杂应用的状态管理。
Styled-components / Emotion
- 用于在 React 中编写 CSS，提升样式管理的灵活性。

基本使用

React 基本使用方法

React 是一个用于构建用户界面的 JavaScript 库。以下是使用 React 构建应用程序的基本步骤和方法：

1. 环境搭建

要开始使用 React，首先需要搭建开发环境。推荐使用 create-react-app，它可以快速搭建一个 React 应用程序。

安装 Node.js 和 npm

确保你已经安装了 Node.js 和 npm。可以通过命令行输入以下命令来检查安装情况：

node -v
npm -v

使用 create-react-app 创建项目

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

2. 创建和使用组件

React 的核心是组件。组件可以是函数组件或类组件，每个组件封装了自己的逻辑和 UI。

函数组件

// Welcome.js
import React from 'react';

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

类组件

// WelcomeClass.js
import React, { Component } from 'react';

class WelcomeClass extends Component {
render() {
 return <h1>Hello, {this.props.name}</h1>;
}
}

export default WelcomeClass;

使用组件

// App.js
import React from 'react';
import Welcome from './Welcome';
import WelcomeClass from './WelcomeClass';

function App() {
return (
 <div>
   <Welcome name="Sara" />
   <Welcome name="Cahal" />
   <WelcomeClass name="Edite" />
 </div>
);
}

export default App;

3. JSX 语法

JSX 是一种 JavaScript 的语法扩展，允许在 JavaScript 中直接编写 HTML 结构。

示例

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

JSX 可以包含 JavaScript 表达式，使用 {} 包裹： const name = 'Sara'; const element = <h1>Hello, {name}</h1>;

4. State 和 Props

状态（State）和属性（Props）是 React 组件的两个核心概念。

State

State 是组件自身管理的数据，可以通过 this.setState 更新。

// Clock.js
import React, { Component } from 'react';

class Clock extends Component {
constructor(props) {
 super(props);
 this.state = { date: new Date() };
}

componentDidMount() {
 this.timerID = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {
 clearInterval(this.timerID);
}

tick() {
 this.setState({
   date: new Date()
 });
}

render() {
 return (
   <div>
     <h1>Hello, world!</h1>
     <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
   </div>
 );
}
}

export default Clock;

Props

Props 是从父组件传递给子组件的数据，子组件不能修改 props。

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

5. 事件处理

在 React 中，事件处理函数可以直接在 JSX 中绑定。

// Toggle.js
import React, { Component } from 'react';

class Toggle extends Component {
constructor(props) {
 super(props);
 this.state = { isToggleOn: true };

 // 为了在回调中使用 `this`，这里绑定是必要的
 this.handleClick = this.handleClick.bind(this);
}

handleClick() {
 this.setState(state => ({
   isToggleOn: !state.isToggleOn
 }));
}

render() {
 return (
   <button onClick={this.handleClick}>
     {this.state.isToggleOn ? 'ON' : 'OFF'}
   </button>
 );
}
}

export default Toggle;

6. 条件渲染

可以根据条件动态渲染组件。

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
 return <h1>Welcome back!</h1>;
}
return <h1>Please sign up.</h1>;
}

7. 列表和 keys

在 React 中，可以使用 map() 方法渲染列表。每个列表项需要一个唯一的 key 属性。

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
 <li key={number.toString()}>
   {number}
 </li>
);
return (
 <ul>{listItems}</ul>
);
}

8. 表单处理

React 中的表单元素通常需要绑定状态，以便实现受控组件。

class NameForm extends React.Component {
constructor(props) {
 super(props);
 this.state = { value: '' };

 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
 this.setState({ value: event.target.value });
}

handleSubmit(event) {
 alert('A name was submitted: ' + this.state.value);
 event.preventDefault();
}

render() {
 return (
   <form onSubmit={this.handleSubmit}>
     <label>
       Name:
       <input type="text" value={this.state.value} onChange={this.handleChange} />
     </label>
     <input type="submit" value="Submit" />
   </form>
 );
}
}

9. 组件生命周期

React 组件的生命周期包括三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段有对应的生命周期方法。

挂载：componentDidMount()
更新：componentDidUpdate()

卸载：componentWillUnmount()

class LifecycleDemo extends React.Component {
componentDidMount() {
 console.log('Component did mount');
}

componentDidUpdate(prevProps, prevState) {
 console.log('Component did update');
}

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

render() {
 return <div>Check the console for lifecycle messages.</div>;
}
}

10. 使用 React Hooks

React 16.8 引入了 Hooks，使函数组件能够使用状态和其他 React 特性。

useState

import React, { useState } from 'react';

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

return (
 <div>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>
     Click me
   </button>
 </div>
);
}

useEffect

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

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

useEffect(() => {
 document.title = `You clicked ${count} times`;
}, [count]);

return (
 <div>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>
     Click me
   </button>
 </div>
);
}

常用

React 常用代码

1. 创建组件

函数组件

import React from 'react';

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

类组件

import React, { Component } from 'react';

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

export default Greeting;

2. 使用组件

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

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

3. 使用状态（State）

useState Hook

import React, { useState } from 'react';

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

return (
 <div>
   <p>You clicked {count} times</p>
   <button onClick={() => setCount(count + 1)}>Click me</button>
 </div>
);
}

export default Counter;

类组件中的状态

import React, { Component } from 'react';

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

render() {
 return (
   <div>
     <p>You clicked {this.state.count} times</p>
     <button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button>
   </div>
 );
}
}

export default Counter;

4. 使用 Effect（副作用）

useEffect Hook

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

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

useEffect(() => {
 const interval = setInterval(() => {
   setCount(c => c + 1);
 }, 1000);

 return () => clearInterval(interval); // 清除定时器
}, []);

return <p>{count} seconds passed.</p>;
}

export default Timer;

5. 表单处理

受控组件

import React, { useState } from 'react';

function NameForm() {
const [name, setName] = useState('');

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

const handleSubmit = (event) => {
 alert('A name was submitted: ' + name);
 event.preventDefault();
};

return (
 <form onSubmit={handleSubmit}>
   <label>
     Name:
     <input type="text" value={name} onChange={handleChange} />
   </label>
   <input type="submit" value="Submit" />
 </form>
);
}

export default NameForm;

6. 条件渲染

import React from 'react';

function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
 return <UserGreeting />;
}
return <GuestGreeting />;
}

export default Greeting;

7. 列表和 Keys

import React from 'react';

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
 <li key={number.toString()}>
   {number}
 </li>
);
return <ul>{listItems}</ul>;
}

export default NumberList;

// 使用组件
import React from 'react';
import ReactDOM from 'react-dom';
import NumberList from './NumberList';

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById('root'));

8. 中间件（Middlewares），Cookies 和 Sessions

Middlewares (with Redux)

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
rootReducer,
applyMiddleware(thunk)
);

Cookies 和 Sessions

import React from 'react';
import Cookies from 'js-cookie';

function App() {
const setCookie = () => {
 Cookies.set('user', 'John Doe', { expires: 7 });
};

const getCookie = () => {
 alert(Cookies.get('user'));
};

return (
 <div>
   <button onClick={setCookie}>Set Cookie</button>
   <button onClick={getCookie}>Get Cookie</button>
 </div>
);
}

export default App;

9. 认证（Authentication）

使用 JWT 认证

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

function Login() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const handleSubmit = async (event) => {
 event.preventDefault();
 const response = await axios.post('/api/authenticate', { username, password });
 const token = response.data.token;
 localStorage.setItem('token', token);
};

return (
 <form onSubmit={handleSubmit}>
   <label>
     Username:
     <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
   </label>
   <br />
   <label>
     Password:
     <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
   </label>
   <br />
   <button type="submit">Login</button>
 </form>
);
}

export default Login;

10. 路由（Routing）

使用 React Router

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

function Home() {
return <h2>Home</h2>;
}

function About() {
return <h2>About</h2>;
}

function Users() {
return <h2>Users</h2>;
}

function App() {
return (
 <Router>
   <div>
     <nav>
       <ul>
         <li><Link to="/">Home</Link></li>
         <li><Link to="/about">About</Link></li>
         <li><Link to="/users">Users</Link></li>
       </ul>
     </nav>

     <Switch>
       <Route path="/about"><About /></Route>
       <Route path="/users"><Users /></Route>
       <Route path="/"><Home /></Route>
     </Switch>
   </div>
 </Router>
);
}

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

基础概念

在 React 中，有一些关键概念对于理解和高效使用这个框架非常重要。以下是 React 中少数重要的概念：

1. 组件（Components）

组件是 React 应用程序的构建块。它们可以是函数组件或类组件。组件可以接受参数（称为 “props”）并返回用于描述 UI 的 React 元素。 - 函数组件：一个简单的 JavaScript 函数，接受 props 并返回一个 React 元素。 - 类组件：使用 ES6 类定义，更强大，适合需要内部状态和生命周期方法的场景。

2. JSX

JSX 是一种 JavaScript 的语法扩展，允许你在 JavaScript 代码中写类似 HTML 的代码。React 使用 JSX 来描述用户界面。 const element = <h1>Hello, world!</h1>;

3. Props

Props（属性）是只读的输入参数，用于从父组件传递数据到子组件。组件通过 props 接收数据并展示。 function Welcome(props) { return <h1>Hello, {props.name}</h1>; }

4. 状态（State）

State 是组件内部的数据管理机制，通常用于跟踪用户输入、API 请求结果等动态数据。State 只能在类组件或使用 Hook 的函数组件中使用。 ``` class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; }

render() { return (

    <p>{this.state.count}</p>
    <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
  </div>
);

} }


### 5. 生命周期方法
类组件有一组特殊的方法，当组件实例在 DOM 中被创建、更新和销毁时会被自动调用。这些方法称为生命周期方法，例如 `componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount`。

class Example extends React.Component { componentDidMount() { // 组件已经渲染到 DOM 中 }

componentDidUpdate(prevProps, prevState) { // 组件更新 }

componentWillUnmount() { // 组件即将从 DOM 中移除 }

render() { return

Example Component

; } }


### 6. Hook
Hooks 是 React 16.8 引入的功能，允许在函数组件中使用状态和其他 React 特性。常用的 Hook 包括 `useState` 和 `useEffect`。
- **useState**：管理组件状态。
- **useEffect**：处理副作用，例如数据获取或订阅。

import React, { useState, useEffect } from ‘react’;

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

useEffect(() => { document.title = You clicked ${count} times; }, [count]);

return (

  <p>You clicked {count} times</p>
  <button onClick={() => setCount(count + 1)}>Click me</button>
</div>

); }


### 7. 上下文（Context）
Context 提供了一种方式，在组件树中传递数据而无需逐层传递 props。它适用于全局数据，例如当前的认证用户、主题或首选语言。

const ThemeContext = React.createContext(‘light’);

function App() { return ( <ThemeContext.Provider value=“dark”> </ThemeContext.Provider> ); }

function Toolbar() { return (

  <ThemedButton />
</div>

); }

function ThemedButton() { return ( <ThemeContext.Consumer> {theme => } </ThemeContext.Consumer> ); }


### 8. 虚拟 DOM（Virtual DOM）
虚拟 DOM 是 React 高效更新用户界面的核心技术。React 创建虚拟 DOM 来描述组件的结构和状态变化，然后计算最小的 DOM 更新以保持同步。

### 9. 条件渲染
根据不同条件动态渲染不同的组件或元素。

function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return

Welcome back!

; } return

Please sign up.

; }


### 10. 列表和 Keys
在渲染列表时需要使用 key 属性来帮助 React 识别哪些元素发生了变化、被添加或移除。

const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>

{number}

); ```

这些概念是理解和使用 React 的基础，掌握这些可以帮助你构建复杂且高效的用户界面。

React

米霖

2024-07-18

React

简介

React 简介

核心概念

React 基本使用方法

常用工具和生态系统

基本使用

React 基本使用方法

1. 环境搭建

安装 Node.js 和 npm

使用 create-react-app 创建项目

2. 创建和使用组件

函数组件

类组件

使用组件

3. JSX 语法

示例

4. State 和 Props

State

Props

5. 事件处理

6. 条件渲染

7. 列表和 keys

8. 表单处理

9. 组件生命周期

10. 使用 React Hooks

useState

useEffect

常用

React 常用代码

1. 创建组件

函数组件

类组件

2. 使用组件

3. 使用状态（State）

useState Hook

类组件中的状态

4. 使用 Effect（副作用）

useEffect Hook

5. 表单处理

受控组件

6. 条件渲染

7. 列表和 Keys

8. 中间件（Middlewares），Cookies 和 Sessions

Middlewares (with Redux)

Cookies 和 Sessions

9. 认证（Authentication）

使用 JWT 认证

10. 路由（Routing）

使用 React Router

基础概念

1. 组件（Components）

2. JSX

3. Props

4. 状态（State）

Welcome back!

Please sign up.