说一说React与脚手架

Leo的前端之路

已于 2024-08-29 01:31:19 修改

阅读量1k

点赞数 29

分类专栏：前端学习 React 文章标签： react.js 前端前端框架

于 2024-08-29 01:28:26 首次发布

本文链接：https://blog.youkuaiyun.com/ljx11606/article/details/141649853

版权

前端学习同时被 2 个专栏收录

9 篇文章

订阅专栏

React

2 篇文章

订阅专栏

一、React主要做什么

React 是一个用于构建用户界面（UI）的 JavaScript 库，用户界面(UI)是由按钮、文本和图像等小单元内容构建而成，如果用表示函数的符号 f(x) 来表示React，可以用以下表达式来描述React与用户界面的关系：

组件化的开发思路：提供完整的组件规范，然后借助组件快速的搭出一个页面
数据驱动视图：开发者无需再频繁操作页面上的每个节点，而是通过定义数据模型来驱动整个页面视图
高效的渲染效率：以Fiber对象为核心，一个Element节点在React看来，就是一个Fiber对象，所有的状态都存储在Fiber对象中，通过复杂的计算后，结果输出到View视图上呈现，既符合了数据驱动视图的理念，又引入了异步渲染的机制，提高了浏览器的渲染性能。

二、React的基本概念

1. 组件

定义
- 组件是 React 应用的基本构建块。它将用户界面拆分成独立的、可复用的部分。
- 可以使用函数或类来定义组件。函数组件是使用 JavaScript 函数定义的组件，而类组件是使用 ES6 类定义的组件。

     function MyComponent(props) {
       return <div>{props.message}</div>;
     }

结构
- 组件可以接收输入属性（props）并返回一个 React 元素，描述组件的用户界面。
- 例如，一个简单React组件可能如下所示：

     class MyComponent extends React.Component {
       render() {
         return <div>{this.props.message}</div>;
       }
     }

2. JSX写法

简介
- JSX（JavaScript XML）是一种 JavaScript 的语法扩展，主要用于在 React 框架中描述用户界面。
- JSX 看起来非常像 HTML 或 XML，但实际上它是在 JavaScript 代码中使用的一种语法，允许开发者在 JavaScript 代码中直接编写 HTML 标签，使代码更加直观和易于理解。

     import React from 'react';

     function HelloWorld() {
       const message = 'Hello, React with JSX!';
       return (
         <div>
           <p>{message}</p>
           <button>Click me</button>
         </div>
       );
     }

     export default HelloWorld;

语法
- JSX 元素由开始标签、结束标签和它们之间的内容组成。
- JSX 元素可以包含子元素和属性，就像普通的 HTML 标签一样。例如：<div><p>Some text</p><span>Another element</span></div>。
- JSX 可以直接嵌入 JavaScript 表达式，动态地生成内容和设置属性。例如：<div>{variable}</div>，这里的{variable}会被替换为 JavaScript 变量variable的值。
- JSX 可以调用函数、进行条件判断、循环等操作。
- 例如：

     const items = [1, 2, 3];
     return (
       <ul>
         {items.map(item => <li key={item}>{item}</li>)}
       </ul>
     );

3. 状态（State）

定义
- 状态是组件内部的数据，可以被修改。状态的变化会触发组件的重新渲染。
- 类组件可以通过定义 state 对象来管理状态，函数组件可以使用 React 的 useState 钩子来管理状态。
使用状态
- 在组件中，可以通过 this.state（类组件）或 state（函数组件）来访问状态的值。
- 可以使用 this.setState（类组件）或 setState（函数组件）来更新状态的值。
- 例如：

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

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

       render() {
         return (
           <div>
             <p>Count: {this.state.count}</p>
             <button onClick={this.incrementCount}>Increment</button>
           </div>
         );
       }
     }

4. 属性（Props）

定义
- 属性是从父组件传递给子组件的数据，通常是只读的。
- 属性可以是任何类型的数据，包括字符串、数字、对象、数组等。
父子组件通信
- 在父组件中，可以通过标签的属性来传递属性给子组件。
- 子组件不能直接修改接收到的属性。如果需要修改数据，应该通过父组件传递一个回调函数，让父组件来处理数据的修改。
- 例如：父组件ParentComponent向子组件ChildComponent传递了两个 props：onButtonClick（一个回调函数）和message（一个字符串）。子组件在按钮被点击时，调用父组件传递过来的回调函数，并传递一些数据给父组件，父组件中的回调函数接收子组件传来的数据并进行处理。

// 父组件ParentComponent
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleChildButtonClick = (dataFromChild) => {
    console.log('Data received from child:', dataFromChild);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent onButtonClick={handleChildButtonClick} message="Message from parent" />
    </div>
  );
}

export default ParentComponent;

// 子组件ChildComponent
import React from 'react';

function ChildComponent(props) {
  const handleButtonClick = () => {
    props.onButtonClick('Data sent from child');
  };

  return (
    <div>
      <h2>Child Component</h2>
      <p>{props.message}</p>
      <button onClick={handleButtonClick}>Send data to parent</button>
    </div>
  );
}

export default ChildComponent;

5、生命周期方法

类组件的生命周期方法
- 对于类组件，React 提供了一系列的生命周期方法，这些方法在组件的不同阶段被调用。
- constructor()：组件被创建时首先被调用的方法，通常在这个方法中初始化组件的状态和绑定事件处理函数。
- render()：render方法是必须调用的，用于返回一个 React 元素，描述组件的用户界面。
- componentDidMount()：当组件被挂载到 DOM 后被调用，在这里可以进行一些副作用操作，如发起数据请求、设置定时器等。
- shouldComponentUpdate(nextProps, nextState)：当组件接收到新的属性或状态时被调用，它返回一个布尔值，决定组件是否应该重新渲染，如果返回 false，则组件不会重新渲染。
- componentDidUpdate(prevProps, prevState, snapshot)：当在组件更新后被调用，可以在这里进行一些副作用操作，如更新 DOM、发起数据请求等。
- componentWillUnmount()：当组件被卸载之前被调用，可以在这里进行一些清理操作，如清除定时器、取消订阅等。

函数组件与hooks
- 在 React 16.8 之前，函数组件被称为无状态组件，主要用于展示，不能使用状态（state）和生命周期方法。
- React hooks是React 16.8的新增特性，支持了在不编写class的情况下使用state以及其他的副作用钩子。
- useState：用于在函数组件中添加状态，它返回一个包含当前状态值和更新状态值的函数的数组。
- useEffect：用于处理副作用操作，如数据获取、订阅事件、手动修改 DOM 等，可以在组件挂载、更新和卸载时执行特定的副作用操作。
- useContext：用于在函数组件中访问 React 的上下文（Context），允许在组件树中共享数据，而无需通过层层传递 props。
- useReducer：用于处理复杂的状态管理逻辑，类似于 Redux 的 reducer 函数，接受一个 reducer 函数和初始状态作为参数，返回当前状态和一个 dispatch 函数，用于触发状态更新。
- useCallback：用于缓存函数，避免在每次渲染时都重新创建函数，当函数作为 props 传递给子组件时，如果子组件使用了`React.memo`进行优化，`useCallback`可以避免不必要的子组件重新渲染。
- useMemo：用于缓存计算结果，避免在每次渲染时都进行重复计算，当计算结果作为 props 传递给子组件时，如果子组件使用了React.memo进行优化，useMemo可以避免不必要的子组件重新渲染。

三、Create React App

Create React App 是一个由 Facebook 官方推出的快速搭建 React 开发环境的脚手架工具，当使用 Create React App 创建项目时，它会自动配置好 React 所需的开发环境，包括引入 React 库本身以及 React DOM（用于将 React 组件渲染到浏览器中）等必要的依赖。

1. 安装必要的node和npm

需要保证已安装node.js和npm，推荐18或以上。
推荐使用pnpm作为react应用的包管理器，需要安装的node版本在18或以上。

# 验证 node 是否安装成功
node -v
# 全局安装包管理器pnpm
npm i pnpm -g --register=https://registry.npmmirror.com/
# 验证 pnpm 是否安装成功
pnpm -v

2. 创建React应用

npx create-react-app my-react-app

安装成功后，命令行显示如下：

3. 运行项目

pnpm run start

运行成功后，命令行显示如下：

4. 访问项目地址

由于 Create React App 是由 Facebook 维护的，它通常会与 React 的更新保持同步。这意味着当 React 推出新的功能或改进时，Create React App 也会相应地进行调整和优化，以确保开发者能够充分利用 React 的最新特性，总之，React 是核心的 UI 库，而 Create React App 是一个方便快捷的开发工具，帮助开发者更轻松地构建 React 应用。它们相互配合，为前端开发提供了强大的支持。