React精讲（一）原生react

最新推荐文章于 2024-04-25 17:53:36 发布

VIP文章 Code_Dreaming

最新推荐文章于 2024-04-25 17:53:36 发布

阅读量1.7k

点赞数 1

文章标签： 1024程序员节 react 前端 javascript jsx

本文链接：https://blog.csdn.net/weixin_45704555/article/details/120929704

版权

React是什么？

react是一个优秀的js库（它与Vue，Angular并称为前端开发的三大框架），它比过去流行的js库jQuery更加好用。

react的起源

react是Facebook开源的js框架，Facebook推出这一框架的原因：（这主要源于在完成一个前端需求时所产生的bug）
在这里插入图片描述
上述界面中，每个图标的右上方都有一个动态变化的数字，如果仅仅用js来维护，我们通常会把这三个数字放在一起来维护，但这样在对这三个图标做大量点击操作时，数字的变化常常会产生许多bug

于是Facebook的工程师就思考为什么会产生这一问题：

1、在传统的前端开发中，我们往往会过多地去操作界面的细节，并会使用大量DOM操作的API （当然我们可以通过jQuery来简化和适配一些API的使用），这样导致页面的反应速度很慢，开发效率低；
2、另外，前端页面中的数据状态会被分散到它们自己的各个页面中，不方便维护和管理

了解上述问题后，就想出了相应的解决方案：

1、以组件的方式去划分个个功能模块；
2、组件内以jsx来描述UI的样子, 以state来存储组件内的状态；
3、当应用的状态发生改变时,通过setState来修改状态,状态发生变化时, UI会自动发生更新

react的特点

1、声明式编程。它与命令式编程相对，它只关心你要做什么，而不关心你具体要怎么做，最典型的就是sql语句，每一条sql都只是告诉DBMS要干什么，而具体的增删改查操作并没有在sql语句中体现，相对地对于每条sql语句，DBMS中都一套固定的底层实现流程命令。
在react开发中，前端界面只需维护自己的状态，当状态改变时，react就根据最新状态去渲染UI界面（不需要具体管怎么更新状态的，只要给状态），一个著名的公式：
在这里插入图片描述

【注】整个过程都没有操作dom，只需维护页面的状态（f 在react中表现为render函数，在数据库中体现为DBMS中的各类算法）

2、组件化开发。就是将一个界面拆分成一个个的组件（组件其实还可以被拆分为组件），然后再将这一个个组件拼回页面；
组件化开发的难点是如何合理地去划分组件！

3、多平台适配。web端（react），移动端（react-native），VR（react-VR）都能用react开发，当然模式不完全一样。

React代码开始了

小案例： Hello React

在界面显示一个文本 : Hello World，点击下方的一个按钮,点击后文本改变为Hello React
在这里插入图片描述
这里我们不使用脚手架来做一个简单的demo，们直接在HTML中去做测试。

（一）js原生开发

这不是本节的重点，直接帖一下代码，自己赏析体会：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 class="title">hello world</h2>
    <button class="btn">改变文本</button>
    <script>
        // 命令式编程： 每做一个操作，都是给计算机（这里是浏览器）一步步的命令
        // 声明式编程：
        // 定义数据
        let message = "Hello world"
        // 将数据显示在h2元素中
        const titleEl = document.getElementsByClassName("title")[0]
        titleEl.innerHTML = message

        // 点击按钮，界面的数据发生改变
        const btnEl = document.getElementsByClassName("btn")[0]
        btnEl.addEventListener("click", e => {
     
            message = 'Hello react'
            titleEl.innerHTML = message;
        })
    </script>
</body</

最低0.47元/天解锁文章

Code_Dreaming

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React精讲（一）原生react

React是什么？react是一个优秀的js库（它与Vue，Angular并称为前端开发的三大框架），它比过去流行的js库jQuery更加好用。React的起源react是Facebook开源的js框架，Facebook推出这一框架的原因：（这主要源于在完成一个前端需求时所产生的bug）上述界面中，每个图标的右上方都有一个动态变化的数字，如果仅仅用js来维护，我们通常会把这三个数字放在一起来维护，但这样在对这三个图标做大量点击操作时，数字的变化常常会产生许多bug于是Facebook的工程师就思
复制链接

扫一扫