JavaScript 第24章：React 基础

React 是一个用于构建用户界面的 JavaScript 库，特别擅长于构建高性能的单页应用（SPA）。它由 Facebook 开发，并逐渐成为前端开发领域中最受欢迎的框架之一。React 的核心理念是组件化，即把复杂的 UI 分解成一系列独立的、可复用的组件。

React 概述

React 是一个声明式的、高效的、灵活的 JavaScript 库，用于构建用户界面。其主要特点包括：

• 组件化：React 应用程序是由组件组成的，组件是独立的、可复用的代码块。
• 虚拟 DOM：React 使用虚拟 DOM 来提高更新效率，只在必要时更新真实 DOM。
• 单向数据流：React 提倡数据流只有一个方向，这样可以更容易地理解和维护代码。

JSX 语法

JSX 是 JavaScript 的一种语法扩展，使得在 JavaScript 中书写 HTML 标签成为可能。它使得代码更具可读性和表现力。

示例代码

import React from 'react';

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

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

组件与属性

组件是 React 的基本构建块。它们可以接收任意的 props 来渲染 UI，并且可以嵌套使用其他组件。

示例代码

import React from 'react';

function Avatar(props) {
  return <img src={props.avatarSrc} alt="avatar" />;
}

function Profile(props) {
  return (
    <div>
      <Avatar avatarSrc={props.avatarUrl} />
      <p>Name: {props.name}</p>
    </div>
  );
}

ReactDOM.render(
  <Profile name="Alice" avatarUrl="http://example.com/avatar.jpg" />,
  document.getElementById('root')
);

状态管理

React 组件可以拥有自己的状态（state），状态的变化会触发组件的重新渲染。

示例代码

import React, { useState } from 'react';

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

  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

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

在这个例子中，我们使用了 useState Hook 来管理组件的状态，并且当状态改变时，组件会自动重新渲染。

生命周期

React 组件具有不同的生命周期阶段，这些阶段决定了何时执行某些操作，例如初始化状态、接收新属性、更新状态或卸载。

示例代码

import React, { Component } from 'react';

class LifecycleSample extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('Constructor called');
  }

  componentDidMount() {
    console.log('Component did mount');
  }

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

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

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

  render() {
    console.log('Rendering component');
    return (
      <div>
        Count: {this.state.count}
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

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

在这个例子中，我们定义了一个类组件，并且观察了它的生命周期方法的调用时机。componentDidMount 方法在组件挂载到 DOM 后立即调用，而 componentDidUpdate 则在每次更新后调用。

小结

以上是对 React 基础概念的简要介绍。React 通过其独特的组件化思想、状态管理和生命周期机制，为开发者提供了一种构建复杂应用的有效方式。通过实践这些概念，你可以开始构建自己的 React 应用程序。随着经验的积累，你还可以探索更多高级特性，如 Context API、Hooks 和 Redux 等。

好的，让我们继续深入探讨React的更多细节，包括更复杂的组件交互、状态提升、Context API以及Hooks等高级特性。

更复杂的组件交互

在构建大型应用时，通常会有多个组件之间的数据共享和交互。了解如何有效地组织这些交互是很重要的。

状态提升

当多个组件需要访问同一个状态时，可以将这个状态提升到它们共同的父组件中。父组件通过props将状态传递给子组件，并通过回调函数控制状态的更新。

示例代码

import React, { useState } from 'react';

function Parent() {
  const [parentState, setParentState] = useState('');

  const handleChange = (childState) => {
    setParentState(childState);
  };

  return (
    <div>
      <h1>Parent State: {parentState}</h1>
      <Child onStateChange={handleChange} />
    </div>
  );
}

function Child({ onStateChange }) {
  const [childState, setChildState] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    onStateChange(childState);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="childState">Child State:</label>
      <input type="text" id="childState" value={childState} onChange={(e) => setChildState(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

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

在这个例子中，Parent 组件持有状态，并通过 onStateChange 回调函数将状态更新的能力传递给 Child 组件。

React Context API

Context API 是一种在组件树中传递数据的方式，无需手动将props层层传递下去。这对于全局状态管理非常有用。

示例代码

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

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

const ThemedButton = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Switch to {theme === 'light' ? 'dark' : 'light'} theme
    </button>
  );
};

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

在这个例子中，App 组件通过 Provider 向子组件提供主题状态和切换主题的方法。ThemedButton 组件通过 useContext Hook 接收上下文值，并据此渲染按钮文本。

Hooks

React Hooks 允许你在不编写 class 的情况下使用 state 和其他 React 特性。主要有以下几个常用的 Hooks：

• useState：用于添加局部状态。
• useEffect：用于执行副作用操作，如数据获取、订阅或手动更改DOM。
• useContext：用于消费 React 上下文。

示例代码

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

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

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

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

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

在这个例子中，我们使用 useState 来管理点击次数的状态，并使用 useEffect 来监听状态的变化，并在每次点击后更新文档标题。

通过上述内容，你应该对React的基本使用有了较为全面的理解。继续深入学习React，你可以探索更多高级主题，如路由管理、性能优化、测试等。此外，React 生态系统中有许多优秀的库和工具可以辅助开发，如Redux、MobX、React Router等。

让我们继续深入探讨React的高级特性和最佳实践，包括路由管理、性能优化、错误边界、测试等。

React Router

React Router 是一个标准的路由库，用于在单页应用中实现导航和视图呈现。

示例代码

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

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

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

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

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

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

在这个例子中，我们使用了 BrowserRouter 来管理路由，Route 组件来定义路由规则，以及 Link 组件来创建导航链接。

性能优化

React 提供了一些工具和方法来帮助优化应用性能。

优化渲染性能

• Pure Components：使用 React.PureComponent 或者 React.memo 可以帮助避免不必要的渲染。
• shouldComponentUpdate：对于类组件，可以重写 shouldComponentUpdate 方法来决定是否需要更新。
• 使用 Reconciliation Key：为列表中的元素提供唯一的 key 可以帮助 React 更高效地更新 DOM。

示例代码

import React, { memo } from 'react';

const ListItem = memo(function ListItem({ item }) {
  return <li>{item}</li>;
});

function List({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

在这个例子中，我们使用 React.memo 来包装 ListItem 组件，以避免在 props 没有改变时的重复渲染。

错误边界

错误边界是 React 中的一种概念，它可以捕获并处理发生在其子组件树任何位置的 JavaScript 错误。

示例代码

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 也可以记录错误到日志系统
    logErrorToMyService({ error, info });
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary>
      <div>
        <button onClick={() => { throw new Error('Oops!'); }}>Break it</button>
      </div>
    </ErrorBoundary>
  );
}

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

在这个例子中，我们定义了一个 ErrorBoundary 组件，它可以捕获并处理发生在其子组件树中的错误。

测试

测试是确保应用质量和可靠性的关键部分。React 应用可以使用多种工具来进行单元测试和集成测试。

使用 Jest 和 Enzyme 进行测试

// 文件: Button.js
import React from 'react';

const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

export default Button;

// 文件: Button.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

describe('<Button />', () => {
  it('renders without crashing', () => {
    shallow(<Button label="Click Me" />);
  });

  it('calls onClick when clicked', () => {
    const mockFn = jest.fn();
    const wrapper = shallow(<Button label="Click Me" onClick={mockFn} />);
    wrapper.find('button').simulate('click');
    expect(mockFn).toHaveBeenCalled();
  });
});

在这个例子中，我们使用 Enzyme 的 shallow 方法来模拟组件的渲染，并使用 Jest 的 simulate 方法来模拟点击事件，验证是否正确调用了 onClick 回调。

通过以上的介绍，你已经掌握了React的许多核心概念和最佳实践。在实际开发中，不断学习新的技术和工具，以及持续改进代码质量是非常重要的。React 社区一直在快速发展，因此保持学习的态度，跟上最新的趋势和技术，会让你的开发工作更加高效。