React 深入学习指南

用户43498295302
214 阅读4分钟

React 深入学习指南

目录

  1. React 简介
  2. React 基础
    • JSX
    • 组件
    • Props 和 State
  3. React 进阶
    • 生命周期方法
    • 事件处理
    • 条件渲染
    • 列表和 keys
  4. React Hooks
    • useState
    • useEffect
    • 自定义 Hooks
  5. Redux 和 React-Redux
    • Redux 基础
    • 使用 React-Redux
  6. React Router
    • React Router 基础
    • 动态路由
  7. 性能优化
    • 使用 React.memo
    • 使用 useMemo 和 useCallback
  8. 测试 React 应用
    • Jest 和 React Testing Library
  9. 结论

1. React 简介

React 是一个用于构建用户界面的 JavaScript 库。由 Facebook 创建并开源，React 旨在简化复杂的用户界面的开发。它基于组件的概念，使得开发者可以将 UI 切分为独立的、可复用的部分。

2. React 基础

JSX

JSX 是 JavaScript 的一种语法扩展，看起来很像 HTML。它被用于描述 UI 应该渲染成什么样子。以下是一个简单的 JSX 示例：

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

组件

React 应用是由组件构建而成的。组件可以是类组件或函数组件。

函数组件

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

类组件

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

Props 和 State

Props 是组件的输入参数，通过组件标签传递数据。State 是组件的本地状态，是动态的，可改变的。

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

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

3. React 进阶

生命周期方法

组件生命周期方法允许在特定时间点执行代码。例如，componentDidMount 会在组件挂载之后立即调用。

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

事件处理

React 中的事件处理与 DOM 事件处理类似，但有一些语法上的不同。

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

    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>
    );
  }
}

条件渲染

React 中可以使用 JavaScript 进行条件渲染。

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

列表和 Keys

使用 map() 函数可以动态创建列表。Keys 用于标识列表中的每个元素。

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

4. React Hooks

React 16.8 引入了 Hooks，允许在函数组件中使用 state 和其他 React 特性。

useState

useState 允许在函数组件中添加 state。

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

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>
  );
}

自定义 Hooks

自定义 Hooks 可以将组件逻辑提取到可重用的函数中。

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    // 假设是订阅逻辑
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);

    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  }, [friendID]);

  return isOnline;
}

5. Redux 和 React-Redux

Redux 基础

Redux 是一个状态管理库，帮助管理应用中的所有 state。核心概念包括 Store、Action 和 Reducer。

使用 React-Redux

React-Redux 是官方提供的 Redux 和 React 集成库。

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

function App() {
  return (
    <Provider store={store}>
      <MyComponent />
    </Provider>
  );
}

6. React Router

React Router 基础

React Router 用于在单页应用中实现路由功能。

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

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

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

动态路由

动态路由允许匹配和渲染基于 URL 的动态组件。

function User({ match }) {
  return <h2>User ID: {match.params.id}</h2>;
}

<Route path="/user/:id" component={User} />

7. 性能优化

使用 React.memo

React.memo 可以防止不必要的重新渲染。

const MyComponent = React.memo(function MyComponent(props) {
  /* 组件内容 */
});

使用 useMemo 和 useCallback

useMemo 和 useCallback 用于优化计算和回调函数。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

8. 测试 React 应用

Jest 和 React Testing Library

Jest 是一个测试框架，React Testing Library 提供了一组工具来测试 React 组件。

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

9. 结论

React 是一个功能强大且灵活的库，适用于构建现代化的 Web 应用。通过掌握 React 的基础和进阶技巧，开发者可以创建高性能、可维护和可扩展的应用。希望这篇文章能帮助你更好地理解和使用 React。

这篇文章涵盖了 React 的各个方面，并提供了大量的代码示例，帮助读者更好地理解和应用 React。

avatar
文章
阅读
粉丝