基于React 的audio音频播放组件
基于React 的audio音频播放组件, 自定义播放/暂停按钮、进度条调节、音量调节、倍速播放。
组件代码：
AudioPlay.js
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
rateList: [1.0, 1.25, 1.5, 2.0],
playRate: 1.0 ...
create-react-app + Typescript脚手架搭建
1、创建使用ts的新项目
yarn create react-app my-test-app --template typescript
2、配置tsconfig.json
（1）在根目录下新建文件tsconfig.extend.json
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./*"]
}
}
}
（2）在tsconfig.json中新增
"extends": "./t ...
react更新渲染及渲染原理
一、element如何生成真实DOM节点
触发组件的更新有两种更新方式：props以及state改变带来的更新。本次主要解析state改变带来的更新。整个过程流程图如下：
1、一般改变state，都是从setState开始，这个函数被调用之后，会将我们传入的state放进pendingState的数组里存起来，然后判断当前流程是否处于批量更新，如果是，则 ...
React首次渲染过程
一、JSX如何生成element
这里是一段写在render里的jsx代码。
return (
<div className="cn">
<Header> Hello, This is React </Header>
<div>Start to learn right now!</div>
Right Reserve.
</div>
)
首先，它会经过babel编译成React.createElement的表达式。
return (
React.cr ...
React+Taro开发小程序实现左滑喜欢右滑不喜欢效果
序言：
年后入职了一家新公司，与前同事交接完之后，发现公司有一个四端的项目（iOS，Android，H5，小程序），iOS和安卓都实现了左滑右滑的效果，而h5和小程序端没实现，询问得知前同事因网上没找到对应的插件相关博客也比较少，加上公司任务比较紧，所以没做就搁置下来了。
利 ...
使用react context的作用React.createContext
前言：在实际开发项目的时候我们可能会经常碰到多层组件传值的情况，就是父组件的值传递给子组件。子组件再传递给下面的子组件，再传递给下面的子组件.......可能会遇到这个情况。
然而这个值，可能会只在最后的子组件使用到，那么这个时候使用createContext简直就是无敌的存在。
超级简单又方便，因为最进重构一个项目遇到 ...
React Native 架构一览
一.架构设计
整体上分为三大块，Native、JavaScript 与 Bridge：
Native 管理 UI 更新及交互，JavaScript 调用 Native 能力实现业务功能，Bridge 在二者之间传递消息。即：
最上层提供类 React 支持，运行在JavaScriptCore提供的 JavaScript 运行时环境中，Bridge 层将 JavaScript 与 Native 世界连接起来 ...
React Native超简单完整示例－tabs、页面导航、热更新、用户行为分析
初学React Native，如果没有人指引，会发现好多东西无从下手，但当有人指引后，会发现其实很简单。这也是本人写这篇博客的主要原因，希望能帮到初学者。
本文不会介绍如何搭建开发环境，如果你还没有搭建，可参考这里的官方文档：https://react-native.org/doc/getting-started.html 。
本文也不会介绍各种组件，太多 ...
在React中使用Typescript
在React中使用Typescript
最近学习的技术发现TS越来越多,于是自己尝试做了几个Demo实战,发现TS上手不是很难,但是一旦出现错误很难百度到对应的文档,而且在react中也不会使用ts来编写
跟着这个文章走,内容可能会很长,一步一步去写,保证你的React项目可以使用TS来编写
本人写的一个 TS+Hooks简易版实战
1. 创建一个React的TS ...
React Hooks总结
Hook 前言
什么是Hook
自从 16.8 版本开始，hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性。
那么在 React Hooks 出现之前，class 类组件和 function 函数组件有什么区别？Hooks 出现之后，函数组件又是如何满足原来只有类组件才有的功能的？
1.类组件和没有 hooks 加持的函数组件：
函 ...
React拖拽组件react-sortable-hoc给子组件添加onClick失效问题
实现使用 react-sortable-hoc 插件
基本使用先见官网： https://clauderic.github.io/react-sortable-hoc/#/basic-configuration/basic-usage?_k=0ronzp
github地址：https://github.com/clauderic/react-sortable-hoc/blob/master/examples/basic.js
点击事件绑定不上的解决方案：https://github.com ...
React Context 的基本用法
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
1. 用法
React.createContext
const MyContext = React.createContext(defaultValue);
创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前 ...
常见react面试题汇总（适合中级前端）
转自https://segmentfault.com/a/1190000016885832?utm_source=tag-newest#item-11
React 中 keys 的作用是什么？
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
render () {
return (
<ul>
{this.state.todoItems.map(({item, key}) => {
return <li key={key}>{item} ...
React路由之BrowserRouter实现原理
一、路由用法
1.安装路由库
npm i react-router-dom
2.引入
import {HashRouter as Router, Route} from 'react-router-dom' //路由库
3.使用
index.js
import React from "react";
import ReactDOM from "react-dom";
import {HashRouter as Router, Route} from 'react-router ...
react嵌套路由
1、结构目录
2、路由配置文件，参照的vue-router
config.js
import Login from '../view/Login.js';
import System from '../view/System.js';
import Bus from '../view/Bus.js';
import Bus22 from '../view/Bus22.js';
const routes = [
{
path: "/",
component: Login,
exact: true,
},
{
pat ...
React VS Vue：2020年选哪个更好？
背景..........
最近我司准备上一新的项目 对前端使用什么框架进行了热烈的讨论 Javascript 框架以及 HTML 和 CSS 已成为每个现代软件项目前端开发的重要组成部分。 2020 年将会是为你的 Web 项目选择正确的 javascript 框架的又一个年头。
React 或 Vue：哪个更适合我的下一个 Web 发项目？
React ...
React：使用手写签名插件：react-canvas-draw 和 react-signature-canvas
1、安装npm install react-canvas-draw --save2、导入
import CanvasDraw from "react-canvas-draw";3、使用组件
signCanvas= React.createRef();
设置签名组件的属性
<CanvasDraw ref={this.signCanvas} brushColor="#000" brushRadius={3} lazyRadius={10} canvasWidth={"100%"} canvasHeight={250}/>
...
React项目解决跨域的两种方式
最近在学习http的相关知识，看到有关跨域的问题。平时工作中也会一直听到跨域问题，自己就深入的学习一下，这里记录一下，方便以后查阅。
1、为什么会出现跨域？
浏览器遵循同源政策(scheme(协议)、host(主机)和port(端口)都相同则为同源)。
非同源站点有这样一些限制:
不能读取和修改对方的 DOM
不读访问对方的 Cookie、 ...
React ref属性
简单来说，ref就是用来获取真实dom元素或者是组件实例的属性。
1. 创建和访问
ref 的值根据节点的类型而有所不同：
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
当 ref 属性用于自定义 class ...
react setState 原理
组件的数据来源有两个地方，分别是属性对象和状态对象
属性是父组件传递过来的，不可更改
状态是自己内部的，改变状态的唯一方式就是setState
属性和状态的变化都会引起视图更新
import React from "react";
import ReactDOM from "react-dom";
/**
* 属性是由父组件传递过来的，不能改变
* 状态是组件内部，由自己维 ...
