likes
comments
collection
share

跟ChatGPT学JS：第九节课-React

作者站长头像
站长
· 阅读数 57

接下来继续展开讲第九节课的详细内容，按照大纲里面第九节课中的详细知识点，添加详细的内容，包括知识点详细讲解和代码例子，最后留两道课后练习。记得第九节课的主题是React。

好的，下面就开始讲解第九节课的内容，主题是React。

React 简介

React 是 Facebook 推出的一个用于构建用户界面的 JavaScript 库，它被设计用来构建大型、高性能的 Web 应用程序。React 通过组件化的方式来实现页面的构建，使得开发者可以将页面划分为多个独立的组件，并对每个组件进行单独的开发、调试和测试，从而提高开发效率。

React 有以下几个主要的特点：

  • 组件化开发：React 基于组件化的开发模式，使得开发者可以将页面拆分成多个独立的组件，提高代码的可维护性和可重用性。
  • 虚拟 DOM：React 使用虚拟 DOM 技术，将页面上的每个组件抽象成一个虚拟 DOM 节点，并在组件状态变化时，通过比较前后两个虚拟 DOM 树的差异，仅仅更新需要更新的部分，提高页面的性能。
  • 单向数据流：React 实现了单向数据流，即数据只能从父组件向子组件流动，子组件不能直接修改父组件传递过来的数据，这种数据流动的方式使得数据的流动变得清晰明了，方便调试和维护。
  • 函数式编程：React 推崇函数式编程的思想，即将应用程序看成是一系列输入和输出的函数组成的，使得代码更加简洁、模块化和可测试。

接下来我们会继续探讨 React 的几个主要概念：组件、JSX、状态和 props，以及如何使用 React 创建一个基本的组件。

组件

在 React 中，一切都是组件。组件是 React 应用程序的基本构建块，通过组件，我们可以将用户界面划分为小的、可重复使用的部分。

组件可以是类组件或函数组件。类组件是 ES6 类，必须继承 React.Component，并且必须实现 render 方法。函数组件是接受 props 并返回 React 元素的函数。

在组件中，可以定义 state 和 props。props 是不可变的，它们是从父组件传递给子组件的。state 是可变的，用于在组件内部保存和更新数据。

下面是一个简单的函数组件示例：

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

JSX

JSX 是一种语法扩展，允许我们在 JavaScript 代码中编写类似 HTML 的代码。在 JSX 中，我们可以将 HTML 标记和 React 组件组合在一起，以构建用户界面。

JSX 表达式必须包含在花括号 {} 中。在 JSX 中，我们可以使用 JavaScript 中的任何表达式。

下面是一个简单的 JSX 示例：

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

状态和 Props

状态和 Props 是 React 组件的两个主要概念。状态用于保存组件内部的数据，并在组件生命周期中进行更新。Props 是从父组件传递给子组件的属性，它们是不可变的。

状态可以使用 setState 方法进行更新。当状态更新时，React 将重新渲染组件。

下面是一个简单的状态和 Props 示例：

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "Mary" };
  }

  render() {
    return <h1>Hello, {this.props.title} {this.state.name}!</h1>;
  }
}

创建一个基本的组件

接下来，我们将使用 React 创建一个简单的组件。我们将创建一个带有计数器的按钮。每次单击按钮时，计数器都会增加。

首先，我们需要安装 React：

npm install react react-dom

然后，我们可以创建一个名为 Button 的组件：

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

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

  render() {
    const { count } = this.state;
    const { label } = this.props;

    return (
      <button onClick={this.handleClick}>
        {label} clicked: {count} times
      </button>
    );
  }
}

在这个组件中，我们使用了类组件和状态。我们在 constructor 方法中初始化了状态对象，用来保存按钮被点击的次数。在 handleClick 方法中，我们使用了 setState 方法来更新状态对象，同时触发重新渲染组件。在 render 方法中，我们读取状态对象和 props，根据它们来渲染出按钮的标签和显示的文本。

总的来说，React 采用了组件化的编程模型，开发者可以将整个应用拆分为多个小的组件，以简化应用的复杂度和提高可维护性。通过状态和属性的控制，React 让组件具有可组合性和可复用性，开发者只需要关注组件自身的实现，而不用考虑整个应用的复杂性。

内容有点少，继续探讨 React 的更多特性和应用场景。

此外，React 还有很多其他的特性和应用场景。以下是一些常见的：

  • 组件生命周期：React 组件有生命周期，可以通过这些生命周期钩子函数来执行不同的操作。常见的生命周期函数有 componentDidMount、componentDidUpdate 和 componentWillUnmount，分别在组件被挂载、更新和卸载时执行。
  • 组件通信：在 React 中，组件之间可以通过 props 和 state 来进行通信。父组件可以通过 props 将数据传递给子组件，子组件可以通过回调函数将数据传递回父组件。如果需要在非父子组件之间进行通信，可以使用一些第三方库，如 Redux 或 React Context。
  • 高阶组件：高阶组件是一个函数，它接受一个组件作为参数并返回一个新的组件。高阶组件可以用来增强组件的功能，比如添加共同的逻辑或样式。
  • 服务端渲染：React 可以在服务端进行渲染，这样可以提高首次加载页面的速度，同时也可以使搜索引擎更容易地索引页面内容。
  • 移动应用开发：React Native 是一个基于 React 的框架，可以用来开发移动应用。使用 React Native，可以用 JavaScript 来开发 iOS 和 Android 应用，并实现原生应用的性能和体验。

除此之外，React 还有很多其他的特性和应用场景。熟练掌握 React，可以帮助开发人员更快、更高效地构建现代 Web 应用和移动应用。

再说一下React Hooks吧

React Hooks

React Hooks是React 16.8版本推出的一项新特性，它使得函数组件也可以拥有类组件的状态和生命周期等特性。使用Hooks可以让函数组件更加灵活和易于复用。

常用的React Hooks包括useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef等等。这些Hooks可以用来实现状态管理、副作用处理、事件处理、性能优化等功能。

例如，useState Hook可以用来在函数组件中添加状态。它接受一个初始值，并返回一个数组，其中第一个元素是当前状态值，第二个元素是更新状态值的函数。例如：

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

这个组件中使用了useState Hook来添加一个计数器的状态，当用户点击按钮时，更新计数器的值。

另一个常用的Hook是useEffect。它可以让我们在函数组件中执行副作用操作，例如从服务器获取数据、订阅事件等。useEffect的第一个参数是一个回调函数，用来执行副作用操作，第二个参数是一个数组，用来指定哪些变量发生变化时需要重新执行副作用操作。例如：

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

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

  useEffect(() => {
    // 在组件挂载和每次更新时都会执行这个函数
    document.title = `You clicked ${count} times`;
  }, [count]); // 仅在count发生变化时才会执行副作用操作

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

这个组件中使用了useEffect Hook来在每次更新时更新页面的标题，第二个参数是一个数组，指定只有在count发生变化时才会重新执行副作用操作。

React Hooks是React的一个重要特性，它可以让我们更加方便地在函数组件中使用状态和副作用操作等功能。熟练掌握React Hooks可以让我们写出更加优雅、灵活、易于维护的代码。

下面是两道课后练习题：

  1. 创建一个 React 应用，实现一个可以添加和删除待办事项的应用。该应用应包括一个表单输入框和一个待办事项列表，用户可以在输入框中输入待办事项并通过提交按钮添加到列表中，也可以在列表中删除已添加的待办事项。需要使用 React 的状态和生命周期函数来实现。
  2. 在一个 React 应用中，使用 Context 来实现一个主题切换功能。该应用应包括一个主题切换按钮，点击按钮后可以将应用的主题切换为黑色或白色。需要使用 React Context 来实现主题切换的全局状态。
转载自:https://juejin.cn/post/7202075598322696229
评论
请登录