![](https://img-blog.csdnimg.cn/20201022163656773.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
react
react学习实践
居安_
少壮工夫老始成。
展开
-
React服务端渲染框架Next.js入门之旅四:路由的6个钩子事件
钩子事件:当路由发生变化时可以监听到这些事件,从而执行对应的函数。钩子事件必须要引入router:import Router from 'next/router' 六个钩子事件如下:routeChangeStartrouteChangeStartrouterChangeCompletebeforeHistoryChangerouteChangeErrorhashChangeStarthashChangeComplete验证钩子事件在index.js中编写监原创 2020-11-24 12:02:36 · 1189 阅读 · 1 评论 -
React服务端渲染框架Next.js入门之旅三:路由跳转和参数传递
不带参数,静态路由;带参数,根据参数不同显示不同内容,动态路由。一、路由跳转标签式跳转在pages下新建juanA.js以及juanB.js作为两个跳转页面。juanA.js:import Link from 'next/link'export default ()=>( <> <div>juanA page</div> {/* 文档中规定必须放a标签,Link下只能有一个父级标签,即多个标签要用一个a原创 2020-11-24 11:21:59 · 1759 阅读 · 1 评论 -
React服务端渲染框架Next.js入门之旅二:Next.js的Page和Component使用
新建Page在pages文件夹(专门存放页面的文件夹)下新建juan.js:function Juan(){ return ( <button>Juan按钮</button> )}export default Juan启动项目:yarn devNext.js会自动配置路由。访问网址http://localhost:3000/juan:深层次的路由用文件夹来实现。假设要访问http://localhost:3000原创 2020-11-24 10:14:14 · 865 阅读 · 0 评论 -
React服务端渲染框架Next.js入门之旅一:创建项目
Next.js是一个轻量级的React服务端渲染应用框架。创建Next.js项目手动创建打开命令行工具,进入想要放项目的文件夹下,创建一个新的文件夹用来放置Next项目:mkdir NextDemo进入NextDemo文件夹,进行项目初始化(建立package.json):npm init用vscode打开NextDemo,安装依赖包:npm install --save react react-dom next安装好了依赖包:手动增加一些配置项(pack原创 2020-11-23 22:44:11 · 330 阅读 · 0 评论 -
React Hooks学习之旅七:自定义Hooks函数
监听窗口大小案例自定义的Hooks函数命名必须以use开头。新建Example9.js文件:import React, { useState,useEffect,useCallback } from 'react';/**自定义函数命名必须use开头 *//**监控窗口大小 */function useWinSize(){ const [size,setSize] = useState({ width:document.documentElement.clien原创 2020-11-19 19:07:53 · 407 阅读 · 0 评论 -
React Hooks学习之旅六:useRef获取DOM元素和保存变量
useRef可以获取DOM元素和保存普通变量。获取DOM元素新建Example8.js,通过useRef获取input框DOM元素:import React, { useRef } from 'react';function Example8(){ const inputEl = useRef(null);//获取input DOM元素 const onBtnClick = ()=>{ inputEl.current.value = "Hel原创 2020-11-19 18:52:10 · 5127 阅读 · 0 评论 -
React Hooks学习之旅五:useMemo解决子组件重复执行问题
子组件重复执行对性能损耗非常大。在src文件夹下新建Example7.js:import React, { useState } from 'react';function Example7(){ const [xiaohong,setXiaohong] = useState('小红在代课状态'); const [zhiling,setZhiling] = useState('志玲在代课状态'); return ( <>原创 2020-11-19 18:27:37 · 1590 阅读 · 1 评论 -
ReactHooks学习之旅四:useReducer使用
增减计数器小案例新建Example5.js文件:import React, { useReducer } from 'react';function ReducerDemo(){ const [count,dispatch] = useReducer((state,action)=>{ switch(action){ case 'add':return state + 1; case 'delete':return原创 2020-11-19 15:12:48 · 270 阅读 · 0 评论 -
React Hooks学习之旅三:useContext父子组件传值
createContext函数创建上下文,useContext函数接收父组件传递过来的数据。新建一个Example4.js文件,实现父子组件传值:import React, { useState ,createContext , useContext } from 'react';const CountContext = createContext();//想共享的要创建上下文//声明一个子组件,接收countfunction Counter(){ let count = use原创 2020-11-17 17:16:00 · 427 阅读 · 0 评论 -
React Hooks学习之旅二:useEffect替代生命周期函数
useEffect可以替代生命周期函数componentDidMount和componentDidUpdate。useEffect替代componentDidMount和componentDidUpdate修改Example.js:import React, { useState,useEffect } from 'react';/**useState可以设置和改变状态 */function Example(){ const [count,setCount] = useState原创 2020-11-17 14:52:01 · 1896 阅读 · 0 评论 -
React Hooks学习之旅一:搭建ReactHocks学习环境
新建一个ReactHooksDemo文件夹,在该文件夹下新建React项目。create-react-app demo01原创 2020-11-16 19:30:57 · 191 阅读 · 0 评论 -
ReactRouter学习之旅五:后台动态获取路由进行配置
假设路由不是写死的,而是通过从后台获取的数据来动态改变,例如权限不同的人看到的页面是不一样的。那么这个时候应该怎么样去配置路由呢?这里我们通过一个数组来模拟从后台获取的数据,进行一个简单的路由配置。修改AppRouter.js文件:import React from 'react';import {BrowserRouter as Router,Route,Link} from 'react-router-dom';import Index from './Pages/Index';im原创 2020-11-14 20:53:03 · 1351 阅读 · 0 评论 -
ReactRouter学习之旅四:嵌套路由
要实现的小案例如下:搭建项目基础新建一个项目来完成我们的新案例:create-react-app demo02安装react-router:npm install --save react-router-dom照例清除一下src文件夹下除index.js外的其他文件。在src文件夹下新建Pages文件夹,Pages下新建video(视频教程)和workplace(职场技能)文件夹。src文件夹下新建AppRouter.js文件,AppRouter作为首页组件,首页组件一般原创 2020-11-14 20:34:22 · 244 阅读 · 0 评论 -
ReactRouter学习之旅三:Redirect重定向
新建一个Home组件用于重定向:import React, { Component } from 'react';//要求进入Index就重定向到Homeclass Home extends Component { constructor(props) { super(props); this.state = { } } render() { return ( <h2>我是Home组件-Redirect<原创 2020-11-14 10:39:03 · 1058 阅读 · 0 评论 -
ReactRouter学习之旅二:动态传值
我们让Index和List页面以列表的形式传值,点击Index中的列表某项跳转到对应改项的List页面。设置规则在AppRouter.js文件中设置List页面根据接收到的参数显示不同内容,接收参数id:<Route path="/list/:id" component={List}/>这里规定了List页面必须被传递一个参数id,因此修改一下初始地址,传递一个默认值123:<li><Link to="/list/123">列表</Link&原创 2020-11-14 10:12:53 · 234 阅读 · 0 评论 -
ReactRouter学习之旅一:AppRouter安装和基础环境搭建
ReactRouter是基于React的强大的路由库。安装创建一个新的项目:create-react-app XXX删除src下除index.js外的其他文件。安装react-router:npm install --save react-router-dom基础环境搭建新建AppRouter.js:import React from 'react';import { BrowserRouter as Router,Route,Link } from 'react原创 2020-11-13 23:51:26 · 395 阅读 · 0 评论 -
Redux学习之旅十四:React-Redux代码优化
TodoList组件中没有任何的业务逻辑,只有一个render,所以可以改写为无状态组件:import React from 'react';import { connect } from 'react-redux';const TodoList = (props) => { //js结构赋值 let { inputValue, inputChange, clickBtn, list, deleteItem } = props; return (原创 2020-11-13 23:01:46 · 105 阅读 · 0 评论 -
Redux学习之旅十三:React-Redux制作TodoList列表
这里没有使用Ant Design,因此样式非常简单。 TodoList.js:import React, { Component } from 'react';import {connect} from 'react-redux';class TodoList extends Component { render() { return ( <div> <div> .原创 2020-11-13 22:50:05 · 79 阅读 · 0 评论 -
Redux学习之旅十二:React-Redux的Provider和Connect
在index.js文件中引入Provider提供器,<Provider>下的组件都可以使用store。import React from 'react';import ReactDOM from 'react-dom';import TodoList from './TodoList';import {Provider} from 'react-redux';import store from './store';// 以下Provider中的组件或标签都可以使用store中的原创 2020-11-13 19:34:56 · 308 阅读 · 0 评论 -
Redux学习之旅十一:React-Redux安装
React-Redux可以简化Redux的流程。一、新建项目我们新建一个项目,重新用React-Redux来实现。create-react-app demo02删除src文件下的文件,只保留index.js文件。二、安装React-Redux新建终端,输入以下命令安装react-redux:npm install --save react-redux安装redux:npm install --save redux新建TodoList组件:import原创 2020-11-13 19:01:52 · 488 阅读 · 0 评论 -
Redux学习之旅十:Redux-saga的配置和使用
这里我们学的中间件都是Redux的中间件,不是React的中间件。Redux-saga也是非常常用的中间件,和Redux-thunk不相上下,但比thunk要复杂一些,这里我们也来学习一下。一、安装npm install --save redux-saga二、配置进入store/index.js,删除之前配置的thunk,引入saga:import createSagaMiddleware from 'redux-saga';store/index.js:import原创 2020-11-13 16:17:17 · 219 阅读 · 0 评论 -
Redux学习之旅九:Redux-thunk的使用
将后台请求数据放到中间件中来实现。在actionCreaters.js中引入axios:import axios from 'axios';新增一个函数getTodoList,将axios请求数据放到这里:export const getTodoList = ()=>{ return (dispatch)=>{ axios.get('/mock/5fa9f41e234c9b0d8babebae/ReactDemo01/xiaojiejie')原创 2020-11-13 15:09:24 · 92 阅读 · 0 评论 -
Redux学习之旅八:中间件Redux-thunk的安装配置
npm install --save redux-thunk原创 2020-11-13 11:30:04 · 253 阅读 · 0 评论 -
Redux学习之旅七:Axios结合Redux异步获取数据
因为是新建的项目,所以需要再安装一下axios:npm install --save axios原创 2020-11-13 08:52:59 · 316 阅读 · 0 评论 -
Redux学习之旅六:无状态组件
无状态组件只包含一个函数。使用无状态组件的原因是因为其没有state,可以省略生命周期函数,没有包含任何业务逻辑,性能比有状态组件要高。能使用无状态组件尽量使用无状态组件。在之前我们创建的TodoListUI中只包含了UI部分,可以改造为无状态组件,代码如下:import React from 'react';import 'antd/dist/antd.css';import { Input, Button, List } from 'antd';const TodoListUI =原创 2020-11-12 18:30:22 · 105 阅读 · 0 评论 -
Redux学习之旅五:组件UI和业务逻辑的拆分
原先的TodoList.js文件中既包含了UI部分,也包含了业务逻辑操作。为了减小耦合度和提高开发效率,我们一般将UI和业务逻辑拆分开来。将TodoList中的UI部分转移到一个新的文件TodoListUI.js中:import React, { Component } from 'react';import { Input, Button, List } from 'antd';class TodoListUI extends Component { render() {原创 2020-11-12 16:21:48 · 277 阅读 · 0 评论 -
Redux学习之旅四:Redux制作TodoList列表
TodoList.js文件:import React, { Component } from 'react';import 'antd/dist/antd.css';import { Input , Button ,List} from 'antd';import store from './store'; import {changeInputAction,addItemAction,deleteItemAction} from './store/actionCreaters';clas原创 2020-11-12 15:54:04 · 93 阅读 · 0 评论 -
Redux学习之旅三:Redux DevTools安装
安装Redux DevTools在火狐浏览器的扩展工具里搜索Redux DevTools,点击安装。安装成功F12打开控制台,会看见按照提示在store文件夹下的index.js文件中添加代码:import {createStore} from 'redux';import reducer from './reducer';const store = createStore( reducer, window.__REDUX_DEVTOOLS_EXTENSION_原创 2020-11-12 11:43:41 · 353 阅读 · 0 评论 -
Redux学习之旅二:创建Redux仓库store和reducer
首先要安装Redux,打开终端输入以下命令:npm install --save redux一、编写创建store仓库store是Redux工作流程中非常重要的一部分,它负责所有数据的管理。首先在src目录下新建一个store文件夹,并在store下新建index.js文件。index.js就是整个项目的store文件,该文件代码内容如下:import {createStore} from 'redux';//引入createStore方法const store = createS原创 2020-11-11 22:05:25 · 316 阅读 · 0 评论 -
Redux学习之旅一:Ant Design
一、安装npm install antd --save原创 2020-11-11 16:08:25 · 172 阅读 · 0 评论 -
react学习之旅十二:React动画库react-transition-group
一、安装在终端输入npm install react-transition-group --save二、使用react-transition-group插件包含三个库:Transition、CSSTransition以及TransitionGroup。使用时需要引入动画库(引入需要使用的库即可):import { Transition, CSSTransition, TransitionGroup } from 'react-transition-group';CSSTran原创 2020-11-10 16:16:50 · 274 阅读 · 0 评论 -
react学习之旅十一:React远程数据请求
React使用封装的Axios请求远程数据。一、安装Axios根据项目需要在终端输入以下命令中的一条(这里我用的是npm install -save axios):npm install axios //安装到node_modules目录下,不写入依赖npm install -g axios //安装到全局npm install -save axios //安装到生产环境中(项目跑起来必须要)npm install -save-dev axios原创 2020-11-10 11:03:02 · 285 阅读 · 0 评论 -
react学习之旅十:生命周期函数
一、认识React生命周期函数生命周期函数:在某一时刻组件会自动调用执行的函数。React生命周期的四个阶段:初始化阶段、虚拟DOM挂载阶段、更新阶段、DOM卸载阶段。初始化阶段:constructor:严格上来说属于ES6语法,并不是React独有的生命周期,但是可以当作React的初始阶段。挂载阶段:componentWillMount:DOM挂载之前执行。render:挂载时执行。状态state或属性props发生改变时就会重新渲染。componentDidMoun原创 2020-11-09 22:05:28 · 448 阅读 · 0 评论 -
react学习之旅九:ref属性
ref允许直接访问DOM元素或组件实例。<input id="serve" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} ref={(input)=>{this.input=input}}/>使用ref后将this.input与input进行了绑定,inputChange函数不需要接收参数后通过e.target.原创 2020-11-09 16:18:25 · 147 阅读 · 0 评论 -
react学习之旅八:PropTypes传值校验
传值校验非常重要,否则项目一旦复杂起来很容易出现业务逻辑错误。传值校验的代码都写在类外。一、传值校验在之前的小姐姐服务菜单中没有进行父子组件的传值校验,修改XiaojiejieItem.js如下:XiaojiejieItem.propTypes = { content:PropTypes.string,//必须为string类型 index:PropTypes.number,//必须为数字 deleteItem:PropTypes.func//必须为方法}二、原创 2020-11-09 15:51:27 · 158 阅读 · 0 评论 -
react学习之旅七:React Developer Tools调试工具
安装因为安装到Chrome需要科学上网,所以我将调试工具安装到了火狐浏览器上。首先打开火狐浏览器,选择“附加组件”这一项在“扩展”中搜索React Developer Tools选择该项进行安装,安装成功后会在菜单栏中出现一个react的灰色小图标可以在浏览器中输入我们项目的地址进行访问,会发现小图标变为橙色,说明我们的项目用react开发并且还没有上线按F12,可以清楚的看到相关数据这个调试工具可以替代我们用来调试的console.log(),跟踪数据的变化原创 2020-11-08 20:33:13 · 1064 阅读 · 0 评论 -
react学习之旅六:react单项数据流
React的单向数据流:为了避免多个子组件修改父组件的数据而产生矛盾,React规定子组件不可以修改父组件的数据。如果要修改,只能通过父组件向子组件传递方法的方式。比如之前用到的小姐姐服务菜单,子组件XiaojiejieItem被点击后需要删除父组件的list数组中的数据。如果通过父组件传递list值给子组件,子组件直接进行修改的方式来删除,将会报错。Xiaojiejie.js:XiaojiejieItem.js:点击删除报错:子组件只能通过父组件传递来的方法修改父组件的数据原创 2020-11-08 20:10:06 · 357 阅读 · 0 评论 -
react学习之旅五:Component组件拆分、传值
使用之前的小姐姐菜单样例在真正的开发中,会将一个复杂的页面拆分为很多个组件,使组件更加简单、便于维护,同时更加具有复用性。这里将小姐姐组件简单地拆分为两个部分,第一部分仍然是Xiaojiejie组件(父组件),第二部分新建为XiaojiejieItem组件(子组件):一、拆分组件新建XiaojiejieItem.js,内容如下:import React, { Component } from 'react';class XiaojiejieItem extends Compon原创 2020-11-08 19:48:24 · 252 阅读 · 0 评论 -
react学习之旅四:Simple React Snippets插件安装
Simple React Snippets插件能够帮助我们快速地生成代码,手速升级必备。安装点击VSCode中的扩展工具,搜索Simple React Snippets,点击安装即可使用点击该插件,进入其详细介绍页面,可以看到使用的快捷代码譬如输入imrc...原创 2020-11-08 14:08:21 · 248 阅读 · 0 评论 -
react学习之旅三:JSX语法避坑
仍然使用上一章的小姐姐菜单样例一、注释标签中注释:多行注释:{/**/}单行注释:{//}二、引用CSSsrc下创建css文件,文件名style.css.input{ border:3px solid #ae7000}在Xiaojiejie组件中引入css文件:import './style.css';给input添加css效果,不要使用class,会与class类混淆,使用className:<input classNa原创 2020-11-08 13:51:30 · 160 阅读 · 0 评论