React
YooHoeh
热爱可抵岁月漫长
展开
-
三行代码让你的React/RN应用动起来
import { LayoutAnimation } from "react-native";componentWillUpdate() { LayoutAnimation.easeInEaseOut();}原创 2020-02-29 19:45:41 · 272 阅读 · 0 评论 -
解决React Navigation goBack()无效
import { StackActions } from "react-navigation";const popAction = StackActions.pop({n: 1});this.props.navigation.dispatch(popAction);原创 2020-01-19 10:21:41 · 1190 阅读 · 0 评论 -
简单配置umiJS学习笔记
最近跟着Antd-Pro官方教程学习umi,这里给大家推荐一下这个教程,特别适合初学者学习,教程涉及了AntD,AntD-Pro,umiJS,dvaJS等框架知识。跟着教程做了个Demo...原创 2018-10-24 18:54:58 · 8043 阅读 · 4 评论 -
执行npm run build之后显示空白页面
最近在学习使用webpack,在项目最后打包过程,执行npm run build之后得到的dist目录放到服务器上打开,显示空白页面,但是标题能正常显示,查看控制台发现是数据位置请求报错,查阅资料后知道是打包初始目录设置错误,现将解决方法整理如下:找到webpack配置文件.webpack.js需要说明,不同的webpack版本或者打包管理器所生成的配置文件名甚至文件位置都可能不一样,不清楚...原创 2018-09-30 13:16:00 · 11033 阅读 · 1 评论 -
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使用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 评论 -
React性能优化记录(不定期更新)
React性能优化记录(不定期更新)1. 使用PureComponent代替Component在新建组件的时候需要继承Component会用到以下代码import React,{Component} from 'react';import {connect} from 'react-redux';class Item extends Comonent{ render(...原创 2018-07-20 19:42:39 · 1298 阅读 · 0 评论 -
JSX设置CSS样式详解
JSX设置CSS样式详解1. 使用className设置样式(CSS的其他选择器也是同理)(1)定义一个CSS文件style.css,和普通CSS一样定义class选择器.sty1{//和普通CSS一样定义class选择器 background-color: red; color: white; font-size: 40px;}(2)在JSX中导入...原创 2018-07-20 17:11:21 · 10450 阅读 · 2 评论 -
轻松理解Redux原理及工作流程
轻松理解Redux原理及工作流程Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快,Redux因其简单易学体积小在短时间内成为最热门的前端架构。 本文中我将简单讲述Redux的原理和工作流程结构图 React组件(或其他使用Redux的组件,这里用react组件来进行举例)和Redu...原创 2018-07-15 11:16:52 · 12310 阅读 · 4 评论 -
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生命周期函数详解和注意事项
React生命周期函数生命周期函数是指在某一个周期自动执行的函数。 React中的生命周期执行过程以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行初始化过程(Initialization)在consructor()里面初始化Props和State属性。挂载过程(Mounting)componentWillMo...原创 2018-07-14 15:01:45 · 1746 阅读 · 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 · 2655 阅读 · 0 评论 -
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 · 484 阅读 · 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 · 3594 阅读 · 0 评论 -
轻松掌握Redux-Action使用方法
轻松掌握Redux-Action使用方法Redux-Action主要有两个方法,createAction和createAction,只要掌握了这两个方法就会了redux-action的使用。createAction原来创建action:const startAction = () => ({ type: START });使用redux-actions创建ac...原创 2018-07-23 21:36:10 · 4984 阅读 · 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 · 614 阅读 · 0 评论 -
解放F5——React开启模块热更新
解放F5——React开启模块热更新在一个正在开发的应用中,刷新页面将会降低你的生产效率:你必须得等待页面加载完毕。一个大的应用可能会花很多秒钟才能刷新完页面。使用 HMR(模块热替换) 可以避免这个缺点。 使用 HMR 最大的好处是你可以保持应用的状态。设想你的应用中有一个对话框,其中包含很多步骤,而现在你正在第三步当中,基本上这就特别奇怪。如果没有 HMR 的话,当你更改源代码的时...原创 2018-05-29 16:50:15 · 1303 阅读 · 0 评论 -
如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序。 每次我想测试它时,我都会用Jest的 Enzyme来渲染一个组件。当然,我绝对滥用快照测试功能。那么,至少我写了一个测试吧?您可能听说过编写单元和集成测试会提高您编写的软件的质量。 另一方面,不好的测试...翻译 2018-05-26 15:29:48 · 3648 阅读 · 0 评论