架构师的成长之路

在react中，我们主要使用react-transition-group实现动画过度效果，本文将讨论如何在react项目中实现过度动画效果。安装# npmnpm install react-transition-group --save# yarnyarn add react-transition-group官方提供的三个组建Transition,CSSTransitio...

style-components在react中用来做样式组件，很有用，拿来给大家讲一下。安装首先下一个包：npm install --save styled-components使用创建组价以及根据属性加样式import React ,{Component} from 'react'import styled from 'styled-components';con...

在React-Router中Link无法指定生成的元素类型，那么我们可以封装一个，就可以实现Vue-router中tag的功能。一下代码中是有了react中的样式组件，需要安装：yarn add style-component -s封装代码：import React from 'react'import { NavLink, Route, withRouter } from...

本文将讨论如何在react项目中使用React-Router实现路由切换。（使用的React-Router是4.0版本）。在react中安装React-Router//如果你使用yarnyarn add react-router-dom//如果你使用npmnpm install react-router-dom完整代码import React, { Componen...

在react项目中配置Eslint在package.json文件中进行如下配置 "eslintConfig": { "extends": "react-app", "rules":{ "no-console":1 } },比如这个，配置了不让输出，否则会warningeslint规则（no-console的值）："off" 或者

 redux是一个架构模式/状态管理模式，借鉴了flux，在使用的时候需要去搭建redux结构，本文将着重介绍redux在react中应用。 Redux思想store是管理全局状态的，视图可以获取到store的状态，视图产生用户操作后会调用actionCreator的方法来生成一个action，将其dispatch派发给store store会将当前的状态和此次的action交给r...

高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。新组件承受业务逻辑，并将数据传入给接收的组件，接收的组件变成UI组件，只负责使用数据，而生成的新组件称为容器组件。原来react使用混入（mixi...

react为何移除mixin，本文主要介绍minix的弊端。mixin引入了隐式依赖关系 有时候组件依赖于mixin中定义的某个方法，比如getClassName()。有时情况正好相反，mixin会在组件上调用renderHeader()之类的方法。JavaScript是一种动态语言，因此很难强制或记录这些依赖关系。 mixin打破了通常安全的假设，即可以通过搜索组件文件...

看到网上都是老版的context，发一篇最新的context的使用及小例子。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，但这对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI主题），这是应用程序中许多组件都所需要的。 Contex...

生命周期的重要性，对于学习框架的重要性，就不多说了，下面主要讲一下react的生命周期中的这些钩子函数的基本用法。话不多说，先上图：react组件的构造import React,{ Component } from 'react';//因为编译时要用到React，所以必须要引入 class Demo extends Component { const...