首页手记 React高级知识入门教程

React高级知识入门教程

标签：

React.JS React React Native

概述

本文深入探讨了React高级知识，包括生命周期方法、Hooks的使用、Context API的应用以及性能优化技巧。此外，还介绍了与服务器通信的方法和代码规范的最佳实践。通过这些内容，开发者可以更好地理解和运用React的高级特性。React高级知识涵盖了从基础到复杂应用的各个方面。

React生命周期方法详解

React 组件的生命周期可以分为三个主要阶段：mounting（挂载）、updating（更新）和unmounting（卸载）。React 16.3 版本引入了生命周期方法的变更，部分方法被标记为废弃，并引入了新的生命周期方法。本节将详细介绍这些生命周期方法。

生命周期方法详解

React 组件中包含多个生命周期方法，这些方法允许开发者在组件的不同阶段执行特定的操作。

constructor(props)：
- 构造函数，用于初始化状态和绑定方法。是组件生命周期的第一个方法。
- 示例代码：
```
class MyComponent extends React.Component {
   constructor(props) {
       super(props);
       this.state = { count: 0 };
   }
}
```
static getDerivedStateFromProps(props, state)：
- React 16.3 引入，用于在首次渲染和后续更新时更新状态。
- 示例代码：
```
static getDerivedStateFromProps(props, state) {
   // 返回新的状态
   return { count: props.count };
}
```
render()：
- 返回表示组件内容的 JSX 标签。
- 示例代码：
```
render() {
   return <div>Count: {this.state.count}</div>;
}
```

componentDidMount()：

组件挂载后执行的操作。
示例代码：

componentDidMount() {
   // 发起网络请求
   fetch('/data')
       .then(response => response.json())
       .then(data => this.setState({ data }));
}

shouldComponentUpdate(nextProps, nextState)：
- 判断组件是否需要重新渲染。
- 示例代码：
```
shouldComponentUpdate(nextProps, nextState) {
   return nextState.count !== this.state.count;
}
```

getSnapshotBeforeUpdate(prevProps, prevState)：

React 16.3 引入，用于获取组件更新前的状态快照。
示例代码：

getSnapshotBeforeUpdate(prevProps, prevState) {
   // 获取更新前的状态快照
   return { prevCount: prevState.count };
}

componentDidUpdate(prevProps, prevState, snapshot)：

组件更新后执行的操作。
示例代码：

componentDidUpdate(prevProps, prevState, snapshot) {
   // 执行更新后的操作
   console.log(`Prev count: ${prevState.count}`);
   console.log(`Snapshot: ${snapshot}`);
}

componentWillUnmount()：

组件卸载前执行的操作。
示例代码：

componentWillUnmount() {
   // 清理定时器
   clearInterval(this.intervalId);
}

生命周期方法的变更

React 16.3 引入了一些生命周期方法的变更，标记了一些方法为废弃。

废弃方法：
- componentWillMount() 和 componentWillReceiveProps() 被标记为废弃。
- componentWillUpdate() 被标记为废弃。
替代方法：
- componentWillMount() 被 static getDerivedStateFromProps() 或 constructor() 替代。
- componentWillReceiveProps() 被 static getDerivedStateFromProps() 替代。
- componentWillUpdate() 被 getSnapshotBeforeUpdate() 和 componentDidUpdate() 替代。

实例：使用生命周期方法

假设我们有一个计数器组件，需要在初始化时从服务器获取数据，更新时进行数据处理。

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

    componentDidMount() {
        fetch('/data')
            .then(response => response.json())
            .then(data => this.setState({ data }));
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.count !== this.state.count) {
            console.log('Count updated');
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return nextState.count !== this.state.count;
    }

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <p>Data: {this.state.data ? JSON.stringify(this.state.data) : 'Loading...'}</p>
            </div>
        );
    }
}

React Hooks的高级使用

React Hooks 是 React 16.8 版本引入的一种新特性，使得在不编写类组件的情况下使用状态和其他 React 特性成为可能。本节将介绍 React Hooks 的高级使用。

Hooks 基本介绍

React Hooks 允许你在不编写类的情况下使用状态或其他 React 特性。以下是一些常用的 Hooks：

useState()
useEffect()
useContext()
useReducer()
useMemo()
useCallback()
useRef()

useState

useState 是 React 中最常用的 Hooks 之一，用于在函数组件中使用状态。

定义状态：
- const [state, setState] = useState(initialState);
初始状态：
- initialState 可以是一个值或对象。
更新状态：
- setState 是一个函数，用于更新状态。
示例代码：

import React, { useState } from 'react';

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

    function handleClick() {
        setCount(count + 1);
    }

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={handleClick}>Click me</button>
        </div>
    );
}

useEffect

useEffect 是一个非常强大的 Hooks，用于执行副作用操作，如网络请求、订阅等。

定义副作用：
- useEffect(() => { /* 代码 */ }, [dependencies]);
依赖项：
- dependencies 是副作用依赖项，只有当依赖项变化时，副作用才会执行。
清理函数：
- useEffect 返回一个清理函数，用于清理副作用。
示例代码：

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

function FetchData() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return (
        <div>
            {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
        </div>
    );
}

useContext

useContext 用于访问上下文值，适用于需要在多个组件之间共享的状态或配置。

定义上下文：
- const MyContext = React.createContext(defaultValue);
使用上下文：
- const value = useContext(MyContext);
示例代码：

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

const ThemeContext = React.createContext('light');

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return (
        <button style={{ background: theme }}>
            I am styled by theme context
        </button>
    );
}

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

    return (
        <ThemeContext.Provider value={theme}>
            <button onClick={() => setTheme('dark')}>Dark</button>
            <button onClick={() => setTheme('light')}>Light</button>
            <ThemedButton />
        </ThemeContext.Provider>
    );
}

useReducer

useReducer 用于管理组件状态，特别适用于状态逻辑复杂时。

定义 reducer：
- const [state, dispatch] = useReducer(reducer, initialState);
reducer 函数：
- reducer 是一个函数，用于处理 state 更新逻辑。
示例代码：

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
        </div>
    );
}

useMemo 和 useCallback

useMemo 和 useCallback 用于优化性能，避免不必要的计算。

useMemo：
- const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useCallback：
- const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
示例代码：

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

function ExpensiveComponent({ a, b }) {
    const expensiveValue = useMemo(() => a + b, [a, b]);
    const memoizedCallback = useCallback(() => console.log('Callback called'), [a, b]);

    return (
        <div>
            <p>Expensive value: {expensiveValue}</p>
            <button onClick={memoizedCallback}>Log</button>
        </div>
    );
}

function App() {
    const [a, setA] = React.useState(0);
    const [b, setB] = React.useState(0);

    return (
        <div>
            <input type="number" value={a} onChange={e => setA(Number(e.target.value))} />
            <input type="number" value={b} onChange={e => setB(Number(e.target.value))} />
            <ExpensiveComponent a={a} b={b} />
        </div>
    );
}

useRef

useRef 用于访问 DOM 节点或保存可变值。

定义引用：
- const ref = useRef(initialValue);
示例代码：

import React, { useRef } from 'react';

function TextInput() {
    const inputRef = useRef(null);

    const focusInput = () => {
        inputRef.current.focus();
    };

    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={focusInput}>Focus Input</button>
        </div>
    );
}

实例：使用 Hooks 组件

假设我们有一个计数器组件，需要在初始化时从服务器获取数据，更新时进行数据处理。

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

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

    useEffect(() => {
        fetch('/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    useEffect(() => {
        console.log('Count updated');
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <p>Data: {data ? JSON.stringify(data, null, 2) : 'Loading...'}</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

React性能优化技巧

React 组件的性能优化是开发中非常重要的一部分，合理的优化可以大大提高应用的加载速度和用户体验。本节将介绍一些常用的 React 性能优化技巧。

性能优化基础

React 性能优化涉及组件渲染、状态管理、CSS 优化等多个方面。以下是一些常用的优化技巧。

减少不必要的渲染：
- 使用 shouldComponentUpdate() 避免不必要的渲染。
- 使用 React.memo 或 PureComponent 避免不必要的渲染。
状态管理：
- 使用 useMemo 和 useCallback 优化状态管理。
- 使用 useReducer 优化复杂状态逻辑。
CSS 优化：
- 使用 CSS-in-JS 或 CSS Modules 优化样式。
- 合理使用 CSS 选择器和属性。

减少不必要的渲染

React 的默认行为是每次更新都会重新渲染组件，这可能会导致不必要的渲染。可以通过以下方法减少不必要的渲染。

shouldComponentUpdate()：
- 用于在组件更新时判断是否需要重新渲染。
- 示例代码：

class MyComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return nextState.count !== this.state.count;
    }
}

React.memo：
- 高阶组件，用于优化函数组件的渲染。
- 示例代码：

import React, { memo } from 'react';

function MyComponent({ count }) {
    console.log('MyComponent rendered');
    return <div>Count: {count}</div>;
}

const MyComponentMemo = memo(MyComponent);

function App() {
    const [count, setCount] = React.useState(0);
    return (
        <div>
            <MyComponentMemo count={count} />
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

状态管理

状态管理是 React 组件中常见的优化点，可以通过以下方法优化状态管理。

useMemo：
- 使用 useMemo 优化计算昂贵的操作。
- 示例代码：

import React, { useMemo } from 'react';

function ExpensiveComponent({ a, b }) {
    const expensiveValue = useMemo(() => a + b, [a, b]);
    return <p>Expensive value: {expensiveValue}</p>;
}

function App() {
    const [a, setA] = React.useState(0);
    const [b, setB] = React.useState(0);

    return (
        <div>
            <input type="number" value={a} onChange={e => setA(Number(e.target.value))} />
            <input type="number" value={b} onChange={e => setB(Number(e.target.value))} />
            <ExpensiveComponent a={a} b={b} />
        </div>
    );
}

useCallback：
- 使用 useCallback 优化回调函数。
- 示例代码：

import React, { useCallback } from 'react';

function ExpensiveComponent({ callback }) {
    const memoizedCallback = useCallback(() => console.log(callback), [callback]);
    return <button onClick={memoizedCallback}>Log callback</button>;
}

function App() {
    const [callback, setCallback] = React.useState(() => 0);

    const memoizedCallback = useCallback(() => console.log(callback), [callback]);

    return (
        <div>
            <ExpensiveComponent callback={memoizedCallback} />
            <button onClick={() => setCallback(() => setCallback((prev) => prev + 1))}>Update callback</button>
        </div>
    );
}

CSS 优化

合理使用 CSS 可以提高应用的渲染性能，以下是一些 CSS 优化技巧。

CSS-in-JS：
- 使用 CSS-in-JS 库，如 styled-components 或 emotion，可以避免 CSS 文件的引入和编译。
- 示例代码：

import styled from 'styled-components';

const Button = styled.button`
    background: #ff6b6b;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    &:hover {
        background: #ff3b3b;
    }
`;

function MyComponent() {
    return <Button>Click me</Button>;
}

CSS Modules：
- 使用 CSS Modules 可以避免全局样式冲突。
- 示例代码：

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

function MyComponent() {
    return <button className={styles.button}>Click me</button>;
}

实例：性能优化示例

假设我们有一个计数器组件，需要在初始化时从服务器获取数据，更新时进行数据处理。

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

function ExpensiveComponent({ count }) {
    const expensiveValue = useMemo(() => count * 2, [count]);
    const memoizedCallback = useCallback(() => console.log(count), [count]);
    return (
        <div>
            <p>Expensive value: {expensiveValue}</p>
            <button onClick={memoizedCallback}>Log count</button>
        </div>
    );
}

function App() {
    const [count, setCount] = React.useState(0);
    const [data, setData] = React.useState(null);

    useEffect(() => {
        fetch('/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    useEffect(() => {
        console.log('Count updated');
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <p>Data: {data ? JSON.stringify(data, null, 2) : 'Loading...'}</p>
            <ExpensiveComponent count={count} />
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

React与服务器通信

在开发 React 应用时，经常需要与服务器通信以获取和发送数据。本节将介绍如何使用 fetch API 和 Axios 进行与服务器的通信。

使用 fetch API

fetch 是浏览器内置的用于发送网络请求的方法，支持 Promise API，可以方便地处理异步请求。

基本用法：
- fetch(url, options) 发送一个请求。
- options 可选参数，用于设置请求头、方法等。
示例代码：

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

function FetchData() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('/api/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return (
        <div>
            {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
        </div>
    );
}

使用 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。Axios 支持请求拦截、响应拦截等高级功能。

安装 Axios：
- npm install axios
基本用法：
- axios.get(url) 发送 GET 请求。
- axios.post(url, data) 发送 POST 请求。
示例代码：

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

function FetchData() {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('/api/data')
            .then(response => setData(response.data))
            .catch(error => console.error(error));
    }, []);

    return (
        <div>
            {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
        </div>
    );
}

实例：与服务器通信示例

假设我们有一个应用，需要从服务器获取数据并显示在页面上。

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

function FetchData() {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('/api/data')
            .then(response => setData(response.data))
            .catch(error => console.error(error));
    }, []);

    return (
        <div>
            {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
        </div>
    );
}

function App() {
    return (
        <div>
            <FetchData />
        </div>
    );
}

React项目中的代码规范与最佳实践

在开发 React 项目时，遵循一定的代码规范和最佳实践有助于提高代码质量，降低维护成本。本节将介绍一些常用的代码规范和最佳实践。

代码规范

代码规范是保证代码质量的重要手段，有助于团队协作和代码的可维护性。以下是一些常用的代码规范。

命名规范：
- 组件名称首字母大写，例如 MyComponent。
- 类名首字母大写，例如 MyClass。
- 函数名和变量名小写，例如 myFunction。
文件命名：
- 文件名小写，例如 my-component.js。
导入导出：
- import 语句按顺序排列，例如 import React from 'react';。
- export 语句按顺序排列，例如 export default MyComponent;。
代码格式化：
- 使用 ESLint 进行代码格式化和检测。

代码组织

良好的代码组织有助于提高代码的可读性和可维护性。以下是一些常用的代码组织方法。

组件分层：
- 将组件按功能分层，例如 components/, containers/, hoc/。
组件命名：
- 按功能命名，例如 Header, Navbar, ProductList。
状态管理：
- 使用 Redux 或 MobX 管理全局状态。

代码重构

代码重构是保持代码质量的重要手段，以下是一些常用的代码重构方法。

DRY 原则：
- 避免重复代码，使用高阶组件或自定义 Hooks 。
组件拆分：
- 将复杂组件拆分为多个小组件。
状态管理优化：
- 使用 useReducer 管理复杂状态逻辑。

实例：代码规范与最佳实践示例

假设我们有一个应用，需要从服务器获取数据并显示在页面上。

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

// 组件
function DataFetcher() {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('/api/data')
            .then(response => setData(response.data))
            .catch(error => console.error(error));
    }, []);

    return (
        <div>
            {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
        </div>
    );
}

function App() {
    return (
        <div>
            <DataFetcher />
        </div>
    );
}

export default App;

总结

React 的高级知识涉及多个方面，包括生命周期、Hooks、Context API、性能优化等。通过遵循代码规范和最佳实践，可以提高代码质量和开发效率。希望这些内容能够帮助你更好地理解和使用 React。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

喵喵时光机

手记
篇

粉丝

9

获赞与收藏

108

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31416 348

网络编程入门教程

20个小节 12873 242

Pandas 入门教程

25个小节 18755 351

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

React高级知识入门教程

生命周期方法详解

生命周期方法的变更

实例：使用生命周期方法

Hooks 基本介绍

useState

useEffect

useContext

useReducer

useMemo 和 useCallback

useRef

实例：使用 Hooks 组件

性能优化基础

减少不必要的渲染

状态管理

CSS 优化

实例：性能优化示例

使用 fetch API

使用 Axios

实例：与服务器通信示例

代码规范

代码组织

代码重构

实例：代码规范与最佳实践示例

总结

阅读免费教程