React
从零学习主流React框架系列笔记
方格田
这个作者很懒,什么都没留下…
展开
-
React项目打包上线
完成React项目的开发之后,需要将前后端进行联调,而这一过程便要将我们已经开发完成的项目进行打包1.打包在React项目的主文件夹下使用命令:npm run build2.启动静态服务器依旧在该文件夹下使用命令:npm install -g serveserve -s build(如果你的命令行是用Windows PowerShell则使用“serve.cmd -s bu...原创 2020-04-21 20:58:48 · 1355 阅读 · 0 评论 -
React框架(十九)在使用style-components的同时引入.css文件
什么是style-components?style-components是针对React写的一套css in js框架,简单来讲就是在js中写css。相对于与预处理器(sass、less)的好处是,css in js使用的是js语法,不用重新再学习新技术,也不会多一道编译步骤,无疑会加快网页速度。作者:恰到半生链接:https://www.jianshu.com/p/27788be906...原创 2020-04-12 18:33:29 · 789 阅读 · 0 评论 -
React框架(十八)Immutable与redux-immutable的使用
Immutable官方文档:https://immutable-js.github.io/immutable-js/docs/https://github.com/immutable-js/immutable-js参考:为什么要在React中使用Immutable?Immutable中文文档-博客redux-immutable官方文档:https://github.com/gaju...原创 2020-03-19 21:03:06 · 246 阅读 · 0 评论 -
React框架(十七)React-redux的使用
官方网站:https://react-redux.js.org/项目地址:https://gitee.com/XiaoYuZhou233/React-TodoList/tree/Redux7/my-app1.安装用npm命令安装npm install --save react-redux2.项目入口文件index.js是整个项目的入口文件,在这里开始使用import React f...原创 2020-03-16 18:10:41 · 215 阅读 · 0 评论 -
React框架(十六)发送ajax请求——Redux中间件的使用
不使用中间件整体流程:发送ajax请求放在componentDidMount生命周期函数中得到响应后创建action,即定义initListAction(data)把action传递给storeReducer处理响应数据并返回TodoList组件:componentDidMount() { axios.get('/api/todolist').then((res)...原创 2020-03-15 16:16:40 · 536 阅读 · 0 评论 -
使用Redux并借助Ant Design的List.Item时循环渲染传参的三种写法
父组件:TodoListUI组件:TodoListUI子组件:TodoItem现在要做这样一件事情:父组件的DOM元素渲染完全交给UI组件来完成,即每次添加的列表项在UI组件中循环渲染。我们使用Ant Design的List.Item来完成点击列表项就可以删除该项的动作时,就要对父组件传递一个重要参数index,即列表项的下标,而父组件中仅仅实现Redux工作流并使用了UI组件:=>...原创 2020-03-15 10:37:17 · 1189 阅读 · 0 评论 -
React框架(十五)Redux——UI组件、容器组件与无状态组件
在使用Redux的时候,我们将页面渲染部分(即render函数)和页面逻辑部分都放在了一个组件中。为了便于维护,我们可以将页面渲染单独拿出来放到一个文件中,用来做纯页面渲染部分,这种组件叫UI组件。而剩下的实现页面逻辑的组件叫做容器组件1.新建一个UI文件2.将TodoList中的渲染部分移动到TodoListUI.js中//*UI组件只负责渲染*/import React, {Fra...原创 2020-03-14 22:35:37 · 284 阅读 · 0 评论 -
React框架(十四)Redux中的代码优化
题外话——react中Eslint配置 让你的代码更规范——————————————————————————————————一、ActionType的拆分在之前的代码中,我们在使用action的时候,会定义一个字符串类型的type,这个帮助Redux知道组件要做什么事情,而当字符串出现拼写错误的时候,却不会在控制台出现警告,原因在于:程序会对未定义的常量或者变量报错,而不会对字符串报错,这很...原创 2020-03-13 21:34:47 · 103 阅读 · 0 评论 -
React框架(十三)Redux实现TodoList完整功能
项目使用Redux之前,加入了Antd图形框架的使用——AntDesign的使用即本次开发的起点一.从“改变输入框的值”看Redux的工作流程需求分析:把输入框中用户输入的内容实时显示到输入框中下面是实现过程:1.Reducer中设置默认数据:=>默认数据const defaultState={ inputValue: '', // input框中的内容 lis...原创 2020-03-13 15:45:25 · 218 阅读 · 0 评论 -
React框架(十二)Redux中Store的创建
1.创建Reducer文件目录如下:在src目录下添加store文件夹,创建reducer.js文件// 默认数据const defaultState={ inputValue: '', // input框中的内容 list: ['one', 'two'] // 列表中的每一项};//导出export default (state=defaultState,acti...原创 2020-03-13 14:35:10 · 602 阅读 · 0 评论 -
React框架(十一)Redux简介与工作流程
Redux简介React仅仅为视图层框架,当父子组件很复杂的时候,传值会变得极其困难,这时便需要一个数据层框架来结合使用,才使得构建一个大型项目成为可能。基于Redux,所有组件的数据都存储到一个公共区域Store,每个组件只需改变Store中的数据,当Store数据发生变化,其它各个组件便会感知,从而进行通信。Rudex工作流程下面做一个图书馆借阅图书的比喻:Store(数据的公共...原创 2020-03-11 15:04:42 · 298 阅读 · 0 评论 -
React框架(十)动画效果实现的两种方式
1.使用CSS实现动画本例中,只保留了App这一个组件,代码如下:import React, {Component, Fragment} from 'react';import './style.css' //引入的CSS文件class App extends Component { constructor(props) { super(props); ...原创 2020-03-11 11:09:17 · 693 阅读 · 0 评论 -
React框架(九)使用Charles模拟前后端数据交互
安装官网安装:免费试用版使用面板长这样,依次点击Tools-Map Local Settings-Add原创 2020-03-07 16:41:47 · 280 阅读 · 0 评论 -
React框架(八)生命周期函数详解
含义生命周期函数指在某一个时刻组件会自动执行的函数,如render()函数(组件发生变化时重新渲染)、constructor()函数(组件被创建的时候自动调用,是ES6中含有的函数,并不是React特有,与生命周期函数没有太大区别)函数介绍过程:初始化、挂载、更新、卸载1. 初始化利用constructor()函数进行初始化,设置属性props和状态state2.挂载 =>当...原创 2020-03-03 10:00:53 · 199 阅读 · 0 评论 -
React框架(七)深入理解虚拟dom
参考:https://www.cnblogs.com/cazj/p/10927879.htmlReact中的核心概念1、DOM的本质: 浏览器中的概念,用js对象来表示页面上的元素,并提供操作DOM对象的API2、react中的虚拟DOM:是框架中的概念,是程序员用js对象来模拟页面上的DOM和DOM 的嵌套3、为什么要实现虚拟DOM:为了实现页面中DOM元素的高效更新4、DOM和虚拟D...原创 2020-02-27 16:10:28 · 351 阅读 · 0 评论 -
React框架(六)PropTypes与DefaultProps
PropTypes用于对父组件传递给子组件值类型的强校验引入:import PropTypes from 'prop-types'使用:TodoItem.propTypes={ // isRequired表示父组件必须要传递给子组件这个属性,否则报错:The prop `test` is marked as required in `TodoItem`, but its value is...原创 2020-02-25 10:04:53 · 199 阅读 · 0 评论 -
React框架(五)React developer tools安装与使用
安装方法一:chrome浏览器输入网址:http://www.cnplugins.com/,搜索【react】,下载安装方法二:https://www.crx4chrome.com/crx/3068/,谷歌下载.crx后缀的文件,火狐下载.xpi后缀的文件插件下载后,打开扩展程序,将文件拖入面板安装即可。使用打开控制台,可以看到有【组件】选项该组件可以实时监控state,减少我们用控...原创 2020-02-09 11:18:49 · 1259 阅读 · 0 评论 -
React框架(四)关于该框架的思考小结
命令式开发与声明式开发首先了解两者的区别命令式开发关注计算机的执行步骤,每一步都是需要我们关注的。如搭建一个网页,需要我们关注每一个dom元素。声明式开发不告诉计算机的问题领域,让计算机明白目标而非流程,即只告诉计算机要做什么,而不关注计算机如何去做。React框架即为声明式开发,就好像盖一座大楼(网页),不管每块砖(dom元素)怎么砌,只给它一张图纸(数据),然后自己自动搭建(渲...原创 2020-02-09 10:36:10 · 132 阅读 · 0 评论 -
npm安装脚手架工具常见错误解决方法
1.npm install -g xxx全局安装出错第一种错误:文件夹权限问题报错:Unhandled rejection Error: EPERM: operation not permitted, mkdir 'C:\Program Files (x86)\nodejs\node_cache\_cacache'npm ERR! cb() never called!npm ERR!...原创 2019-11-19 13:45:47 · 3790 阅读 · 1 评论 -
React框架(三)响应式设计思想和事件绑定
响应式设计思想在js中需要直接操作dom元素来控制页面,React的设计思想和以前直接操作dom是完全不同的,react是一个响应式的框架,它在做编程的时候,强调的是我们不要直接操作dom。我们操作的是数据,通过数据的变化,react会自动感知到数据的变化,自动的帮你去生成dom。所以在写代码的时候,我们再也不用关注dom相关的操作了,我们只需要关注数据层的就可以了。事件绑定我们要实现的功...原创 2019-11-23 17:09:08 · 532 阅读 · 0 评论 -
React框架(二)React组件
React组件化的思想将项目中的页面按照功能(或者是位置等等)划分为一个个块儿。如果有的块儿是每个页面或者大多数页面共有的部分,比如导航栏、菜单栏、翻页模块之类的,就写在公共组件里面,然后再需要的页面进行渲染。如果是某个页面特有的模块,就给每一个页面单独写一个文件,里面定义该模块的组件并于公共组件结合进行渲染。某个页面内若是有新的弹窗,则在父页面下建立新的文件进行组件的定义,避免一个文件过...原创 2020-02-04 18:00:59 · 230 阅读 · 0 评论 -
React框架(一)利用码云构建第一个React项目
简介Facebook推出函数式编程官网https://reactjs.org/React16之后的版本称之为React Fiber,因底层在事件循环中加入了优先级等概念,可以利用事件循环的一些碎片时间执行一些高优先级的用户交互,提高用户体验比较:Vue.js提供更多的API,但灵活度低。React.js的灵活性更大一些,有更多实现选择。开发环境准备通过脚手架工具来编码,自动构建一...原创 2019-11-20 19:42:08 · 378 阅读 · 0 评论