【前端】深入浅出的React.js详解

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。随着 React 的不断演进，官方文档也在不断更新和完善。本文将详细解读最新的 React 官方文档，涵盖核心概念、新特性、最佳实践等内容，帮助开发者更好地理解和使用 React。
在这里插入图片描述

1. React 核心概念
1.1 组件

组件是 React 应用的基本构建块。组件可以是类组件或函数组件，每个组件负责渲染一部分用户界面。

1.1.1 函数组件

函数组件是最简单的组件形式，接受输入（props）并返回 JSX。

function Welcome(props) {
  return 
Hello, {props.name}
;
}
  • 1
  • 2
  • 3
1.1.2 类组件

类组件是通过继承 React.Component 类来定义的，可以包含状态和生命周期方法。

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
1.2 JSX

JSX 是一种在 JavaScript 中编写类似 HTML 代码的语法扩展。React 使用 JSX 来描述 UI 的结构。

const element = 
Hello, world!
;
  • 1
1.3 Props

Props 是组件之间传递数据的方式。父组件通过 props 将数据传递给子组件。

function Welcome(props) {
  return 
Hello, {props.name}
;
}

const element = ;
  • 1
  • 2
  • 3
  • 4
  • 5
1.4 State

State 是组件内部的数据存储，用于跟踪组件的状态变化。状态的变化会触发组件的重新渲染。

1.4.1 类组件中的状态

在类组件中，状态通过 state 属性来管理。

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

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

  render() {
    return (
      

        
Count: {this.state.count}

        
      

    );
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
1.4.2 函数组件中的状态

在函数组件中，使用 useState 钩子来管理状态。

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    

      
Count: {count}

      
    

  );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
2. 新特性
2.1 Concurrent Mode

Concurrent Mode 是 React 的一个实验性功能，旨在提高应用的响应性和性能。Concurrent Mode 允许 React 在后台执行工作，并在必要时中断和恢复这些工作。

2.1.1 Suspense

Suspense 是 Concurrent Mode 的一个重要特性，用于处理异步数据加载。通过 Suspense 组件，可以在数据加载完成之前显示一个加载指示器。

import React, { Suspense } from 'react';
import { fetchData } from './api';

function DataFetcher() {
  const data = useDataLoader();

  return 
Data: {data}
;
}

function App() {
  return (
    Loading...
}>
      
    
  );
}

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

  useEffect(() => {
    fetchData().then(data => setData(data));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 1000));
  }

  return data;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
2.2 Hooks

Hooks 是 React 16.8 引入的新特性，允许在函数组件中使用状态和其他 React 特性。

2.2.1 useState

useState 钩子用于在函数组件中添加状态。

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    

      
Count: {count}

      
    

  );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
2.2.2 useEffect

useEffect 钩子用于在函数组件中执行副作用操作，如发起网络请求、设置定时器等。

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

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

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

  return (
    

      {data ? (
        
Data: {data}

      ) : (
        
Loading...

      )}
    

  );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
2.2.3 useContext

useContext 钩子用于在函数组件中使用 Context。

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

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return ;
}

function App() {
  return (
    
      
    
  );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
3. 生命周期方法

生命周期方法是类组件中的一系列方法，用于在组件的不同阶段执行特定的操作。函数组件中使用钩子来实现类似的功能。

3.1 类组件中的生命周期方法
3.1.1 componentDidMount

在组件挂载后立即调用，通常用于发起网络请求或设置定时器。

class DataFetcher extends React.Component {
  state = {
    data: null
  };

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      

        {this.state.data ? (
          
Data: {this.state.data}

        ) : (
          
Loading...

        )}
      

    );
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
3.1.2 componentDidUpdate

在组件更新后立即调用，可以用于比较新旧状态或属性，执行相应的操作。

class DataFetcher extends React.Component {
  state = {
    data: null,
    id: 1
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.id !== this.state.id) {
      fetch(`https://api.example.com/data/${this.state.id}`)
        .then(response => response.json())
        .then(data => this.setState({ data }));
    }
  }

  changeId = () => {
    this.setState(prevState => ({ id: prevState.id + 1 }));
  };

  render() {
    return (
      

        {this.state.data ? (
          
Data: {this.state.data}

        ) : (
          
Loading...

        )}
        
      

    );
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
3.1.3 componentWillUnmount

在组件卸载前调用，通常用于清理定时器或取消网络请求。

class Timer extends React.Component {
  state = {
    seconds: 0
  };

  interval = null;

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

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

  render() {
    return 
Seconds: {this.state.seconds}
;
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
3.2 函数组件中的生命周期方法
3.2.1 useEffect

useEffect 钩子用于在函数组件中执行副作用操作，如发起网络请求、设置定时器等。

3.2.1.1 模拟 componentDidMount

在组件挂载后执行操作：

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空数组表示只在组件挂载时执行一次

  return (
    

      {data ? (
        
Data: {data}

      ) : (
        
Loading...

      )}
    

  );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
3.2.1.2 模拟 componentDidUpdate

在组件更新后执行操作：

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [id, setId] = useState(1);

  useEffect(() => {
    fetch(`https://api.example.com/data/${id}`)
      .then(response => response.json())
      .then(data => setData(data));
  }, [id]); // 依赖数组包含 id，表示当 id 变化时重新执行

  const changeId = () => {
    setId(id + 1);
  };

  return (
    

      {data ? (
        
Data: {data}

      ) : (
        
Loading...

      )}
      
    

  );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
3.2.1.3 模拟 componentWillUnmount

在组件卸载前执行清理操作：

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval); // 清理定时器
  }, []); // 空数组表示只在组件挂载时执行一次

  return 
Seconds: {seconds}
;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
4. 最佳实践
4.1 代码分割和懒加载

通过代码分割和懒加载，可以优化应用的初始加载时间和性能。

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function App() {
  return (
    

      Loading...
}>
); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
4.2 避免不必要的渲染

通过 React.memo 和 PureComponent，可以避免不必要的组件重新渲染。

4.2.1 React.memo

React.memo 是一个高阶组件，用于优化函数组件的性能。

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  /* 只在 props 发生变化时重新渲染 */
  return 
{props.value}
;
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
4.2.2 PureComponent

PureComponent 是一个基类，用于优化类组件的性能。

import React from 'react';

class MyComponent extends React.PureComponent {
  render() {
    /* 只在 props 或 state 发生变化时重新渲染 */
    return 
{this.props.value}
;
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
4.3 使用 useMemo 和 useCallback

useMemo 和 useCallback 钩子可以用于优化性能，避免不必要的计算和函数创建。

4.3.1 useMemo

useMemo 用于缓存计算结果，避免不必要的计算。

import React, { useMemo } from 'react';

function MyComponent({ list }) {
  const sortedList = useMemo(() => list.sort(), [list]);

  return 
{sortedList.join(', ')}
;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
4.3.2 useCallback

useCallback 用于缓存函数，避免不必要的函数创建。

import React, { useCallback } from 'react';

function MyComponent({ onIncrement }) {
  const handleIncrement = useCallback(() => {
    onIncrement();
  }, [onIncrement]);

  return ;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
4.4 错误边界

错误边界是一种 React 组件，可以捕获并处理其子组件树中抛出的 JavaScript 错误。

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return 
Something went wrong.
;
    }

    return this.props.children;
  }
}

function App() {
  return (
    
      
    
  );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
5. 示例代码

以下是一些综合示例，展示了如何在 React 中使用不同的特性和最佳实践。

5.1 类组件示例
class DataFetcher extends React.Component {
  state = {
    data: null,
    id: 1
  };

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.id !== this.state.id) {
      this.fetchData();
    }
  }

  componentWillUnmount() {
    this.abortController.abort();
  }

  fetchData = () => {
    this.abortController = new AbortController();
    fetch(`https://api.example.com/data/${this.state.id}`, { signal: this.abortController.signal })
      .then(response => response.json())
      .then(data => this.setState({ data }))
      .catch(error => console.error('Fetch error:', error));
  };

  changeId = () => {
    this.setState(prevState => ({ id: prevState.id + 1 }));
  };

  render() {
    return (
      

        {this.state.data ? (
          
Data: {this.state.data}

        ) : (
          
Loading...

        )}
        
      

    );
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
5.2 函数组件示例
import React, { useState, useEffect, useCallback } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [id, setId] = useState(1);

  useEffect(() => {
    const abortController = new AbortController();

    fetch(`https://api.example.com/data/${id}`, { signal: abortController.signal })
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Fetch error:', error));

    return () => abortController.abort(); // 清理请求
  }, [id]);

  const changeId = useCallback(() => {
    setId(id + 1);
  }, [id]);

  return (
    

      {data ? (
        
Data: {data}

      ) : (
        
Loading...

      )}
      
    

  );
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
6. 总结

React 是一个强大的库，用于构建用户界面。通过理解核心概念、新特性和最佳实践，开发者可以更高效地使用 React 构建高性能和响应式的应用。本文详细解读了最新的 React 官方文档，涵盖了组件、JSX、Props、State、生命周期方法、Hooks、Concurrent Mode 等内容，并提供了示例代码和最佳实践。

附录

注：本文转载自blog.csdn.net的奔跑草-的文章"https://blog.csdn.net/u010690311/article/details/143711206"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！