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 社区一直在快速发展，因此保持学习的态度，跟上最新的趋势和技术，会让你的开发工作更加高效。