- 博客(19)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 redux-thunk使用流程
首先安装redux-thunknpm install redux-thunk其次在创建store的时候，使用thunk中间件，照着官方文档，一步一步去配置，通过enhancer 这样一个内容，把他传递给createStore的第二个参数，使得我们这样一个store仓库，既使用了thunk又使用了REDUX_DEVTOOLS开发者工具。store文件夹下的index.jsimport { cr...
2020-01-23 21:41:56
428
原创 UI组件和容器组件和无状态组件
UI组件负责页面的渲染，容器组件负责页面的逻辑无状态组件—>当我们的组件只有一个render函数的时候，就叫做无状态组件无状态组件就是一个函数，当一个普通的组件只有render函数的时候，可以用一个无状态组件，来替换普通组件无状态组件的性能比较高，他就是一个函数，普通的组件，执行起来的东西远比函数来的多当我们定义一个ui组件的时候，他只负责渲染页面，不去做任何逻辑操作的时候，这个时...
2020-01-23 14:51:46
378
原创 创建redux中的store
首先先安装redux，可以通过yarn add redux来安装也可以通过npm install --save redux//多数情况下，你还需要使用 React 绑定库和开发者工具。npm install --save react-reduxnpm install --save-dev redux-devtools首先需要先引入redux中createStore这个方法import...
2020-01-22 20:30:38
459
原创 Redux的工作流程
redux设计和使用的三项原则store要求必须是唯一的只有store能够改变自己的内容Reducer必须是纯函数（给定固定的输入，就一定会有固定的输出，而且不会有任何副作用；一旦这个函数里有setTimeout或者说是Ajax请求或者是和日期相关的内容，他都不在是个纯函数了；对参数进行修改，又称作副作用）Redux = Reducer + Flux。react在2013年开源的时候，...
2020-01-22 15:44:04
534
原创 使用react-transition-group实现动画
react中使用css动画方式，但是在实际中使用这些开发的方式很少，主要是涉及到js动画，便没法处理了。这时，可以使用react-transition-group这个第三方模块来实现更加复杂的动画。首先打开github，搜索react-transition-group，或者直接网址进入https://github.com/reactjs/react-transition-group，之后进入主文...
2020-01-21 22:04:32
253
原创 react中使用css动画效果
index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />, document.getElementById('root'));App.jsimport React,{Component,Fragmen...
2020-01-21 18:09:57
285
原创 使用新版的Charles配置map local进行接口数据模拟仍然出现404错误
首先一开始的时候按照了正常的步骤，点击Tools—>map local进行配置，http请求、host地址、port端口、path路径以及本地的路径和json内容都没有问题，但是当点击ok，重新刷新页面的时候，仍然出现了404的错误。这是由于使用了最新版的Charles，新版的Charles，如果默认使用localhost作为地址的话，无法抓取本地的数据，会一直抓线上的数据，所以才导致...
2020-01-21 16:57:14
1417
原创 react提升代码性能
react提升代码性能的点1、绑定如果改变函数作用域的话放在constructor里面做，这样可以保证整个程序的函数作用域绑定操作只会执行一次，而且避免子组件的无谓渲染。2、内置的setState是个异步操作，多次数据的改变变成一次，这样可以降低虚拟dom的比对频率3、底层用虚拟dom，同层比对，key值等概念，来提升虚拟DOM比对的速度，从而提升react的性能4、借助shouldCom...
2020-01-21 15:35:43
148
原创 react——虚拟DOM的diff算法
复制代码1、state 数据2、jsx模板3、生成虚拟dom（虚拟DOM就是一个js对象，用它来描述真实DOM）['div', {id:'abc'}, ['span', {}, 'hello world']]通过这样的一个js对象，我们就可以表述上面的dom结构了4、用虚拟dom的结构，生成真实的dom，来显示<div id='abc'><span>hello...
2020-01-21 13:43:10
310
原创 react中的虚拟dom
当组件的state和props发生变化的时候，组件的render函数会重新执行，组件会被重新进行渲染，react中实现这种重新渲染，他的性能是非常高的，因为他引入了一个虚拟DOM的概念。当state发生变化,render函数会重新执行，重新的去渲染一次页面。假设没有react,我们自己要实现这个功能，那应该怎么去实现呢？我们来理个思路第一种方案1、state 数据2、jsx模板3、把数据...
2020-01-20 22:51:21
147
原创 PropTypes与DefaultProps
每个组件都有自己的props参数，这些组件接收外部传来的props，他的类型要做一个校验，也就是说对组件做属性强校验。。这里涉及到两个基础的概念，叫做propTypes 和defaultProps。第一步引入：todoItem为组件，只是举一个例子，可以换成其他的。设置content属性类型为字符串，handleItemDelete为函数，index为数字。一般开发的时候都建议把Propty...
2020-01-20 20:51:32
196
原创 安装命令
只是一个初学者，把一些命令放在一起，方便自己的查找和记忆安装reactnpx create-react-app my-appcd my-appnpm startnpm install安装Ant Designnpm install antd --save//引用样式import 'antd/dist/antd.css';安装axiosnpm install axios --...
2020-01-18 13:46:27
219
原创 React的前端路由
路由指的是根据网址访问的url的不同，代码能展示出来不同的页面内容前端路由：根据用户访问路径的不同，展示不同的内容，在react中路由指的是根据用户路径的不同，给用户展示不同的组件。安装路由： npm install react-router-dom --save安装完成需要引入三个不同的组件import { BrowserRouter,Route,Link} from 'react-rou...
2020-01-17 14:04:25
316
原创 React生命周期
React生命周期： 在react中，生命周期函数指的是组件在某一时刻会自动执行的函数。 constructor虽然也会自动执行，但不是react所独有的，可以理解成普通的类的生命周期函数 &nb...
2020-01-16 21:34:37
130
原创 React的ref获取dom元素
react声名式开发可以和其他框架并存组件化。单向数据流，即父组件可以改变子组件的数据，但是子组件一定不能直接改变父组件的数据，必须调用父组件的方法来改变父组件的数据函数式编程Props,State与render函数Props：指的属性，父组件通过属性的形式，向子组件传递参数State：组件中的数据render：渲染组件之中的内容关系：当组件初次创建的时候，render函...
2020-01-16 16:54:39
4488
原创 react组件的拆分与传值
父组件通过属性的形式向子组件传值子组件想要和父组件通信，调用父组件传递过来的方法父组件：import React ,{Component, Fragment} from 'react';import TodoItem from './TodoItem';import './style.css';//react 响应式//定义组件class TodoList extends Com...
2020-01-16 14:22:22
132
原创 react基础入门
渲染react的两种方法，render只能对单个进行渲染ReactDOM.render(<App />,document.getElementById('root'))ReactDOM.render( <div> <App /> <Text /> </div>, document.getElementById('root...
2020-01-16 11:42:09
150
原创 react——开发环境准备create a new react app
1.首先打开react官网点击getStarted按钮—>点击create a new react app往下翻找到三行代码。如果是window用户在桌面按住shift+右击可以看到‘在此处打开命令窗口’接下来依次输入这三行命令，如果运行不动太卡，可能是网络问题，试着连接一下手机热点。npx create-react-app my-appcd my-appnpm start...
2020-01-14 15:39:13
242
原创 vscode使用git
1. 找到项目路径 打开gitbash输入git config --global user.name "your name"git config --global user.email "your email address"2. 点击新建代码仓库新建仓库3. 复制代码，并在gitbash中输入4. git add把要提交的文件的信息添加到暂存区中。当使用 git commi...
2020-01-12 19:55:22
239
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人