从零开始学React
记录自己在学习React路上的心得感悟,将有用的知识点收集记录
YooHoeh
热爱可抵岁月漫长
展开
-
React使用DVA本地state传值取值
React使用DVA本地state传值取值 最近在用Ant Pro 做一个后台系统,在使用中发现Antd Pro使用DVA来实现redux+sagas+router一系列的功能,比传统方式要方便快捷的多,自己研究了其中一些原理,在此贴上代码供别人参考也给自己做个记录,需要取值的页面index.jsimport { connect } from 'dva';//这里...原创 2018-09-04 14:17:45 · 4850 阅读 · 0 评论 -
setState()之后使用state的问题
一开始知道setState()是异步执行方法,在使用这个方法改变state之后直接用this.state获取的state不是更新之后的,只有render发生变化的时候才触发this.setState()。 constructor(props) { super(props) this.state = { filter: { type: 'day'...原创 2018-09-25 12:39:09 · 3691 阅读 · 0 评论 -
React使用Styled-Componets来添加样式
React使用Styled-Componets来添加样式Styled-Comonents是用JS中ES6 语法的方式来管理CSS样式的一个组件,解决了在import CSS文件时样式重复安装项目根目录下打开bashyarn add styled-components 新建一个style.js文件来添加样式 注意,这里不是用style.css文件。...原创 2018-07-19 10:35:34 · 2654 阅读 · 0 评论 -
React生命周期函数详解和注意事项
React生命周期函数生命周期函数是指在某一个周期自动执行的函数。 React中的生命周期执行过程以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行初始化过程(Initialization)在consructor()里面初始化Props和State属性。挂载过程(Mounting)componentWillMo...原创 2018-07-14 15:01:45 · 1746 阅读 · 0 评论 -
轻松理解Redux原理及工作流程
轻松理解Redux原理及工作流程Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快,Redux因其简单易学体积小在短时间内成为最热门的前端架构。 本文中我将简单讲述Redux的原理和工作流程结构图 React组件(或其他使用Redux的组件,这里用react组件来进行举例)和Redu...原创 2018-07-15 11:16:52 · 12309 阅读 · 4 评论 -
React入门——制作一个TodoList App
源码import React, { Component, Fragment } from "react";class TodoList extends Component { constructor(props) { super(props); this.state = { inputValue: "", list: ["Learn React"..原创 2018-07-12 18:29:32 · 482 阅读 · 0 评论 -
多角度对比 ES5与ES6的区别
ES5与ES6的对比不同点整理1.Default Parameters(默认参数)es6之前,定义默认参数的方法是在一个方法内部定义var link = function (height, color, url) { var height = height || 50; var color = color || ‘red‘; var url = ...原创 2018-05-28 21:54:42 · 2011 阅读 · 0 评论 -
fetch添加超时时间
fetch添加超时时间其实为fetch添加超时时间很简单,需要用到Promise.race()方法.Promise.race() 方法将多个Promise包装成一个新的Promise实例.var p = Promise.race([p1,p2,p3]);上面的代码中,只要p1,p2,p3中有一个实例先改变状态,p的状态就跟着改变,而那个率先改变的Promise实例返回值就传递给...转载 2018-05-28 13:39:37 · 5830 阅读 · 0 评论 -
如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序。 每次我想测试它时,我都会用Jest的 Enzyme来渲染一个组件。当然,我绝对滥用快照测试功能。那么,至少我写了一个测试吧?您可能听说过编写单元和集成测试会提高您编写的软件的质量。 另一方面,不好的测试...翻译 2018-05-26 15:29:48 · 3646 阅读 · 0 评论 -
解放F5——React开启模块热更新
解放F5——React开启模块热更新在一个正在开发的应用中,刷新页面将会降低你的生产效率:你必须得等待页面加载完毕。一个大的应用可能会花很多秒钟才能刷新完页面。使用 HMR(模块热替换) 可以避免这个缺点。 使用 HMR 最大的好处是你可以保持应用的状态。设想你的应用中有一个对话框,其中包含很多步骤,而现在你正在第三步当中,基本上这就特别奇怪。如果没有 HMR 的话,当你更改源代码的时...原创 2018-05-29 16:50:15 · 1303 阅读 · 0 评论 -
ES6中bind(this)用法说明
在使用 React 中的 Class extends写法,如果 onClick 绑定一个方法就需要 bind(this),如果使用React.createClass 方法就不需要解析:React.createClass 是ES5 的写法默认绑定了 bind 写法 在 ES6 中新增了class,绑定的方法需要绑定 this,如果是箭头函数就不需要绑定 this示例:第一种写法...原创 2018-07-12 18:08:04 · 3592 阅读 · 0 评论 -
React动画组件——React-Transition-group动画实现
React动画组件——React-Transitio-group动画实现安装项目目录下使用命令行yarn add react-transition-group安装组件。在需要使用动画的页面加入以下代码import { CSSTransition, TransitionGroup } from "react-transition-group";import "./sty...原创 2018-07-15 09:54:29 · 6326 阅读 · 0 评论 -
React-Redux使用方法
React-Redux使用方法理解在React项目中使用react-redux,可以让你更方便的使用redux,原理是在index.js中注册app时用一个<Povider>标签嵌套,把你的App.js变Provideer的子组件,将所有的state以props的形式传给<App/>。代码App.js/* * @Author: YooH...原创 2018-07-17 15:22:35 · 612 阅读 · 0 评论