首页 > 其他分享 >React 学习笔记:刚开始接触

React 学习笔记:刚开始接触

时间:2024-04-16 14:12:22浏览次数:24  
标签:Vue 接触 笔记 React Hook 组件 Tools Developer

目录

前言

之前有断断续续学过一段时间的React,学的也不多。最近6月想跑路回家了,就想在离职前顺便了解一下,毕竟在公司也不能玩手机。

相关链接

React中文文档

个人对React和Vue的初步感觉

React就是JS里面写Html,优点就是更高的灵活度。Vue就是一个完整的框架,给了你全套的解决方案,你必须按照Vue的逻辑去解决。所以Vue写起来,大家写的都差不多。React就是非常考验你抽象的能力了。
无论如何,我都会学半个月的React。作为一个程序员,我至少要会React,才能说React的不行。而且React国外用的多,说不定以后我可能要做React的项目。React最大的问题就是Hook了,我看这个确实挺恶心的,目前还没用过,听说坑挺多的。希望用起来还行吧。

React和Vue官方态度的区别

React

我只给你最基本的解决方案,我只维护我的React核心。除非已经找到了最佳实现,不然我不会主动下场添加功能。所以很多时候你得去社区找对应的功能补充一下。

Vue

我把全套的解决方案给你,虽然不一定是最好的,但是我保证了下限。生态一般靠官方。社区也可以跟进

新建第一个React项目

React vscode 创建 react 项目流程【超详细】

启动成功!

复制官方的文档代码

教程:井字棋游戏

这个教程还是非常推荐的,写的很完整。将一个简单的React组件如何写的完整的体现了出来。

React个人使用体验

React使用起来感觉确实比Vue舒服,原因是React的想法非常的程序员,他的思想就是我简化了DOM元素的操作,相当于Jquery的高级封装,我让你更舒服的和前端打交道,把常用的方法封装了一下。我给了你更高的自由度,你想怎么写就怎么写

而Vue更多的是,我给了你一个基础的解决方案,但是必须按照我的想法来解决问题。更多的时候是写静态页面,灵活度少很多。适合做简单的项目。一旦要组件化开发,写起来就非常的麻烦。Vue让我们远离了底层,中间隔了个Vue,我们只能通过Vue自己开的洞,用棍子去调整墙对面物品的摆放的位置。

返回html

个人习惯用(<></>)包括返回,因为这样格式化后的代码比较好看。而且React默认只能返回一个节点。

修改样式

其实只要JS和HTML基础够好,或者Jquery用的比较多,这个写起来还是很简单的

作用域

React是单项数据流,Vue是组件内部是双向数据量,组件和组件之间也是单项数据流的。React是通过Hook的回调函数来修改值的

根据我的测试,React的useState也是可以存放Class对象的数据的

React的常用组件

React Developer Tools React开发工具

React Developer Tools React开发工具

React框架推荐

023/2024 年 React 组件库 与 相关库 推荐

总结

React写起来其实也不难,只要懂了Hook,基本就懂了一半了。剩下的就是选择生态了。我后端肯定是上ASP.NET的,React只是写前端而已。React尽量选择轻量级的代码,我不想写的太重,没必要。开箱即用既可以。

后面先去学一下国内最流行的React UI框架 ant-design UI

标签:Vue,接触,笔记,React,Hook,组件,Tools,Developer
From: https://www.cnblogs.com/gclove2000/p/18137436

相关文章

  • react组件地狱是什么怎么解决
    React中的“组件地狱”主要指的是在组件开发中,由于组件的过度嵌套或复杂的层次结构,导致代码变得难以阅读、理解和维护。这通常发生在开发者为了复用逻辑或状态而在组件中层层嵌套其他组件时。在使用高阶组件(HOC)或渲染属性(renderprops)时,如果不加以控制,很容易形成嵌套层级过深的组......
  • React 中的 useRef 与 useState
    React是一个流行的JavaScript库,用于构建用户界面。它提供了几个钩子,使开发人员能够管理状态并执行副作用。React中两个常用的钩子是 useRef 和 useState 。虽然它们乍一看似乎很相似,但它们具有不同的目的并且具有不同的用例。在本文中,我们将深入探讨 useRef 和 useSta......
  • React前端技术深度解析与实践
    React作为当今最热门的前端技术之一,以其组件化、高效性和灵活性等特点赢得了广大开发者的青睐。本文将深入探讨React前端技术的核心原理、实践技巧以及未来的发展趋势,帮助读者更好地理解和应用React。一、React的核心原理React的核心原理是组件化开发。组件是React应用的基本构......
  • React的核心原理:组件化开发深度解析
    React的核心原理:组件化开发深度解析React,作为当今最流行的前端框架之一,其成功的背后离不开其核心原理——组件化开发。组件化开发不仅简化了前端开发的复杂性,还提高了代码的可重用性和可维护性。本文将深入探讨React组件化开发的原理、优势以及实践中的注意事项。一、组件化开发......
  • 一周-每天1 小时,学习实现一个简单的mini-React
    关于从0到1实现一个mini-React过程起因---为什么会有这篇文章还得从前几天加入了一个十分"内卷"的群聊开始崔学社mini-React.偶然看到朋友圈一叫mini-React的游戏副本课程,对这觉得这个课程听起来好像挺有意思的,大概看了一下课程内容,觉得很有意思,就果断加入了.然后就......
  • markdown语法笔记
    markdown语法笔记目录markdown语法笔记一、标题1.Setext风格的标题定义方式2.Atx风格的标题定义方式3.小结二、段落1.正文2.段落3.不分段换行4.缩进、空白行5.小结三、粗体与斜体四、文本高亮五、下划线、分割线与删除线六、列表1.普通列表2.TODO列表七、引用八、行......
  • 初级英语学习笔记01
     1.Thisis 和Isthis 交换使用 当我们指向一些非特定的物体和人时,使用冠词“a”如果是位置,大小,味道,颜色等,我们使用冠词“the”where在哪里who 谁what 什么onthe ISNOT否定NOISNOT isn'tIN ......
  • 重启React Native老项目的奇幻之旅:填坑实录与解决方案分享
    这两天为了重启五年前基于ReactNative(版本0.59.9)开发的老项目,经过各种填坑查询等操作,最终把它成功地运行起来了。在这篇文章中,我将详述那些遭遇的挑战以及对应的解决方案,以期为同样面临此类困境的开发者提供宝贵的经验参考。这个项目涉及到的环境基本版本信息如下:react:16.......
  • day11_我的Java学习笔记 (static_静态成员变量+静态成员方法_工具类、代码块_静态代码
    0.面向对象进阶1.static静态关键字1.1static是什么,static修饰成员变量的用法Java成员变量成员方法Python类(对象)属性类(对象)方法static修饰成员变量的应用:在线人数统计1.2static修饰成员变量的内存原理1.3static修饰成员方法的基本......
  • antd 的ProTable 的列加上ellipsis属性后,react-resizable会无法拖动列
    1、我尝试在列中加入ellipsis为true后,让内容超出后,用省略号表示。{title:displayName,dataIndex:propName,key:newPropName,width:widthIndex//,ellipsis:true}但是这引发了另外的问题。react-resizable配置的列可拖动无效了。额外的情况:obj.fixed='......