React Native 之 createBottomTabNavigator,createMaterialTopTabNavigator
icon第三方库
yarn add react-native-vector-icons
react-native link react-native-vector-icons
在上次的代码中添加：
AppNavigators.js
import React from 'react'; //只要在页面中使用了基础组件 都需要导入这句话 不然会报错
import {Button,Platform} from 'react-native';
import { createStackNavigator,creat ...
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
一、前言
9月，又到开学的季节。为每个一直默默努力的自己点赞！最近都沉浸在react native原生app开发中，之前也有使用vue/react/angular等技术开发过聊天室项目，另外还使用RN技术做了个自定义模态弹窗rnPop组件。
一、项目简述
基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发 ...
React+SpringBoot项目部署
静态资源访问配置
https://www.jianshu.com/p/b6e0a0df32ec
https://segmentfault.com/q/1010000012240531/a-1020000012250927
_______________________________________________________________________________________________
springboot-静态资源默认访问路径 ...
React源码解析——ReactAPI
一、API背景
api的具体转化关系
可以通过到https://babeljs.io/repl/网站去将我们创建的Jsx进行实时的转译
const React = {
Children: {
map,
forEach,
count,
toArray,
only,
},
createRef,
Component,
PureComponent,
createContext,
forwardRef,
Fragment: REACT_FRAG ...
react入门系列之react特点归纳
声明式开发
命令式开发：原生js和jq写代码的时候，大部分代码都是在操作dom，这种开发模式就是命令式开发。
声明式开发：react是面向数据编程，不需要直接去控制dom，你只要把数据操作好，react自己回去帮你操作dom，可以节省很多操作dom的代码。这就是声明式开发。
可以和其他框架并存
react所控制的dom就是id为root的d ...
React的基本使用
1、脚手架安装React项目
安装 create-react-app 脚手架来创建 react 项目。
npm install -g create-react-app
create-react-app my-app
使用该脚手架创建的 react 项目默认是不显示配置文件的，可以使用 npm run eject 命令将配置文件显示出来，该命令是一个单向操作，即一旦运行了，就不能再次将配置文件隐藏。
2、 ...
React与Typescript整合
0. Typescript
Typescript对于前端来说可以说是越来越重要了，前端的很多项目都用Typescript进行了重构。这主要得益于Typescript有比较好的类型支持，在编码的过程中可以很好地做一些类型推断（主要是编辑器会有代码提示，就很舒服）。再者Typescript的语法相较于javascript更加严谨，有更好的ES6的支持，这些特 ...
【react】---react中key值的作用
一、React中key值得作用
react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的，而是给React自己使用，有了key属性后，就可以与组件建立了一种对应关系，简单说，react利用key来识别组件，他是一种身份标识，就像每个人有一个身份证来做辨识一样。每个key 对应一个组件，相同的key react认为是同一个组件，这 ...
React Native 混合开发与实现
关于
微信公众号：前端呼啦圈（Love-FED）
我的博客：劳卜的博客
知乎专栏：前端呼啦圈
前言
随着 React 的盛行，其移动开发框架 React Native 也收到了广大开发者的青睐，以下简称 RN。通过 RN 我们能够使用 JavaScript 语言来实现跨平台移动应用的开发，打开了前端工程师通往移动平台的大门。用 RN 官方的介绍来概括它 ...
React Invalid hook call
先上一段异常错误信息
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rule ...
react react使用css
现在使用脚手架（react-create-app）的项目不需要在在css文件后面添加module就会自动为其添加模块化后缀
在react 中使用css有以下几种方法
第一种全局使用
app.js
import React from 'react';
import Router from "./router"
import './App.css';
function App() {
return (
<div className="App">
...
React之动画实现
React之动画实现
一,介绍与需求
1.1,介绍
1,Ant Motion
Ant Motion能够快速在 React 框架中使用动画。在 React 框架下，只需要一段简单的代码就可以实现动画效果
2,SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢？别急，下面让我们一步一步来看看究竟要怎么使用状态提升
假设我们有这样一个需求，提供两个输入框（分别属于两个组件），保证输入框里面的内容同步
好，下面我们先来封装一个输入框组件 Input
class Input extends React.Component {
constructor(props) {
super(props)
// ...
npm 安装 react-devtools
由于不能科学的上网。网上看资料装上了这个插件，装的过程有点坑。记录一下，希望能帮到和我一样的新手。
1.第一步，克隆下远程仓库的东西。
桌面右键，git-bash。然后输入：
git clone https://github.com/facebook/react-devtools.git
这个过程耗时比较长。
结果：
2.第二步， 进入到react-devtools目录， ...
React Hooks： useCallback理解
useCallback把匿名回调“存”起来
避免在component render时候声明匿名方法，因为这些匿名方法会被反复重新声明而无法被多次利用，然后容易造成component反复不必要的渲染。
在Class component当中我们通常将回调函数声明为类成员：
class MyComponent extends React.Component {
constructor(props) {
...
React 使用 if else 判断语句
今天在写 React 时，在 render 的return中既然不能使用if判断语句，所以就整理一些在react中使用if 的方式，可根据自己的实际情况选择：
方式一：
class LLL extends React.Component {
constructor(props){
super(props);
this.judge = false
}
render(){
let Message
if ( ...
常见的React面试题
1、redux中间件
答：中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。
常见的中间件： redux-logger：提供日志输出；redux-thunk：处理异步操作；redux-promise： ...
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 ...
