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 ...
React介绍
React起源于Facebook的内部项目。React的出现是革命性的创新，React的是一个颠覆式的前端框架。在React官方这样介绍的它：一个声明式、高效、灵活的、创建用户界面的JavaScript库，即使React的主要作用是构建UI，但是项目的逐渐成长已经使得react成为前后端通吃的WebApp解决方案。
...
React Native-路由跳转
搭建完RN开发环境后（搭建方式可查看https://www.cnblogs.com/luoyihao/p/11178377.html），要实现多个页面之间的跳转。
1.这时需要安装react-navigation（在此之前的Navigator和ex-Navigation已经废弃），使用yarn add react-navigation命令进行安装。
2.react-navigation依赖于react-native-gesture-h ...
React的contextType的使用方法简介
上一篇介绍了Context的使用方法。但是Context会让组件变得不纯粹，因为依赖了全局变量。所以这决定了Context一般不会大规模的使用。所以一般在一个组件中使用一个Context就好。
由于Consumer的特性，里面的代码必须是这个函数的返回值。这样就显得复杂与不优雅了。那该怎么解决呢？这样contextType就派上用场了。
还 ...
