React Native
关注
分享
扫一扫
文章平均质量分 80
梦否
【@】bug修复，程序代做
展开
-
React基础—条件渲染
文章目录1. 条件渲染2. 分类2.1 普通函数组件中的条件渲染2.2 类组件中使用变量来替换2.3 使用&&运算符2.4 使用三目运算符1. 条件渲染在React中有多种方式可以用于实现条件渲染，以根据状态置来显示不同的UI界面，下面分别对其进行介绍。2. 分类2.1 普通函数组件中的条件渲染函数组件天然有利于编写js语句，可以很方便的用于返回所需的UI界面，比如下面的案例：// 函数组件，条件返回function Message(props) { if (props原创 2022-05-27 08:00:00 · 849 阅读 · 0 评论 -
React基础—父子组件通信
1. 父子组件通信在上一小节《React基础—PropTypes类型检查》中已经定义了父、子组件，接下来的工作就将在这个案例上做拓展。比如这里为列表右侧添加一个删除按钮，然后点击后删除本项条目。根据组件化的思想，且还未涉及到其余的父子控件传递数据（通信）的方式，这里就需要使用传递回调函数的方式来处理，也就是：在父控件中定义回调函数方法，然后通过props传递这个函数到子控件中；由子控件触发具体的事件函数，然后调用父控件传递的回调函数，通过参数传递本条数据的标识；比如下面的代码：// 子组件原创 2022-05-27 08:00:00 · 1974 阅读 · 0 评论 -
React基础—PropTypes类型检查
1. PropTypes类型检查自 React v15.5 起，React.PropTypes已移入另一个包中。请使用prop-types库代替。这里使用的方式是手脚架方式创建的项目，即：>create-react-app test所以可以直接在项目目录下package.json中看到当前react的版本："react": "^18.1.0",故而这里，我需要单独安装prop-types库依赖：npm i prop-types安装后就可以在package.json文件中看到："原创 2022-05-27 08:00:00 · 561 阅读 · 1 评论 -
React基础—Diffing 算法
1. Diffing 算法React是基于虚拟DOM树的，也就是要对比原来的结构和预期更新后的树结构。那么这个过程是怎么完成的，这里做一个简单的记录。从根节点开始比较，如果根节点为不同类型的元素时，React会拆卸原有的树并且建立起新的树。也就是会重建整个树结构。如果为相同类型的 React 元素时，React 会保留 DOM 节点，仅比对及更新有改变的属性。然后递归的完成对对子节点的对比操作；而，为什么我们在使用数组map遍历的时候，必须指定一个key属性？其实，这也是出于重建每个元素所带原创 2022-05-27 08:00:00 · 688 阅读 · 0 评论 -
React基础—refs介绍
1. refsReact核心就在于虚拟DOM，也就是在React中不总是直接操作页面真实的DOM元素，并且结合Diffing算法，可以做到最小化页面重绘。最为直观的为：在使用数组的map方法返回一个子元素的时候，通常需要指定一个key值，而这个key值就是用于diffing算法的对比关键，这里不详细介绍，将在下小节进行简单介绍。但有些时候不可避免的我们需要一种方法可以操作我们定义的元素标签，并作出对应的修改。在React中提供了一种访问DOM节点的方式，也就是这里的refs。在[官网](Refs原创 2022-05-27 08:00:00 · 3787 阅读 · 0 评论 -
React基础—state组件使用及分类
1. setState的简单实践和理解比如说，我们需要定义一个列表组件。当点击奇数列表的时候随机调换一下顺序；当点击偶数列表的时候在其后加=和不加=号之间切换。1.1 代码实现<body><div id="test"></div><script crossorigin src="./js/react.development.js"></script><script crossorigin src="./js/react-dom.原创 2022-05-27 08:00:00 · 616 阅读 · 0 评论 -
React基础—this关键字以及undefined问题
1. this关键字直观上来说，我们可以将其按照Java语言中的写法来构建一个最初始的代码逻辑，比如：class MyElement extends React.Component { constructor() { super(); this.datas= ["张三", "李四", "王五"] }// 点击处理 userClick() { console.log(this) } render() { return ( <ul&原创 2022-05-27 08:00:00 · 1079 阅读 · 0 评论 -
React基础—文件引入方式和理解
1. 简单使用1.1 环境其实和jQuery类似，也可以使用html的文件引入方式来开发一个简单的Demo。可以查阅文档：在网站中添加 React – React (docschina.org)开发环境引入文件：<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@1原创 2022-05-27 08:00:00 · 2021 阅读 · 0 评论 -
简单配置一个自用图床（二）
文章目录1. 前言2. 实现1. 前言在上篇简单配置一个自用图床（一）中复制一个图片还是不方便，因为在写看云笔记的时候，需要的是类似：<img src="xxx.png"/>所以这里需要添加另一个复制的按钮。且在上个版本中没有完成默认显示一天的数据，且可以手动切换显示图片。所以这里需要补充这一点，而在nodejs中为了完成客户端用户点击切换显示数据的设置，就后台选择加载对应的图片数据的时候，采用下面的逻辑实现：客户端处理用户点击事件，然后使用window.location.href原创 2022-01-05 22:02:48 · 587 阅读 · 2 评论 -
简单配置一个自用图床（一）
文章目录1. 前言实现1. 前言这里完成的工作也就是利用gitee来保存图片。因为在gitee中使用Gitee pages比较方便，可以得到图片的链接地址，用来外用。而我的出发点就是看云的空间有限。那么简单的使用git命令即可将图片上传到码云平台，然后我们找到图片名字，拼接一下就可以得到这个图片的访问路径。但是感觉确实比较麻烦。所以这里想到的一个略微简化的操作就是：用一个html页面来显示所有的图片，然后为每个图片提供一个copy link的按钮，点击即可复制到剪切板；由于后期可能存在图片比较原创 2022-01-03 21:24:01 · 461 阅读 · 0 评论 -
【React Native】了解Node——node第一课
文章目录1. 前言1.1 Node.js 与浏览器的区别2. 简单入门2.1 Node.js事件循环2.2 JavaScript 异步编程与回调2.3 读取Json文件案例2.3.1 直接导入json文件2.3.2 使用fs进行文件读取2.3.3 请求处理json1. 前言在接触到前端的一大堆框架的时候，越发觉得JavaScript个语言的通用。在接下来的将学习和了解nodejs。可以查看官网文档，并且这里也是以官网的文档为主要学习资料。值得注意的是，有很多开发者在nodejs上做了二次开发，也就是为了原创 2021-12-31 15:39:43 · 653 阅读 · 1 评论 -
【React Native】从React开始——网络请求之axios
文章目录1. 前言1.1 promise 是什么？2. axios2.1 解决跨域问题2.2 Get请求1. 前言偶然看到了这个axios这个框架，当然也找到了一个官方的文档说明。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。了解一些前端开发的大多都使用过AJAX来进行网络请求，那么为什么还需要axios这个库。我们知道AJAX的引入是为了页面的局部刷新，即：AJAX = 异步 JavaScript 和 XML（Asynchronous Java原创 2021-12-02 15:58:31 · 5288 阅读 · 0 评论 -
【React Native】从React开始——高级概念
文章目录1. 前言2. 内容2.1 Context2.2 错误边界2.2.1 错误边界应该放置在哪？2.2.2 关于 try/catch ？2.3 Refs 转发1. 前言 在博客【React Native】从React开始——核心概念中了解了React的一些基础用法，并了解到其实和之前学习的微信小程序开发十分相像。感兴趣微信小程序开发的同学可以去同步了解学习下。在【React Native】从React开始——React Router 基础一篇中学习了在React中路由的使用，通过路由，我们的单原创 2021-11-07 15:00:36 · 592 阅读 · 0 评论 -
【React Native】从React开始——React Router 基础
文章目录1. 前言2. React路由基础2.1 安装React Router2.2 Create React App2.3 React Router1. 前言在上篇博客【React Native】从React开始——核心概念中了解了React的一些基础用法，并了解到其实和之前学习的微信小程序开发十分相像。感兴趣微信小程序开发的同学可以去同步了解学习下。在这篇博客中，将继续学习React路由基础部分的内容。当然这部分内容我在官网中并没有找到，所幸在网上还是找到了一个开源的项目说明，即getting st原创 2021-11-04 16:24:27 · 940 阅读 · 0 评论 -
【React Native】从React开始——核心概念
文章目录1. 前言2. React2.1 编辑器配置语法高亮2.2 Hello World!2.3 取消VSCode的自动代码折叠2.4 语法和使用2.4.1 元素渲染2.4.2 组件2.4.2.1 函数组件2.4.2.2 渲染组件2.4.3 生命周期2.4.3 事件处理2.4.4 列表2.4.5 表单2.4.6 状态提升2.4.7 组合2.4.8 React 哲学3. 后记1. 前言 在上一篇【React Native】回归跨平台开发——细细碎碎念念中大致介绍了如何搭建环境的问题。在接下来的日子原创 2021-10-30 22:31:40 · 851 阅读 · 1 评论 -
【React Native】回归跨平台开发——细细碎碎念念
文章目录1. 前言2. React Native环境配置1. 前言 终于秋招对我来说告一个段落了。前前后后投递了二三十家公司，最终进入面试的一共十二家。走到最后的一共六家，分别是阿里、涂鸦智能、小红书、茄子、百度和京东。于今天正式签了阿里，也希望之后会更好。虽然薪资没有之前做项目的另一个同学高，但是我觉得自己也已经满足了。在面试的过程中确实也发现了自己的一些不足之处，也明白了自己的生活和技术方向的努力改进和提高方向。在接下来的日子里，将更加磨砺前行。至于为什么说是回归跨平台开发，因为刚打开了一原创 2021-10-29 17:28:34 · 360 阅读 · 0 评论