react
memedadexixaofeifei
这个作者很懒,什么都没留下…
展开
-
React Native项目调试
在模拟器上开启Developer MenuIOS模拟器:Command + M快捷键快速打开Developer MenuAndroid模拟器:ctrl + M在真机上开启Developer Menu:在真机上通过摇动手机开启Developer MenuWarnings警告信息处理:console.warn()来手动触发Warnings,通过console.disableYellowBox = true 来手动禁用Warnings的显示,或者通过console.ignoredYel原创 2020-07-11 16:11:49 · 262 阅读 · 0 评论 -
React Native基础 - 常用组件
// 自定义组件// 引入核心模块import React, { Component } from 'react'// 从reactive中导出对应的组件, ScrollView组件的初步认识,父容器需定义好宽高import { View, Text, StyleSheet, ScrollView, Dimensions } from 'react-native'const { width, height, scale } = Dimensions.get('window') // 获取屏幕的.原创 2020-06-28 07:28:09 · 213 阅读 · 0 评论 -
react基础react-router-dom的基本使用
ReactRouter三大组件:Router(BorwserRouter/HashRouter):所有路由组件的根组件(底层组件),包裹路由器的最外层的容器,属性:basename: 设置跟此路由根路径Router:路由规则匹配组件,显示当前规则对应的组件Link:路由跳转的组件<Link to={ {pathname: '/me', search:'?username=admin', hash:'#abc', state: {msg:'hello'}} }>Link的原创 2020-06-20 23:55:25 · 301 阅读 · 0 评论 -
react基础react-router-dom的基本使用,和react-loadable结合react-router-dom中withRouter实现异步加载组件,提升性能
1、安装react-router-dom,使用路由器BrowserRouter, 路由Route,还有Switch用于处理意外页面import React, { Component, Fragment } from 'react';import Header from './component/Header'import store from './store'import { Provider } from "react-redux"// 单个react-loadable进行异步组件//原创 2020-06-20 16:23:22 · 520 阅读 · 0 评论 -
react基础immutable.js管理store中的数据,使用redux-immutable来统一store的数据类型,可以结合PureComponent创建高性能组件
import { PureComponent } from 'react'保证state中的数据类型一致安装 npm i immutable --savefromJS将state变为immutable对象import { fromJS } from 'immutable'const defaultState = fromJS({ inputValue: "测试", list: ["默认数据"],});get()用于获取immutable对象的值const mapSta原创 2020-06-20 16:03:02 · 188 阅读 · 0 评论 -
react基础使用combineReducers完成对数据的拆分
combineReducer将reducer.js拆分为多个小的reducer,便于数据管理import { combineReducers } from 'redux'可以在每一个组件下面创建属于自己的store,用来存储自己的数据在组件的store里面写法和平时一样,只不过index.js可能用于到处文件处理import reducer from './reducer'export { reducer}在调用时// 使用combineReducers来拆原创 2020-06-20 11:04:06 · 416 阅读 · 0 评论 -
react基础使用styled-components编写js的样式组件的基本使用
1、安装styled-components,用于js编写对应的组件styled的使用,用于创建组件import styled from 'styled-components'export const Item = styled.div` width: 350px; height: 36px; line-height: 36px; font-weight: bold;`2、createGlobalStyle用于创建全局样式import { create原创 2020-06-19 22:54:49 · 291 阅读 · 0 评论 -
react基础react-redux
1、引入react-redux,在模板渲染口,使用Provider提供store,只要在Provider中使用的组件都可以调用到store中的state状态import React from 'react';import ReactDOM from 'react-dom';import App from './App';import store from './store'import { Provider } from 'react-redux'ReactDOM.render( <原创 2020-06-19 18:13:50 · 118 阅读 · 0 评论 -
redux基础react-thunk的基本使用
1、在store中配置使用redux-thunkimport { createStore, applyMiddleware, compose } from 'redux'import thunk from 'redux-thunk'import reducer from './reducer'const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_原创 2020-06-19 17:08:40 · 165 阅读 · 0 评论 -
react基础使用redux-saga
1、store中配置引入saga,还有saga.js的自定义文件import { createStore, applyMiddleware, compose } from 'redux'import createSagaMiddleware from 'redux-saga' // 引入sagaimport reducer from './reducer'import mysaga from './saga' // 引入配置的saga.js文件const sagaMiddleware = c原创 2020-06-19 16:30:10 · 131 阅读 · 0 评论 -
react基础使用redux-thunk实现action中请求异步数据
1、在store中配置好redux-thunkimport { createStore, applyMiddleware, compose } from 'redux'import thunk from 'redux-thunk'import reducer from './reducer'const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_C原创 2020-06-19 14:43:25 · 345 阅读 · 0 评论 -
react基础redux的基本使用
1、通过createStore创建好storeimport { createStore } from 'redux'import reducer from './reducer'const store = createStore(reducer);export default store2、在需要使用state的地方调用 store.getState()获取store中存储的状态 constructor(props) { super(props); this.sta原创 2020-06-19 14:10:41 · 109 阅读 · 1 评论 -
react基础注意事项
1、构造函数中定义的注意事项在constructor中去调用父类的构造函数、去定义组件中的状态 state、去改变函数方法的this指向(改为指向当前组件)constructor(props) { super(props) // 调用父类的构造函数 this.state = { inputValue: '', list:['测试数据'] } this.inputChange = this.inp原创 2020-05-28 17:16:35 · 135 阅读 · 0 评论 -
React Native布局
React Native中的FlexBox和Web Css 上的FlexBox的不同:FlexDirection:React Native中默认为 flexDirection: 'column',在Web Css 中默认为flex-direction:'row'alignItems:React Native中默认为 alignItems:'stretch',在Web Css 中默认 ali...原创 2020-02-21 09:46:14 · 123 阅读 · 0 评论 -
React-Native开发windows环境搭建
必须安装的依赖有:Node、Python2、JDK 和 Android Studio。1、安装react-native指令工具,react-native-cli脚手架npm i react-native-cli -g2、创建项目指令: react-native init 项目名称react-native init FirstApp...转载 2020-02-19 10:23:13 · 188 阅读 · 0 评论 -
React脚手架实现多页面应用
搭建项目内容配置paths.js appHtml: resolveApp('public/index.html'), appQueryHtml: resolveApp('public/query.html'), appOrderHtml: resolveApp('public/order.html'), appTicketHtml: resolveApp('publi...原创 2020-02-15 18:03:16 · 697 阅读 · 1 评论 -
React Hooks使用 Memo/Callback Hooks
import React, { useState, useMemo, memo, useCallback } from "react";// useMemo的写法与useState相同,但是调用时机不同,useState执行的是副作用,在组件渲染完成后执行,useMemo参与渲染,是在渲染的时候执行const Foo = memo(function Foo(props) { // 配合mem...原创 2020-02-13 11:03:08 · 155 阅读 · 0 评论 -
React Hooks 使用 useContext
import React, { useState, createContext, useContext } from "react";const CountContext = createContext(); // 使用 Contextfunction Foo() { const count = useContext(CountContext); // 使用useContext r...原创 2020-02-13 09:49:08 · 209 阅读 · 0 评论 -
React Hooks使用 Effect Hooks
import React, { Component, useState, useEffect } from "react";// hooks组件function App() { const [count, setCount] = useState(0) // useState 默认值 0 返回一个数组,第一个是变量,第二个修改变量的方法 const [size, setSize] ...原创 2020-02-12 19:39:46 · 175 阅读 · 0 评论 -
React Hooks中 useState修改状态
使用hooks函数,所有的hooks函数包括自己定义的hooks函数都应该以 useState开头react hooks函数错误提示插件 eslint-plugin-react-hooks,安装好插件后在pack.json中进行配置错误提醒 "eslintConfig": { "extends": "react-app", "plugins": ["react-hook...原创 2020-02-12 11:39:53 · 3925 阅读 · 0 评论 -
React中高阶组件的使用
含义:React的高阶组件:接收一个组件作为参数并返回一个新组件的函数叫高阶组件高阶组件的简单使用:1):higherOrderComponent(WrappedComponent)2):@higherOrderComponent // 装饰器模式在使用装饰器模式的情况下,需要做的配置: npm run eject安装相关插件 // 针对react ...原创 2019-12-29 10:57:39 · 146 阅读 · 0 评论