01-邂逅React开发

最新推荐文章于 2023-01-09 13:57:13 发布

bagBean

最新推荐文章于 2023-01-09 13:57:13 发布

阅读量530

点赞数 1

分类专栏： React学习文章标签： javascript react reactjs

本文链接：https://blog.csdn.net/qq_43709292/article/details/110135442

版权

01-邂逅React开发

前言

特别喜欢coderwhy老师的讲课风格，每接触一个新技术第一节课教学的时候都喜欢用”邂逅“这个词，一开始看它Vue视频的时候还觉得没什么，但是在看它的React视频的时候，发现也是用的邂逅，感慨良多，希望自己能够保持学习的热情，爱上前端工程师这份工作。

React是什么

官网描述：用于构建用户界面的JavaScript库
原生HTML、CSS、JS存在的问题
- 操作DOM兼容性问题
- 过多兼容性代码的冗余问题
- 代码组织和规范的问题
所以在很长时间以来用的都是jQuery这个库
直到angular、react、vue这些框架的出现
这里拓展一下这些框架和jQuery库的区别
- 个人感觉之所以将angular、react、vue叫做框架，将jQuery称为库，一定程度上两者还是有较大的不同，库更倾向于是一种扩展，实在原有的基础上的一种扩展，所以数据和视图是没有分离的，杂糅在一起的
- 另外数据和视图的杂糅就容易造成代码后期维护不便利，逐渐的就慢慢衍生出将数据与视图相分离的方式，但是相较原生而言，已经是有了较大的不同，所以把它们叫做框架，让数据去驱动视图的变化

React的起源

react是2013年由Facebook开源的JavaScript框架
它来源于这样一个需求(图片摘自coderwhy公众号)
当红色的三个数字在发生变化的时候，过多的操作很容易产生bug
- 传统开发模式中，过多的去操作界面的细节，并且需要掌握大量DOM操作的API，当然我们可以使用jQuery来简化和适配一些API来使用
- 另外关于数据(状态)往往会分散到各个地方，不方便管理和维护
于是就有了以下解决方案
- 以组件的方式去划分一个个功能模块
- 组件内以jsx来描述UI的样式，以state来存储组件内的状态
- 当应用的状态发生改变的时候，通过setState来修改状态，状态发生变化时，UI会自动变化

React的特点

声明式编程(Vue、React、Flutter、SwiftUI)
- 它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面
组件化开发
多平台适配
- 2013年 React发布之初开发Web界面
- 2015年 Facebook推出ReactNative，用于开发移动端跨平台(Flutter)
- 2017年 Facebook推出ReactVR，用于开发虚拟现实Web应用程序
总之 react的各种特点不管是在现在还是在将来，对各大框架都是由借鉴意义的，比如Vue3的很多新特性，也是借鉴的react，Flutter的很多灵感也是来自React

Hello React案例

需求
- 在界面上显示一个文本：Hello world
- 点击下方的一个按钮，点击后文本改变为Hello react

原生实现

<body>
    <h2 class="title"></h2>
    <button class="btn">点击切换</button>

    <script>
        // 命令式编程：每做一个操作，都是给计算机(浏览器)一步步命令
        // 声明式编程：React
        // document.getElementsByClassName 返回的是一个数组哦！

        // 1. 定义数据
        let message = "Hello World"

        // 2. 将数据显示在 h2 元素中
        const titleEl = document.getElementsByClassName("title")[0];
        titleEl.innerHTML = message;

        // 3. 点击按钮，界面的数据发生改变
        const btnEl = document.getElementsByClassName('btn')[0];
        
        btnEl.addEventListener('click', e => {
     
            message =

最低0.47元/天解锁文章

bagBean

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
01-邂逅React开发

01-邂逅React开发前言特别喜欢coderwhy老师的讲课风格，每接触一个新技术第一节课教学的时候都喜欢用”邂逅“这个词，一开始看它Vue视频的时候还觉得没什么，但是在看它的React视频的时候，发现也是用的邂逅，感慨良多，希望自己能够保持学习的热情，爱上前端工程师这份工作。React是什么官网描述：用于构建用户界面的JavaScript库原生HTML、CSS、JS存在的问题操作DOM兼容性问题过多兼容性代码的冗余问题代码组织和规范的问题所以在很长时间以来用的都是jQuery这
复制链接

扫一扫