前端学习-React基础

最新推荐文章于 2024-11-23 21:27:00 发布

什巳

最新推荐文章于 2024-11-23 21:27:00 发布

阅读量1.1k

点赞数 1

分类专栏：前端学习文章标签： react 前端 jsx JavaScript 组件

本文链接：https://blog.csdn.net/qq_48772498/article/details/123652522

版权

本文深入介绍了React前端开发，包括React的基本概念、特点如声明式编码、不直接操作DOM、组件化思想，以及React脚本直引的使用、React脚手架的运用。重点讲解了JSX的使用，包括基本使用、JavaScript表达式嵌入、条件渲染和列表渲染，以及组件基础，如组件创建、事件处理和状态管理。此外，还详细阐述了表单处理的受控和非受控组件概念。

摘要由CSDN通过智能技术生成

一.React 概述

1.React 是什么？

React 是用于构建用户界面的 JavaScript 库，主要用来写 HTML 页面或者构建web应用

2.React 起源

由 FaceBook 在 2013 年开源的一个用于构建用户界面的 JavaScript 库。

二.React 特点

1.声明式编码

编码方式分为声明式和命令式两种，比如说：

声明式：每天上课都要带上电脑
命令式：带上电视，周一上课

命令式编码需要告诉浏览器怎么做，而声明式只需要告诉浏览器做什么就好了。

命令式编码特点：技术细节纯手写。需要告诉浏览器如何操作 DOM，以及如何激活事件。
声明式编码特点：技术细节黑盒化。在 React 中定义某个函数，无需直接接触 DOM 和事件系统。

2.不直接操作DOM

在 React 中我们不需要直接进行 DOM 操作，只需要通过 JSX 的语法完成 UI 的编写。原生 JS 操作 DOM 都是使用的 DOM-API，编写繁琐且执行效率低。而 React 避免了这些问题。

3.组件化思想

任何的页面都会被抽象成一棵组件树。树上的每一个节点，我们都可以开发出一个个独立可复用的小组件。

而在 React 中我们可以通过关键字 class 来定义一个组件，render 方法中返回的就是这个组件的 UI 视图。

4.一次学习、多段开发

React Native源自React，它是React在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSx，以及 CSS来开发移动应用，因此熟悉 Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

React VR 是一个用于创建在浏览器中运行的VR应用程序的框架。它将 WebGL和 WebVR 等现代 api 与 React 的声明能力结合在一起，产生可以通过各种设备消费的体验。利用网络技术和现有的 React 生态系统，ReactVR 旨在简化 360 体验的构建，并将VR内容的创造大众化。

三.React 脚本直引的使用

1.React 的安装

安装命令：npm i react react-dom

react 包是核心，提供创建元素、组件等功能
react-dom 包提供 DOM 相关功能

2.React 的使用

2.1 引入 react 和 react-dom 两个 js 文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

2.2 创建 React 元素

2.3 渲染 React 元素到页面中

<div id="root"></div>
<script>
    const title = React.createElement('h1', null, 'Hello React');
    ReactDOM.render(title, document.getElementById('root'));
</script>