> 文章列表 > React | 认识React开发

React | 认识React开发

React | 认识React开发

✨ 个人主页:CoderHing

🖥️ Node.js专栏:Node.js 初级知识
🙋‍♂️ 个人简介:一个不甘平庸的平凡人🍬

💫 系列专栏:吊打面试官系列  16天学会Vue 11天学会React  Node专栏

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力!❤️


目录

一、React的介绍和特点

React的介绍

React的特点 - 声明式编程

React的特点 - 组件化开发

React的特点 - 多平台适配

二、Hello React

Hello React案例

三、React开发依赖分析

React的开发依赖

Babel和React的关系

四、React组件化的封装

Hello React - 组件化开发

组件化 - 数据依赖

组件化 - 事件绑定


一、React的介绍和特点

React的介绍

  • React是什么?

    • React: 用于构建用户界面的JavaScript库;

React的特点 - 声明式编程

  • 声明式编程:

    • 声明式编程是目前 整个大前端开发的模式: Vue React Flutter SwiftUI

    • 它允许我们 只需要维护自己的状态,当状态改变时,React可以根据最新的状态去渲染我们的UI界面

React的特点 - 组件化开发

  • 组件化开发:

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

React的特点 - 多平台适配

  • 多平台适配:

    • 2013年,发布之初主要是开发Web页面

    • 2015年,推出ReactNative,用于开发移动端跨平台;

    • 2017年,推出ReactVR,用于开发虚拟现实Web应用程序

二、Hello React

Hello React案例

  • 在界面显示一个文本: Hello React

  • 点击下方的按钮,文本改变为:Hello World!

  • 第一步:通过React现实一个Hello React

    • 我们编写React的script代码中,必须添加type="text/babel",可以让babel解析jsx的语法

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

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

      • 这里我们已经定义一个id为root的div

  • root.render函数:

    • 参数:要渲染的根组件

  • 通过{}语法来引入外部的变量或表达式

三、React开发依赖分析

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.js

    • 目前前段使用非常广泛的编译器,转移器

    • 如当下很多浏览器并不支持ES6的语法,但是确实ES6的语法非常简洁和方便,我们开发时希望使用它们.

    • 那么编写源码时我们就可以使用ES6来编写,之后通过Babel工具,将ES6转成大多数浏览器都支持的ES5的语法

  • React和Babel的关系:

    • 开发React其实可以不适用babel

    • 前提是我们自己使用React.createElement来编写源代码,他编写的代码 非常的繁琐和可读性差.

    • 那么我们就可以直接编写 jsx的语法,并且让 babel帮助我们转换成React.createElement

四、React组件化的封装

Hello React - 组件化开发

  • 我们可以将其封装成一个组件:

    • root.render 参数 是一个HTML元素或一个组件

    • 我们可以先将之前的业务逻辑封装到一个组件中,然后传入到ReactDOM.render函数中的第一个参数

  • 在React中,怎么封装一个组件? 使用 类|函数式 的方式进行封装(这里先使用类)

    • 定义一个类 (类名大写,组件的名称必须大写,小写会被认为是HTML元素),继承自 React.Component

    • 实现当前组件的render函数

      • render当中返回的jsx内容,就是之后React会帮助我们渲染的内容

组件化 - 数据依赖

  • 组件化问题:数据应该定义在哪里?

  • 在组件中的数据,我们分为两类:

    • 参与界面更新的数据:当数据变量时,需要更新组件渲染的内容

    • 不参与界面更新的数据:当数据变量时,不需要更新组件渲染的内容

  • 参与界面更新的数据我们称为 参与数据流,这个数据定义在当前对象的state中

    • 可以通过在构造函数中 this.state = {定义的数据},必须得是state

    • 当我们的数据发生变化时,可以调用this.setState来更新数据,并通知React进行update操作

      • 在进行update操作时,就会重新调用render函数,并使用最新数据,来渲染界面

 

组件化 - 事件绑定

  • 事件绑定中的this

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

  • 默认情况下是undefined

    • 为什么是undefined

    • 因为在正常的DOM操作,监听点击,监听函数中的this其实是节点对象

    • 这次因为React并不是直接渲染为真实DOM,我们编写的这个对象只是一个语法糖,它的本质React的Element对象

    • 那么在这里发生监听的时候,react在执行函数时并没有绑定this,默认情况就是undefined

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

    • 我们需要在传入函数时,给函数绑定this

    • 如button

    • <button onClick={this.changeText.bind(this)}>改变文本</button>

小故事大全