React
前端小黑
never give up never give in
展开
-
Vue3.0都快发布了,还不看看Vue和React的区别
现在常用的三大框架中,常常会拿Vue和React来做比较,上周尤大又开了个Vue3.0beta的直播,所以就想着写篇两者比较的博客,拖着拖着拖到五一,总算整出来了。实际上之所以会想去写这篇文章,也是尤大在直播里提到了好几次React的内容,在更新Vue3.0上参考了很多React的功能,而之前虽然学过React,但也就只是做个todo-list玩玩而已,没做过实际的项目,所以也借此来熟悉一下Re...原创 2020-05-01 19:08:51 · 5293 阅读 · 0 评论 -
React学习笔记(十)React Hook
Hook是React16.8的新增特性,让我们能在不使用class的情况下使用state和其他的React属性Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook不能在class中使用。React提供了一些内置的Hook,也允许我们去自定义Hook,useState就是其中的一个内置Hook(有关内置Hook API,请移步https://z...原创 2020-04-23 11:09:42 · 355 阅读 · 0 评论 -
在React中如何判断组件是函数还是类
在React中,支持使用class和function来声明一个组件,而实际上,我们在使用这个组件时,因为class和function的不同,所以我们的使用也存在不同我们知道,function是可以直接调用的,但是class是需要通过new去创建一个实例来使用的function// 你的代码function Greeting() { return <p>Hello</p...原创 2020-04-21 23:39:06 · 2553 阅读 · 0 评论 -
react-router实现重定向多种方式(补充中)
正如我们所知,react-router是用来管理路由的,,在路由管理中,一个非常重要的功能就是重定向,下面列举一些react-router实现重定向的方法1. 使用Route组件中继承自Router组件的props.history2. 使用react-router-dom里面的useHistory()3. 使用react-router-dom里面的Redirect组件...原创 2019-10-12 22:51:04 · 12185 阅读 · 0 评论 -
使用react-router进行多级路由匹配
在React-router学习笔记 react-router基本使用中,我做了精确的路由匹配,但是实际上,我们在进行路由匹配的时候,一般是会进行多级路由的匹配,所以这里说说如何进行多级路由的匹配在使用react-router-dom的Link的时候,我们需要使用to来指定路由,而Route用来显示路由对应得内容,默认情况下,Route 会进行路由的模糊匹配<Route path="/to...原创 2019-10-09 17:06:33 · 5885 阅读 · 0 评论 -
React-router学习笔记 react-router基本使用
和Vue有vue-router来管理路由一样,React中也有一个用于管理路由的react-router,基本的使用也是差不多的,下面通过一个项目的简单搭建来学习基本的使用方法搭建项目首先使用create-react-app脚手架搭建一个项目,搭建完成后将react-router,react-router-dom安装到本地项目create-react-app mydemocnpm i r...原创 2019-10-08 18:35:04 · 439 阅读 · 0 评论 -
React学习笔记--在组件化开发中使用redux
在组件化开发中,不管是使用Vue还是React,都会遇到组件间数据传递的问题,两个框架都有各自的解决方法,一般采用的方法无非是将数据放到全局供任何地方调用通过组件间层层传递来共享数据通过发布订阅的方式...原创 2019-10-07 02:02:29 · 701 阅读 · 0 评论 -
React学习笔记 在todolist中加入redux
在之前的学习中,我已经使用React完成了todolist,这里我要在原来的基础上加上redux原来的todolist:React入门 制作简单的todolist首先,通过npm 安装reduxnpm i redux --save在原来的目录基础上,添加store文件夹,放入index.js来输出store,reducer.js来输出reducer在index.js中创建并输出sto...原创 2019-10-07 02:01:41 · 187 阅读 · 0 评论 -
React学习笔记(九)refs 获取DOM节点/自定义组件的实例
React和Vue一样,不建议操作DOM,但是如果我们在某个场景必须操作DOM,那么也可以使用refs来实现。refs的基本使用refs的创建refs是通过React.createRef()来创建的,通过使用ref属性来对应某个元素。一般在constructor中赋值给某个实例属性来达到多次复用的作用class App extends React.Component{ rende...原创 2019-10-04 21:27:37 · 3023 阅读 · 0 评论 -
React学习笔记(八)context
在使用组件化开发的时候,我们往往会遇到组件间传递数据的问题,如果一个数据需要从组件树的顶端传递到底端,且两个组件之间有非常多的组件,那我们要通过props来一级一级传递就相当麻烦了,所以在React中,我们可以使用context来为一个组件树创建一个“全局的变量”。context的基本使用// 创建一个context// light为默认值const ThemeContext = Rea...原创 2019-10-04 11:45:06 · 232 阅读 · 0 评论 -
React学习笔记(七) fragments
我们知道,对于vue和react来说,一个组件最后return的必须只有一个根标签,如果有多个标签的话,那么就会报错,如果我们要在一个地方放入多个标签如列表li,我们的ul写在子组件中会比较好,但是这样的话我们在父组件中要对里面的li标签进行增减有时就需要修改子组件,比较麻烦,我们希望子组件可以有多个根元素,使用react时,我们可以使用fragments来解决这个问题基本用法看看下面的例子...原创 2019-10-03 22:31:01 · 442 阅读 · 0 评论 -
React入门 制作简单的todolist
首先,我直接使用create-react-app来搭建一个简单的项目目录如下将src中除了App.js,index.js,serviceWorker.js之外的文件删除,目录改为如图component下存放组件,assets下存放静态文件,这里为了方便我只用一个css文件重新编辑index.js和App.js如下// index.jsimport React from 'react...原创 2019-09-27 23:58:53 · 410 阅读 · 0 评论 -
react学习笔记(六)列表渲染
渲染多个组件和Vue里面有v-for来让我们根据一个数组内的内容进行渲染不同,React中并没有提供这种在标签中的“属性”,要在React中渲染多个组件,我们通常使用JavaScript中的方法来实现在Vue中,如果我们要将下面这个数组的内容const arr=[{name:'John',age:18},{name:'Alice',age:20}]渲染成<div class="...原创 2019-09-27 19:16:25 · 194 阅读 · 0 评论 -
react学习笔记(五) 条件渲染
在React中,我们有时只想渲染部分组件,而在某些状态发生改变时渲染另一部分组件,此时就要使用条件渲染if-else我们可以通过if-else来判断状态值,从而渲染不同的组件function UserGreeting(props) { return <h1>Welcome back!</h1>;}function GuestGreeting(props) {...原创 2019-09-26 00:34:52 · 161 阅读 · 0 评论 -
react学习笔记(四) 组件常用的生命周期方法
React的每个组件都有自己的生命周期,我们可以利用这些生命周期对应的方法,在组件的不同时期触发特定的方法,来达到我们想要的效果生命周期constructorconstructor方法会在挂载时被首先调用,事实上,如果我们不需要去初始化state或者进行方法绑定,我们完全可以不为组件构造该函数使用constructor时,要注意要先在开头写上super(props),否则this.pro...原创 2019-09-26 00:34:42 · 233 阅读 · 0 评论 -
react学习笔记(三) 组件
组件将我们的页面拆分成不同的块,让我们更易于去维护这些内容React中的组件结构分类React中的组件根据结构可分为函数组件和class组件函数组件顾名思义,函数组件即为函数形式的组件,举例如下function MyComponent(props){ return <div>Hello {props.name}</div>}该组件名为MyComponen...原创 2019-09-26 12:14:15 · 200 阅读 · 0 评论 -
react学习笔记(二) React元素
元素元素是React中的最小单元,一个简单的元素如下const element = <div id='root'>Hello World</div>元素看似和DOM一样,实则是一个创建开销很小的对象,由React DOM来负责将其与DOM保持一致React元素不是真正的DOM,被称为虚拟DOM(virtual DOM),所以React元素无法调用DOM元素上原生...原创 2019-09-26 12:14:06 · 448 阅读 · 0 评论 -
react学习笔记(一) jsx语法
jsx是我们在react中编写组件的一种语法,实际上jsx只是JavaScript的一种语法糖jsx让我们能更为方便地在JavaScript中书写node节点,通过使用html的格式,让我们更为直观地看到节点的结构jsx的几种简单用法1.直接创建一个node节点const element = <h1>Hellow word!</h1>;这里将<h1>...原创 2019-09-26 00:33:45 · 435 阅读 · 0 评论