nullcache自留地

Appearance

Return to top
On this page

Hello React

一. React 的介绍和特点

React 的介绍（技术角度）

React 是什么？

image-20230129150351222

React 的特点 – 声明式编程

声明式编程：

  • 声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI；
  • 它允许我们只需要维护自己的状态，当状态改变时，React 可以根据最新的状态去渲染我们的 UI 界面；

image-20230129150421614

React 特点 – 组件化开发

组件化开发：

  • 组件化开发页面目前前端的流行趋势，我们会将复杂的界面拆分成一个个小的组件；

  • 如何合理的进行组件的划分和设计也是后面我会讲到的一个重点；

image-20230129150444559

React 的特点 – 多平台适配

多平台适配：

  • 2013 年，React 发布之初主要是开发 Web 页面；
  • 2015 年，Facebook 推出了 ReactNative，用于开发移动端跨平台；（虽然目前 Flutter 非常火爆，但是还是有很多公司在使用 ReactNative）；
  • 2017 年，Facebook 推出 ReactVR，用于开发虚拟现实 Web 应用程序；（VR 也会是一个火爆的应用场景）；

image-20230129150454100

二. React 开发依赖

开发 React 必须依赖三个库：

  • react：包含 react 所必须的核心代码
  • react-dom：react 渲染在不同平台所需要的核心代码
  • babel：将 jsx 转换成 React 代码的工具

第一次接触 React 会被它繁琐的依赖搞蒙，居然依赖这么多东西：（直接放弃？）

  • 对于 Vue 来说，我们只是依赖一个 vue.js 文件即可，但是 react 居然要依赖三个包。
  • 其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情;
  • 在 React 的 0.14 版本之前是没有 react-dom 这个概念的，所有功能都包含在 react 里；

为什么要进行拆分呢？原因就是 react-native。

  • react 包中包含了 react web 和 react-native 所共同拥有的核心代码。
  • react-dom 针对 web 和 native 所完成的事情不同：
    • web 端：react-dom 会将 jsx 最终渲染成真实的 DOM，显示在浏览器中
    • native 端：react-dom 会将 jsx 最终渲染成原生的控件（比如 Android 中的 Button，iOS 中的 UIButton）。

三. Babel 和 React 的关系

babel 是什么呢？

  • Babel，又名 Babel.js
  • 是目前前端使用非常广泛的编译器、转移器。
  • 比如当下很多浏览器并不支持 ES6 的语法，但是确实 ES6 的语法非常的简洁和方便，我们 开发时 希望使用它。
  • 那么编写源码时我们就可以使用 ES6 来编写，之后通过 Babel 工具，将 ES6 转成大多数浏览器都支持的 ES5 的语法。

React 和 Babel 的关系：

  • 除了对 JS 新语法进行兼容，babel 还能把 jsx 里的语法变成浏览器能识别的语法

  • 默认情况下开发 React 其实可以不使用 babel，但是这样就需要使用 React.createElement 来编写源代码，它编写的代码非常繁琐且可读性差

  • 配合 babel，我们就可以直接编写 jsx（JavaScript XML，js 扩展）的语法，并且让 babel 帮助我们转换成 React.createElement

  • 实际上类比 Vue，我们能发现 Vue 的模板实际上做的事情就是先把模板转为 render 函数，render 函数帮助转为 h 函数，h 函数生成虚拟 dom，虚拟 dom 生成真实 dom，而我们的 react 相当于直接编写类似于 h 函数的 React.createElement（babel 在运行前帮忙转换）

四. React 的依赖引入

所以，我们在编写 React 代码时，这三个依赖都是必不可少的。

那么，如何添加这三个依赖：

  • 方式一：直接 CDN 引入
  • 方式二：下载后，添加本地依赖
  • 方式三：通过 npm 管理（后续脚手架再使用）

暂时我们直接通过 CDN 引入，来演练下面的示例程序：

  • 这里有一个 crossorigin 的属性，这个属性的目的是为了拿到跨域脚本的错误信息
html
<script
  src="https://unpkg.com/react@18/umd/react.development.js"
  crossorigin
></script>
<script
  src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
  crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

五. Hello World

第一步：在界面上通过 React 显示一个 HelloWorld

  • 注意：这里我们编写 React 的 script 代码中，必须添加 type="text/babel"，作用是可以让 babel 解析 jsx 的语法
jsx
<script type="text/babel">
  const msg = "Hello World" const root =
  ReactDOM.createRoot(document.querySelector("#root")) root.render(
  <h2>{msg}</h2>)
</script>

ReactDOM.createRoot 函数：用于创建一个 React 根，之后渲染的内容会包含在这个根中

  • 参数：将渲染的内容，挂载到哪一个 HTML 元素上

root.render 函数:

  • 在类组件里，是唯一必须实现的方法
  • 参数：要渲染的根组件，可以是一个 HTML 元素或者一个组件

我们可以通过 {}语法 来引入外部的变量或者表达式

在 React18 前是用另一种初始化方法！！

jsx
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));
  • 当然 React18 也可以使用ReactDOM.render，但是性能会差一点

DOM 和 React 不要混用

image-20230129152953331

  • 后面会学习 jsx 的核心语法，和 mustache 语法的双大括号类似，jsx 是单大括号语法，存在差别但是可以借此来理解

六. Hello React – 组件化开发

整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件：

  • 我们说过 root.render 参数是一个 HTML 元素或者一个组件；
  • 所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数；

在 React 中，如何封装一个组件呢？ 这里我们暂时使用类的方式封装组件：

  • 1.定义一个类（类名大写，组件的名称是必须大写的，小写会被认为是 HTML 元素），继承自 React.Component
  • 2.实现当前类组件的 render 函数
    • render 当中返回的 jsx 内容，之后 React 会帮助我们渲染出来
jsx
class App extends React.Component {
  render() {
    return <h2>Hello World</h2>;
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);

组件化 - 数据依赖

组件化问题一：数据在哪里定义？

在组件中的数据，我们可以分成两类：

  • 参与界面更新的数据：当数据变化时，需要重新渲染组件的数据；

  • 不参与界面更新的数据：当数据变化时，不需要重新渲染组件的数据；

参与界面更新的数据我们也可以称之为是参与数据流，这个数据需要定义在当前对象的 state 中

  • 首先渲染出来的组件实际上是类的实例，那么我们可以通过在构造函数中给 this 挂上 state 属性，这样 state 属性就会存在于类的实例中
  • 当我们的数据发生变化时，我们可以调用this.setState来更新数据，用于通知 React 进行 update 操作；
    • 这个this.setState是 react 给我们提供的，在原型链上的方法、
    • 不要直接修改 state 里的数据，而是通过 setState 传入新数据，要把state 里的数据视作只读的，后面会详细说到
    • 在进行 update 操作时，就会重新调用 render 函数，并使用最新的数据来渲染界面
    • js 语法规定，在 constructor 中使用 this，必须先调用super 函数
    • 实际上 constructor 是接受 props 参数，super 时也要传入 props，但是可以省略
    • 如果不需要有 state，constructor 部分全都可以省略
jsx
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      msg: "Hello World",
    };
  }
  render() {
    return <h2>{this.state.msg}</h2>;
  }
}

组件化 – 事件绑定

组件化问题二：事件绑定中的 this

  • 之前我们提到不能使用 dom 来绑定事件，我们需要用 jsx 语法来绑定

  • 如果我们需要点击按钮来改变 state，需要this.setState，那 this 的指向必须要正确，否则将无法调用方法

  • 在类中直接定义一个函数，并且将这个函数绑定到元素的 onClick 事件上，当前这个函数的 this 指向的是谁呢？

jsx
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      msg: "Hello World",
    };
  }
  changeText() {
    console.log(this);
  }

  render() {
    return <button onClick={this.changeText}>改变文本</button>;
  }
}

默认情况下是 undefined

  • 因为在正常的 DOM 操作中，监听点击，监听函数中的 this 其实是节点对象（比如说是 button 对象）；
  • 这次因为 React 并不是直接渲染成真实的 DOM，我们所编写的 button 只是一个语法糖，它的本质 React 的 Element 对象；
  • 所以在这里发生监听的时候，react 在执行函数时并没有绑定 this，默认情况下就是一个 undefined；

我们在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的 this

  • 我们就需要在传入函数时，给这个函数直接绑定 this
  • 类似于下面的写法：
jsx
<button onClick={this.changeText.bind(this)}>改变文本</button>
  • 当然还有很多其他的解决办法，这里先介绍这一种
0  Words
Comments
  • Latest
  • Oldest
  • Hottest
Powered by Waline v2.14.9