react 16 渲染整理
背景
老的react架构在渲染时会有一些性能问题，从setstate到render，程序一直在跑，一直到render完成。才能继续下一步操作。如果组件比较多，或者有复杂的计算逻辑，这之间的消耗的时间是比较多的。
假设更新一个组件需要1ms，如果有200个组件要更新，那就需要200ms，这200ms之间是不能响应的。如果这时候用户在input框输入 ...
react---简易展开收起组件
组件核心代码：
import React from 'react';
// import PropTypes from 'prop-types';
// 展开收起组件
class ArrowSlide extends React.Component {
static defaultProps = {
itemLable: false, // 是否展开
itemsName: '' // 检查项目名称
};
constructor(props) {
super(props);
const { itemLa ...
react中怎么写css样式？
JSX基本语法中关于react如何写css样式主要有三种方法
1、基于class --（className）
基于className ,通过className在style中给该class名的DOM元素添加样式
1 <style>
2 .title{
3 color:blue;
4 }
5 </style>
6
7
8 <div id='app'></div>
9 //创建一个叫App类，继承（extends)了react中创建组件的方法(comp ...
react 16 Hooks渲染流程
useState
react对useState进行了封装，调用了mountState。
function useState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
currentHookNameInDev = 'useState';
mountHookTypesDev();
const prevDispatcher = ReactCurrentDispatcher.current;
ReactCurrentDispatcher. ...
React使用hook
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
为什么会有hook
在组件之间复用状态逻辑很难,需要重新组织你的组件结构,抽象层组成的组件会形成“嵌套地狱”
复杂组件变得难以理解,各生命周期交叉副作用
State Hook
import React, { useState } from 'react'; ...
react-router和react-router-dom的区别
RR4 本次采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有若干相互独立的包，分别是：
react-router React Router 核心
react-router-dom 用于 DOM 绑定的 React Router
react-router-native 用于 React Native 的 React Router
react-router-redux React Router 和 Redux 的集成
react-r ...
React Hook：使用 useEffect
React Hook：使用 useEffect
一、描述
二、需要清理的副作用
1、在 class 组件中
2、使用 effect Hook 的示例
1、useEffect 做了什么？
2、为什么在组件内调用 useEffect？
3、每次 render 之后都会执行 useEffect 吗？
3、详细代码拆分说明
Tip
三、需要清理的副作用
1、使用 class 组件示例：
注意
2、 ...
React Native (一) react-native-video实现音乐播放器和进度条的功能
React Native (一) react-native-video实现音乐播放器和进度条的功能
功能：
1.卡片滑动切歌
2.显示进度条
效果图：
第三方组件：
1.react-native-video
Github地址：https://github.com/react-native-community/react-native-video
2.react-native-animated-tabs
Github地址：https://github.com/philipshurpik/react-nat ...
在React中使用WebUploader实现大文件分片上传的踩坑日记！
前段时间公司项目有个大文件分片上传的需求，项目是用React写的，大文件分片上传这个功能使用了WebUploader这个组件。
具体交互是：
1. 点击上传文件button后出现弹窗，弹窗内有选择文件和开始上传button。
2. 每个文件显示序号、文件名、进度条、上传操作按钮（开始/暂停、删除）。
3. 选择好文件之后点击开始上传，文件按 ...
react-router-cache-router
转载---官方文档：https://github.com/CJY0208/react-router-cache-route/blob/master/README_CN.md
CacheRoute
搭配 react-router 工作的、带缓存功能的路由组件，类似于 Vue 中的 keep-alive 功能
React v15+
React-Router v4+
遇到的问题
使用 Route 时，路由对 ...
基于react-app搭建react-router+redux项目
前言
总括： 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用的过程。
代码地址：React全家桶实现一个简易备忘录
原文博客地址：React全家桶实现一个简易备忘录
知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书） ...
React中创建组件的3种方式
目前作者所知道的创建react组件的方式有三种：
函数式定义(无状态组件)
function MyComponent(props){ return( <h1>mycomponent</h1> )}
es5原生方式
const MyComponent=React.createClass({
render:function () {
return <h1>mycomponent</h1>
}
})
es6中clas ...
react 中 echarts-for-react 数值改变重新渲染
import * as React from 'react'
import ReactEcharts from 'echarts-for-react'
export interface IProps {
}
interface IState {
flag: boolean
}
class SummaryStatistics extends React.Component<IProps, IState> {
echartsReact: any = undefined
constructor(props: IProps) {
supe ...
react中如何使用swiper
react中怎么使用基本swiper
第一步：安装包
npm i swiper -S
第二步：引包
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.css'
第三步：写html
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required ...
echarts在react项目中的使用
数据可视化在前端开发中经常会遇到，万恶的图表，有时候总是就差一点，可是怎么也搞不定。
别慌，咱们一起来研究。
引入我就不多说了 npm install echarts
对于基础的可视化组件，我一般采用组件封装的方式来使用echarts
当需要在项目中使用echarts做图表时，可以直接将其封装成一个组件
1 import React, { Component } ...
react在组件中触发子组件方法 以及触发兄弟组件
触发子组件方法
第一种办法：
class App extends React.Component{
render(){
return (
<React.Fragment>
<button className="btn" onClick={this.clear.bind(this)}>清空</button>
<Input ref="input"></Input>
</React.Fragment>
...
react的事件处理为什么要bind this 改变this的指向？
react的事件处理会丢失this,所以需要绑定,为什么会丢失this?
首先来看摘自官方的一句话：
You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default.
这句话大概意思就是,你要小心jax回调函数里面的this,class方法默认是不会绑 ...
React 引入import React 详解
本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。
所以我们如果使用了JSX，我们其实就是在使用React，所以我们就需要引入React
前言
React是前端最受欢迎的框架之一，解读其源码的文章非常多，但是我想从另一个角度去解读React：从零开始实现一个React，从API层面实现React的大部分功能， ...
没有用到React，为什么我需要import引入React?
没有用到React，为什么我需要import引入React?
本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。
所以我们如果使用了JSX，我们其实就是在使用React，所以我们就需要引入React
前言
React是前端最受欢迎的框架之一，解读其源码的文章非常多，但是我想从另一个角度去解读React：从零开始实 ...
【react】---redux-actions的基本使用---【巷子】
一、安装
cnpm install --save redux-actions
二、为什么使用 redux-actions
reducer使用switch case语句进行action类型判断，当action很多时候，reducer内容就不那么直观了。redux-actions简化了reducer和action的联系
三、基本使用
1、创建action/actionCreator.js
import { createAction } from ...
