React的Context的使用方法简介
context
定义: Context提供了一种方式，能够让数据在组件树中传递，而不必一级一级手动传递。
API : createContext(defaultValue?)。
使用方法：
首先要引入createContext
import React, { Component, createContext } from 'react';
然后创建一个Context
const BatteryContext = creat ...
DvaJS构建配置React项目与使用
DvaJS构建配置React项目与使用
一,介绍与需求分析
1.1,介绍
dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以dva是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装。是由阿里 ...
react路由懒加载（异步组件）------react-loadable
https://www.npmjs.com/package/react-loadable
安装
cnpm install react-loadable
基本使用
假设现在项目中有个 home页面组件src/pages/home/index.js
import React, { Component } from 'react'
class Home extends Component {
render(){
return (
<div>这个是home页面</div>
)
...
前端微服务+React解决方案。
因为项目有很多互不依赖的模块，但每次发版却要一次打包都发上去，所以项目组决定进行分模块发版，看了一篇微服务前端的解决方案，还不错，但是还是不那么全面，试着用了一下，并且发布了一下，没什么太大问题，可能需要继续优化一下，简单介绍一下。
首先就是搭建主要的架构：
& ...
在React中使用react-router-dom路由
在React中使用react-router-dom路由
https://www.jianshu.com/p/8954e9fb0c7e
使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。
安装
首先进入项目目录，使用npm安 ...
从零开始搭建一个react项目
从零开始搭建一个react项目
欢迎加入qq群：36952712
如果只是想试试 React，那么建议使用 create-react-app来创建一个react项目。快速开始 因为 create-react-app 和 vue-cli 不一样，create-react-app将webpack的相关配置直接封装好了，所以自定制化程度不高，所以考虑手动构建一个 React项目
代码下载
...
简述react、redux、react-redux、redux-saga、dva之间的关系
【react】
定位：React 是一个用于构建用户界面的JavaScript库。
特点：它采用声明范式来描述应用，建立虚拟dom，支持JSX语法，通过react构建组件，能够很好的去复用代码；
缺点：react抽离了dom，使我们构建页面变得简单，但是对于一个大型复杂应用来说，只有dom层的便捷是不够的，如何组织、管理应用的代码，如何 ...
react中setState用法
setState()更新状态的2种写法
setState(updater, [callback]),
updater为返回stateChange对象的函数: (state, props) => stateChange
接收的state和props被保证为最新的
setState(stateChange, [callback])
stateChange为对象,
callback是可选的回调函数, 在状态更新且界面更新后才执行
...
react+redux开发详细步骤
create-react-app基础脚手架
借助React官方的create-react-app工具，开发人员可以从配置工作中解脱出来，无需过早关注React技术栈，通过创建一个已经完成基本配置的应用，让开发者快速开始React应用的开发：
npm install -g create-react-app
安装结束后，就可以在终端用create-react-app命令创建工程：
cre ...
搭建自己的React+Typescript环境（一）
前言
前阵子在自己学习React，最开始上手使用的creat-react-app来创建自己的项目，2版本之后的create-react-app已经支持了很多功能，比如sass、数据mock、typescript支持等等，也升级了相关依赖babel、webpack到一个最新的版本，具体可以参照Create React App 中文文档，但是它将项目的webpack配置等内容给藏起来了，想要 ...
react中的state和props
这两个知识点是react中非常重要的部分，今天再深入复习一遍。
state
state这个单词本来的意思是状态，在react中，它只是用来控制这个组件本身自己的状态，我们可以用state来完成对行为的控制、数据的更新、界面的渲染，由于组件不能修改传入的props，所以需要记录自身的数据变化。
setStart
不能直接给state赋值，state的更 ...
react之路： react过渡动画（react-transition-group）
github仓库地址：https://github.com/wanghao12345/react-book
这里主要讲解使用react-transition-group里面的CSSTransition实现动画。
使用CSSTransition实现动画，一共分三步：
1.引用CSSTransition
1 import { CSSTransition } from 'react-transition-group'
2.使用CSSTransition将需要动画的元素包 ...
react 实现评分组件
写了个评分组件，效果如下
组件Rate.js
import React, { Component } from 'react'
import './Rate.less'
export default class Rate extends Component {
state = {
count: this.props.number || 5,
num: this.props.def || 0,
enter: 0,
leave: this.props.def || 0,
state: ['不满意', '满意' ...
React Native发送通知
一、使用第三方库做本地/远程消息推送
推荐：https://github.com/zo0r/react-native-push-notification
demo解析：
AndroidManifest.xml:配置基本权限
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example">
<uses-permission android:name="android.permission.INTERNE ...
react-native-gesture-handler 使用
安装
yarn add react-native-gesture-handler
link到原生项目中
react-native link react-native-gesture-handler
为什么写这个文档
官方文档看的难受。React Native Gesture Handler 官网文档
为什么要使用这个库
更加的流畅、可靠。
react-native自带的PanResponder手势监视器由JS响应器系统控制而react-native-gestur ...
React router的Route应用
p.p1 { margin: 0; font: 12px ".PingFang SC" }
span.s1 { font: 12px "Helvetica Neue" }
p.p1 { margin: 0; font: 12px "Helvetica Neue" }
p.p2 { margin: 0; font: 12px ".PingFang SC" }
p.p3 { margin: 0; font: 12px "Helvetica Neue"; min-height: 14px }
span.s1 { font: 12px ".PingFang SC" }
span.s2 { font: ...
框架篇： React + React-Router + antd + nodejs + express框架搭建（nodejs做前后端server）
前提： nodejs >= 10.0;
这里不推荐用官网的yarn安装antd的模块，因为后续会出错，错误如图：
也不推荐用npx方法来搭建react骨架，也会出错，让我们开始吧！！
前端React+Antd框架搭建
1.安装并启动create-react-app骨架应用
打开cmd按顺序执行以下指令：
npm install - ...
React性能优化之PureComponent 和 memo使用分析
前言
关于react性能优化，在react 16这个版本，官方推出fiber，在框架层面优化了react性能上面的问题。由于这个太过于庞大，我们今天围绕子自组件更新策略，从两个及其微小的方面来谈react性能优化。 其主要目的就是防止不必要的子组件渲染更新。
子组件何时更新？
首先我们看个例子,父组件如下：
import React,{Compo ...
react网页版聊天|仿微信、微博web版|react+pc端仿微信实例
一、项目介绍
基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室reactWebChat项目，实现了聊天记录右键菜单、发送消息、表情(动图)，图片、视频预览，浏览器截图粘贴发送等功能。
二、技术选型
MVVM框架：react / react-dom
状态管理：redux / react-redux
页 ...
在react中使用原生的高德地图
1、使用react-create-app创建一个新的react项目
2、修改index.html，添加以下script引用：
3、创建一个组件文件MapDemo.js，内容如下
import React, { Component } from "react";
class WebMapDemo extends Component {
constructor(props) {
super(props);
}
componentDidMount(){
...
