速通React！第一章！

知否技术
450 阅读7分钟

1. 邂逅 React

React 是一个用于构建用户界面的开源 JavaScript 库，它由 Facebook 开发维护。

React 的主要目标是帮助开发者以更高效、更简洁的方式构建复杂的网页应用。

说白了就是一个用来开发前端应用的框架。

这时候你可能纳闷了，现在不都是流行 Vue 框架吗？为什么还要学习 React 框架？

回答：为了挣更多的钱。

如果你在二三线城市，或者在一些小公司，Vue 框架足够用，但是公司给你的工资不是特别高。

在 IT 行业，想要拿高薪资，大部人基本都会去一线城市，例如北上广深杭。

一线城市高薪资的前端职位要求都比较高，其中 React 是必须要掌握的。

如果你出身平凡，如果你想多挣点钱，学就完事了！

React 中文网地址：

https://zh-hans.react.dev/

接下来我会用通俗易懂的语言一步一步教会你使用 React。

2. 创建 React 项目

2.1 创建并启动项目

我们学习前端框架的目的是去开发一个项目，所以我建议直接在脚手架搭建好的 React 项目上去学习 React。

前端脚手架：

就像盖房子用的脚手架工具一样，在前端开发中，前端脚手架工具能够帮助你快速搭建起一个项目的基础结构，让你能够专注于开发具体的功能，而不是从零开始搭建整个项目。

React 官方建议的脚手架工具是 create-react-app

  • 开发工具：vscode

  • 所需环境：本地安装好 Node.js

新建 React 项目：npx create-react-app 项目名

**注：**npx 命令要求 node 的版本 > 14，你可以通过 node -v 检查 node 的版本。

npx create-react-app zhifou-react

如果你电脑本地之前没有安装过 create-react-app，第一次安装会询问你是否安装，输入 y 即可。

接着用 vscode 打开刚刚安装的 react 项目文件夹

在控制台输入 npm start 运行项目

2.2 项目目录

在 src 文件夹下，我们先删除多余的文件，只保留 App.js、index.js、index.css

  • public: 公共文件，包含项目的入口 HTML 文件和图标。
  • src：源代码目录。
  • App.js: 根组件
  • index.css: 全局 CSS 样式文件
  • index.js: 应用的入口 JS 文件。
  • package.json: 项目的配置文件，定义项目的依赖关系、安装插件的版本

2.3 项目启动过程

讲解：

先获取 index.html 里面 id 为 root 的根节点，然后将 App 组件渲染到该节点上。所以启动项目后显示的是 App.js 里面的内容。

2.4 注意事项

删除 index.js 文件里面 React.StrictMode 标签。

这个标签表示 React 的严格模式，它是一个用来检测潜在问题的工具，可以帮助你识别一些问题。

但是为什么建议删掉呢？因为它会带来一些问题，比如会遇到编码错误、生命周期函数连续调用两次等问题。所以建议删掉。

3. JSX

JSX 是 JavaScript XML 的缩写，它是一种语法扩展，让你可以在 JavaScript 中编写类似 HTML 的代码。

JSX 在 React.js 中用来构建用户界面的结构。

当你在项目中使用 JSX 时，通常需要一个构建步骤，这个步骤会将 JSX 代码转换成普通的 JavaScript 代码。Babel 是一个常用的工具，它可以帮助你完成这个转换。

JSX 允许你嵌入 JS 表达式，比如变量、列表、函数等，这意味着你可以根据数据动态生成 UI。

JSX 与 HTML 的区别：

  • JSX 运行在 JavaScript 环境中，而 HTML 运行在浏览器中。
  • JSX 支持 JavaScript 表达式，而 HTML 不支持。
  • JSX 需要通过构建工具转换，而 HTML 直接由浏览器解析。

4. React 组件

React 中有 2 种形式的组件：

  • 函数组件
  • 类组件

4.1 函数组件

使用 JS 的函数（包括箭头函数）创建的组件，就叫做函数组件。

创建函数组件的规范：

    1. 函数组件名称首字母必须大写！必须大写！必须大写！
    1. 函数组件必须有返回值，其实返回值就是我们渲染的页面结构。如果不需要渲染内容，返回 null。

4.1.1 创建函数组件：User.js

JS 函数方式：

箭头函数方式:

4.1.2 导入子组件

4.1.3 绑定事件

React 绑定事件的语法：on + 事件名称 = { 事件函数 }

例如：

<div onClick={ getDataList }></div>

函数组件绑定点击事件案例

4.1.4 获取事件对象

事件函数接收形参 e

const User = () => {
  const name = "我是函数组件";
  const clickHandler = (e) => {
    console.log("点击事件：",e)
  }
  return (
    <div className="App">
      <h3>{name}</h3>
      <button onClick={clickHandler}>请疯狂点我</button>
    </div >
  );
}
export default User;

4.1.5 获取事件其他参数

通过箭头函数传递参数

const User = () => {
  const name = "我是函数组件";
  const clickHandler = (e, title) => {
    console.log("事件对象：", e)
    console.log("标题参数：", title)
  }
  return (
    <div className="App">
      <h3>{name}</h3>
      <button onClick={(e) => clickHandler(e, "听泉赏宝")}>请疯狂点我</button>
    </div >
  );
}
export default User;

4.2 类组件

使用 ES6 标准中的 class 创建的组件叫做类组件。

创建类组件的规范：

    1. 类组件名称首字母必须大写！
    1. 类组件应该继承 React.Component 类
    1. 类组件必须要包含 render 方法
    1. 类组件 render 方法必须要有返回值，返回值就是我们要渲染的页面结构。

4.2.1 创建类组件 Hello.js

4.2.2 导入子组件

4.2.3 绑定事件

类组件中的事件绑定和函数组件的语法差别不大，主要是函数定义和调用有差别：

    1. 函数定义：类的成员变量定义函数
    1. 调用: 需要使用 this 关键字调用
// 引入React
import React from 'react'
// 定义类组件
class Hello extends React.Component {
  clickHandlerOne() {
    console.log("事件One被点击")
  }
  clickHandlerTwo = () => {
    console.log("事件Two被点击")
  }
  clickHandlerThree = (e, title) => {
    console.log("事件对象：", e)
    console.log("标题参数：", title)
  }
  render() {
    const name = "我是类组件";
    return (
      <div>
        <h1>{name}</h1>
        <button onClick={this.clickHandlerOne}>事件One</button><br></br>
        <button onClick={this.clickHandlerTwo}>事件Two</button><br></br>
        <button onClick={(e) => this.clickHandlerThree(e, "知否技术")}>我是类组件，请疯狂点我</button>
      </div >
    )
  }
}
export default Hello

4.3 React 的 State（状态）

React 的 State 相当于 Vue 中的 data，主要用来存储当前组件中的数据。

React 的 State 只存在于类组件种，函数组件没有状态。

State 的使用规范：

    1. 状态是 React 组件的私有数据，只能在组件内部使用
    1. State 是一个对象，可以存储多种数据
    1. State 既可以定义在类组件的构造函数中，也可以定义在类组件的成员属性中
    1. 通过 this.state.属性名 获取状态值
    1. 只能通过 this.setState() 修改状态值

4.3.1 读取状态

// 引入React
import React from 'react'
// 定义类组件
class Hello extends React.Component {
  state = {
    amount: 9.9,
  };
  render() {
    return (
      <div>
        <h1> 余额宝金额：{this.state.amount}</h1>
      </div >
    )
  }
}
export default Hello

4.3.2 修改状态

只能通过 this.setState() 修改状态值

4.4 组件通信

组件通信主要用来共享数据。

4.4.1 父传子

实现步骤：

    1. 父组件在 state 中提供要传递的数据
    1. 子组件标签绑定属性为 state 中的值
    1. 子组件通过 props 接收数据，其中 类组件通过 this.props 获取 props 对象，函数式组件通过参数获取 props 对象。

1.父组件传递数据

2.类子组件接收数据

3.函数子组件接收数据

4.4.2 子传父

实现步骤：

    1. 父组件提供一个回调函数接收数据
    1. 将函数作为属性的值，传给子组件
    1. 子组件通过props调用 回调函数
    1. 将子组件中的数据作为参数传递给回调函数

1.父组件

2.子组件

4.4.3 兄弟通信

实现原理：组件 A 将数据传给父组件，父组件再将数据传给 B 组件。

1.父组件

2.A 组件

3.B 组件

4.演示效果

4.4.4 子孙通信

所谓子孙通信，就是祖宗组件将数据传递给子组件，子组件的子组件的。。。。。子组件能接收到数据。

React 的 Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

实现步骤：

  1. React 内置 Context 对象，通过 Context 对象导出 Provider 和 Consumer 对象。
const { Provider, Consumer } = createContext()
  1. 使用 Provider 包住提供数据的最上一级组件，在父(祖先)级组件中，把要传递东西的后代组件包起来，要传递的东西放进 value 里面。
<Provider value={this.state.amount}>
    {/* 根组件 */}
</Provider>
  1. 后代组件放在 Consumer 里面， 内部是一个函数，这个函数接收一个对象作为参数，参数是Provider 里面提供的值，然后直接使用就可以了。
<Consumer >
    {value => }
</Consumer>

案例：

1.封装 context.js

2.最上一级组件

3.User.js

4.Hello.js

5.演示效果

avatar
文章
阅读
粉丝