React第一章(基本介绍)

React入门

什么是react?

https://message163.github.io/react-docs/

React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook(现Meta) 开发和维护,并在2013年开源。React 的设计初衷是帮助开发者构建复杂的用户界面,同时保持代码的可维护性和可扩展性。

react的特点

  1. 组件化:React 通过将 UI 分解为独立的、可重用的组件,使得代码更易于管理和维护。每个组件只关注于自身的逻辑和视图。

  2. 声明式编程:React 采用声明式的编程风格,开发者只需描述 UI 应该是什么样子的,而不需要手动操作 DOM。React 会根据数据的变化自动更新 UI。

原生js时代渲染数据

js 复制代码
const arr = [
    {
        name: '小明',
        age: 18
    },
    {
        name: '小红',
        age: 19
    }
]
const container = document.createElement('ul')
arr.forEach(item => {
    const span = document.createElement('li')
    span.textContent = item.name + item.age 
    container.append(span)
})
document.body.append(container)

框架阶段 不需要在手动操作dom

js 复制代码
const arr = [
    {
        name: '小明',
        age: 18
    },
    {
        name: '小红',
        age: 19
    }
]

const App  = () => {
    return (arr.map(v=>{
        return <div>{item.name} {item.age} </div>
    }))
}
  1. 虚拟 DOM:React 使用虚拟 DOM(Virtual DOM)来优化 UI 的更新过程。当数据发生变化时,React 会创建一个新的虚拟 DOM,然后将其与之前的虚拟 DOM 进行比较,找出最小的变化,并将这些变化应用到实际的 DOM 中,从而提高性能。

  2. 单向数据流:React 采用单向数据流(也称为单向数据绑定),这意味着数据在组件之间通过 props 进行传递,使得数据的流动更加清晰和可预测。

  3. 生态系统:React 有一个庞大且活跃的社区,提供了大量的第三方库和工具,如 React Router(用于路由管理)、Redux(用于状态管理)等,帮助开发者构建复杂的应用。

前置知识

你必须学会以下知识才能使用 React:

  • JavaScript(es6+)
  • HTML
  • CSS
  • TypeScript(基本使用) Typescript教程
  • Npm包管理器

React市场情况

npm官网统计(不包含镜像) 2024-9-4

  1. react 18.3.1 周下载量 22,538,510
  2. vue 3.4.31 周下载量 4,699,312
  3. Angular 18.1.0 周下载量 3,216,414
  4. jQuery 3.7.10 周下载量 10,210,940
  5. solid 1.8.18 周下载量 288,278

安装环境准备

  1. node.js
    下载地址:https://nodejs.org/en 建议安装18以上版本,或者使用nvm管理node版本
  2. vsocde编辑器(如果安装过了请略过|或者喜欢其他编辑器) https://code.visualstudio.com/
  3. vscode插件安装 可选 (Simple React Snippets)
相关推荐
EndingCoder10 小时前
Electron 跨平台兼容性:处理 OS 差异
前端·javascript·electron·前端框架·node.js·chrome devtools
秋田君10 小时前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
爱隐身的官人10 小时前
ctfshow - web - nodejs
前端·nodejs·ctf
zhong liu bin10 小时前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
W-GEO10 小时前
前端安全攻防:XSS, CSRF 等常见威胁的防范与检测指南
前端·安全·xss
2301_8035545210 小时前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn10 小时前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤10 小时前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n123523510 小时前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子10 小时前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui