react教程,如何通过react+redux升级版来实现todoList
react教程,如何通过react+redux升级版来实现todoList详细介绍
本文目录一览： 手把手教你创建Ant Design Pro的React项目
介绍
主要是使用?React?和?TypeScript?以及?Ant Design Pro?开发中后台项目，那么就会有人问“可不可开发前台”，回答是“可以”；Ant Design?是蚂蚁金服的UI框架，发展历程可以说是从?saga-redux -> dva -> umi -> ant design?，说?ant design?是?react?的最佳实践确实是名副其实；其中我最喜欢或者说是?dva?最显著的地方就是修缮了?redux?的不足之处。
搭建
安装 cnpm，yarn，tyarn
```
npm i -g cnpm --registry=https://registry.npm.taobao.orgcnpm i yarn -gyarn global add tyarn
```
2. ?Ant Design Pro 立足于 umijs 、dva，需要安装 umi
```
yarn global add umi
```
3.? 创建 Ant Design Pro 项目（先创建test文件夹）
```
mkdir test
cd test
yarn create umi （这里选择 ant design pro -> typescript -> simple）tyarn
yarn start
```
+ config
? ? - config.ts? 路由设计
? ? - proxy.ts? 代理（打包后无效）
+ mock? ? ? ? ? 模拟数据
+ src
? ? - assets? ? 放一些静态资源文件（png，svg等）
? ? - component? 主要放全局组件
? ? - layouts? ? 权限、token获取
? ? - models? ? 详细内容见dva，换言之是redux （interface、数据交互）
? ? - pages? ? ? 页面
? ? - serives? ? 请求（get,post）
? ? - utils? ? ? 放一些公用方法
/* 以上为本人对ant design pro各个模块的理解，不足之处还请指教 */
举个栗子（dva）
TypeScript 最突出的就是类型注解，其目的就是减少对类型的试错，从而达到优化
/**? * 假设你现在要做一个博客网站，现在你要搭建的是你的博客首页 * 1. 现在你的 page 已经写好了（src/home/index.tsx和src/home/index.less） * 2. 你的后端接口也已经写好了，提供的接口就是 home (GET) * 3. 你也已经在 config/proxy.ts 中写好了代理，代理名 api **/
现在你需要创建一个?src/services/home.ts?去对接后台的接口。
import request from '@/utils/request'// ant design pro 自带（无须修改，每次请求自动携带 token）interfaceHomeParams{currentPage:number;pageSize:number;}exportasyncfunctionqueryGetMyHomeData(payload:HomeParams){returnrequest(`/api/home`,{method:'GET',params:{// 填写你需要传给后端的字段...payload,}/**? ? ? ? * 如果是 POST 请求，请将 params 修改成 data? ? ? ? **/})}
接下来，你需要创建一个?src/models/home.ts?去调用上面那个接口 （详细教程看?dva），我这是临时起意边想边写的（俗称瞎编乱造）。
import{queryGetMyHomeData}from'@/services/home'import{Effect,Reducer}from'umi';exportinterfaceDataItem{// 暂且假设后端回给你的只有（ID、博客标题、发布日期(毫秒数)、摘要）id:number;title:string;createdDate:number;brief:string;}// state 对应的类型（接口）exportinterfaceHomeState{currentPage:number;data:Array
;}exportinterfaceHomeModelType{namespace:string;// 说好听点叫做 "命名空间"state:HomeState;// 就是 stateeffects:{// effects 里面的可以调用 reducers 里面的getData:Effect,changePage:Effect,};reducers:{setData:Reducer
,setPage:Reducer
,};}constHomeModel={namespace:'home',state:{currentPage:1,data:[],},effects:{*getData({payload},{call,put}){constres=yieldcall(queryGetMyHomeData,payload);// payload 要对应 queryGetMyHomeData 的形参，否则另当别论constarr=Array.isArray(res.data)?res.data:[];// 我这里假设返回的 res.data 就是我们所需要的数据yieldput({// 将数据放到 state 里面type:'setData',payload:{data:arr,}})},*changePage({payload},{call,put}){yieldput({type:'setPage',payload});// yield take( 'setPage/@@end' );? ? // 阻塞等待完成再往下执行，当然我们这里并不存在一步造成的问题yieldput({type:'getData',payload});},},reducers:{setData(state,{payload}){return{...state,...payload,}},setPage(state,{payload}){return{...state,...payload,}},}}exportdefaultHomeModel;
让?src/pages/home/index.tsx?去?connect?HomeModel
importReact,{useEffect}from'react';import{connect,Dispatch}from'umi';import{HomeState}from'@/models/home'interfaceHomeProps{dispatch:Dispatch;home:HomeState;}constHome:React.FC
=(props)=>{// 拿到的内容可以直接使用const{dispatch,home:{currentPage,data,}}=props;// 获取数据，或者说是初始化数据useEffect(()=>{dispatch({type:'home/getData',payload:{currentPage,pageSize:8,}})},[]);// 页码改变事件functionpageChange(page){/**? ? ? ? * page的修改是两个操作? ? ? ? * 1. 修改 page? ? ? ? * 2. 获取数据? ? ? ? * 3. 如果面临异步问题（我们这里用阻塞）-- 这里不存在此问题? ? ? ? **/dispatch({type:'home/changePage',payload:{currentPage:page,pageSize:8,}})}return(// ... 这里我就省略不写了);}exportdefaultconnect(home:HomeState=>home)(Home);
还有一点要 提醒 ，effects 里面的 和 reducers 里面的函数名不能一样。
有关于 Dva 对 Redux 的修改，见下图
React全家桶怎样搭建后台管理系统
这次给大家带来React全家桶怎样搭建后台管理系统，React全家桶搭建后台管理系统的注意事项有哪些，下面就是实战案例，一起来看一下。引子 学生时代为了掌握某个知识点会不断地做习题，做总结，步入岗位之后何尝不是一样呢？做业务就如同做习题，如果‘课后'适当地进行总结，必然更快地提升自己的水平。由于公司采用的react+node的技术栈，于是就完成了一个reactSPA小项目，计划日后把平时工作中遇到的业务以及学习中遇到有趣的东西给抽象成demo展示出来。目前该项目只是把雏形搭好，效果如下。在此文的基础上，写了篇新文章使用React全家桶搭建一个后台管理系统,欢迎围观。(附注：因为项目不时更新，文章不一定会即时更新，所以以实际的项目为准) 其实这套界面风格不仅仅可以作为后台管理系统界面，也可以修改成一个可以展示项目并且美观的博客。项目地址在这里(本地跑效果更佳)，如果有好的意见欢迎提issue或pr。 项目的初始结构和构造原因已罗列如上，由于过些日子会引人ts，所以项目结构必然还会改动，但肯定基于这基本雏形扩展的。 下面对目录结构作以下说明 项目最初始是用create-react-app初始化的，create-react-app 是Facebook官方提供的react脚手架，也是业界最优秀的 React 应用开发工具之一; 中间件目录到时候可以引人日志中间件等;container和components存放的都是react组件，区别是：只要和主页样式有关的组件就放在container中，和功能有关的模块(比如我实现分装的表格组件、弹出输入框组件等)就应放到components中;前端有些通用配置最好是存到全局(浏览器)中，这样调用起来就不用引用了，方便;ajax模块需要自己实现的原因是到时候要是自己需要有跨域cors之类的需求，需要自定义多种Ajax请求(用fetch的情况下，未来fetch会越来越强大) 技术栈相关 虽然用到的技术栈众多，但是自己也谈不上熟练运用，多半是边查API边用的，所以只罗列些自己用相关的技术栈解决的点; webpack(2.6) ①按需加载： babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），在config/webpack.config.dev.js 文件中作如下修改:{ test: /\.(js|jsx)$/, include: paths.appSrc, loader: 'babel', query: { plugins: [ ['import', [{ libraryName: "antd", style: 'css' }]], ], cacheDirectory: true }}, ②引人less: 首先引人 less-loader 来加载 less 样式，同时修改 config/webpack.config.dev.js 文件loaders: [ { exclude: [ /\.html$/, /\.(js|jsx)$/,+ /\.less$/, /\.css$/, /\.json$/, /\.svg$/ ], loader: 'url', },... // Process JS with Babel. { test: /\.(js|jsx)$/, include: paths.appSrc, loader: 'babel', query: { plugins: [- ['import', [{ libraryName: "antd", style: 'css' }]],+ ['import', [{ libraryName: "antd", style: true }]], // 加载 less 文件 ], },...+ // 解析 less 文件，并加入变量覆盖配置+ {+ test: /\.less$/,+ loader: 'style!css!postcss!less?{modifyVars:{"@primary-color":"#1DA57A"}}'+ },] 这里利用了 less-loader 的 modifyVars 来进行主题配置， 变量和其他配置方式可以参考 配置主题 文档。 ③一键发布到gh-pages： 用到了gh-pages,使用 npm run deploy 一键发布到自己的gh-pages上，姑且把gh-pages当成生产环境吧，所以在修改config/webpack.config.dev.js 文件的同时也要对config/webpack.config.prod.js作出一模一样的修改。 ps:尽管我是这样发布到gh-pages的，该项目的gh-pages展示地址为这里，在gh-pages上展示图明显比本地大了好些像素，如果有朋友知道是为什么，不吝赐教啊。 ④引用路径的缩写： resolve: { fallback: paths.nodePaths, alias: { 'react-native': 'react-native-web', components: path.resolve(dirname, '..') + '/src/common/components', container: path.resolve(dirname, '..') + '/src/common/container', images: path.resolve(dirname, '..') + '/src/common/images', pages: path.resolve(dirname, '..') + '/src/common/pages', utils: path.resolve(dirname, '..') + '/src/common/utils', data: path.resolve(dirname, '..') + '/src/server/data', } }, 配置了引用路径的缩写后，就可以在任意地方如这样引用，比如 antd(2.10) antd是（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出的一个中台设计语言 Ant Design，使用者包括蚂蚁金服、阿里巴巴、口碑、美团、滴滴等一系列知名公司，而且我从他们的设计理念也学到了很多关于UI、UX的知识。 该项目采用的是antd最新的版本2.10.0,由于2.x的版本和1.x的版本还是相差蛮大的，之前参考的项目(基于1.x)改起来太费劲，所以在组件那块就干脆自己重新封装了一遍。这部分知识点我建议还是看文档，文档解决不了扒扒源码。 react-router(4.x) react-router 4.x和2.x的差异又是特别的大，召唤文档,网上基本上都还是2.x的教程，看过文档之后，反正简而言之其就是要让使用者更容易上手。印象最深的是以前嵌套路由写法在4.x中写到同层了。如下示例他们的效果是相同的。 2.x：
4.x:
还有更多的特性和API的出现，期待有更好的分析文章的出现，有机会我也会来总结下react-router(4.x)和(2.x)的差异。 fetch 先推荐这篇文章《传统Ajax已死，Fetch永生》，再推荐API; fetch是个好东西，好在简单，除了promise最基本的用法，还能这样写fetch(url).then(response => response.json()) .then(data => console.log(data)) .catch(e => console.log("Oops, error", e))try { let response = await fetch(url); let data = await response.json(); console.log(data);} catch(e) { console.log("Oops, error", e);} 但是其简洁的特点是为了让我们可以自定义其扩展，还是其本身就还不完善呢？我在调用JSONP的请求时，发现用fetch掉不同，后来在文档上才发现其不支持JSONP的调用，所幸社区还是很给力的找到了fetch-jsonp这个模块，实现了对百度音乐接口的JSONP调用。fetch-jsonp使用也和fetch类似，代码如下fetchJsonp(url,{method: 'GET'})??.then((res) =>res.json())??.then((data) => {}) redux 使用了redux也已经有段时日了，我对redux的定义就是更好的管理组件的状态，没有redux的时候就像现在这个应用一样，逻辑少状态变化也还不太复杂，但是一旦逻辑复杂起来，各种组件状态、界面耦合起来，就容易出岔子，那redux就是为了解决这个而生的，让我们可以更多地关注UI层，而降低对状态的关注。之前也写了些redux的文章，纸上得来终觉浅，绝知此事要躬行。 --------------------------更新--------------------------- 已经在项目中加入了redux技术栈。 项目的一些待扩展计划 封装组件 不管组件封装得好不好，个人感觉其是提高水平很高效的方法，多练，继续封装出各式各样的功能组件。 typescript 公司大概会在6月份开始，新的项目就要采用ts开发了，所以我也到时会在该项目中引人ts的语法，我现在的感觉是使用ts后，前后端对接会更加轻松，不会有一些类型不匹配的低级错误，而且antd貌似和ts也能兼容得蛮好。 测试框架 这部分其实我还是没什么经验的，先写上吧，有机会会拿这个项目开刀，并写心得。相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：
使用react如何实现菜单权限控制
本篇文章主要介绍了react实现菜单权限控制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧通常公司的后台管理系统都需要权限控制，即不同的角色用户看到不同的菜单，如下图：下面，通过react实现这样的后台管理系统(脚手架)，功能简介：1.顶部的菜单项根据用户的角色动态生成。2.侧边测菜单项根据已选的顶部菜单动态生成。直接上代码：路由配置：export default (
)顶部菜单项单独成了一个组件：// 动态数据import React, { Component } from 'react'import { Link } from 'react-router' // 引入Link处理导航跳转import { connect } from 'react-redux'import { fetchPostsIfNeeded, updateSubMenuWhenClick } from '../actions/count'import { Menu } from 'antd';class TopMenu extends Component { constructor(props){ super(props); this.handleMenuClick = this.handleMenuClick.bind(this); } handleMenuClick(e){ // console.log(e.item.props['data-menukey']); const { updateSubMenuWhenClick } = this.props updateSubMenuWhenClick(true, e.item.props['data-menukey']) } componentWillMount() { } componentDidMount() { const { fetchPostsIfNeeded } = this.props fetchPostsIfNeeded() } render() { const { menuList, fetchPostsIfNeeded } = this.props if(menuList.length != 0) { fetchPostsIfNeeded(true, menuList[0].key) } return (
) }}const getList = state => { return { menuList: state.update.menuList }}export default connect( getList, { fetchPostsIfNeeded, updateSubMenuWhenClick })(TopMenu)在render函数中，如果动态生成的顶部菜单数据长度不为0，则根据顶部菜单的key动态生成侧边菜单项。const { menuList, fetchPostsIfNeeded } = this.props if(menuList.length != 0) { fetchPostsIfNeeded(true, menuList[0].key) }上面是我整理给大家的，希望今后会对大家有帮助。相关文章：在webpack中如何实现多页面开发在Vue中如何实现侧滑菜单组件使用three.js如何实现3D影院在JS中有关函数节流和函数防抖（详细教程）
在ReactNative中如何使用Redux架构
本篇文章主要介绍了ReactNative中使用Redux架构总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧本文介绍了ReactNative中使用Redux架构总结，分享给大家。具体如下：使用Redux也有一段时间了。总结一下。为什么要使用Redux?背景：RN的state（可变，子组件不可见）和props（不可变，子组件可见）的设计，在面对大型项目时候，容易因为不经意修改state造成状态混乱，组件渲染错误RN使用了Virtual DOM，不需要Target绑定->Action修改UI属性，只要当状态变化，render新状态下的组件，数据单向传递，而MVC的设计模式存在双向数据流。RN不易进行测试，Redux提供了非常方便的mock测试方式。Redux开发开发环境安装Redux： ‘npm install _save redux'安装React Native和Redux绑定库：npm install _save react-redux安装Redux Thunk异步Action中间件：npm install _save redux-thunk三个原则单一数据源 整个应用的 state 被储存在一个对象树中，对象树存在于唯一的 store 中。store中的 state 绑定到组件State 是只读的惟一改变 state 的方法就是触发 action。action 是一个含有 type 属性的普通JS对象，type 可以用常量表示事件。使用纯函数来执行修改编写 reducers 来描述对应action如何修改 state 。一般可以用 switch(action.type) 来处理，无副作用使用react-redux提供了connect和Provider。1.Provider是顶层的分发点，属性就是Store，将State分发给所有被connect的组件2.connect：接受两个参数：一个是mapStateToProps或者mapDispatchToProps，一个是要绑定的组件本身。StoreStore 就是把 Reducer 和 action 联系到一起的对象。Store 有以下职责：维持应用的 state_类似数据库，存储应用的所有state。提供 getState() 方法。获取 所有的当前state；提供 dispatch(action) 方法更新 state，相当于存入数据库，存入action来改变state。通过 subscribe(listener) 注册监听器。Store本质上是一个对象，它以树的形式保存了整个应用的State。并提供了一些方法。例如getState( ) 和 dispatch( )。Redux应用只有惟一一个Store。Store通过createStore方法来创建，根据整个应用的根Reducer的初始State。代码如下：import { createStore, applyMiddleware } from 'redux';import thunk from 'redux-thunk';//异步import reducers from './reducers';const Store = applyMiddleware(thunk)(createStore)(reducers);export default Store;ReducersAction只是描述了有事情发生了这一事实，并没有指明应用如何更新state。这是reducer要做的事情。Reducer的本质是一个函数，并且是一个纯函数。没有任何副作用。简单来讲Reducer只负责做一件事，就是根据接收到的action和state来修改Store中的state：(state, action) => newState一般实现的时候，通过switch(action.type) 来判断不同的Action，default为旧state。同时可以定义初始状态。代码：import { combineReducers } from 'redux';const newState = (state = {}, action = {}) => { switch (action.type) { case ActionTypes.CSTATE: return { ...state, ...action.state }; case '_DPDATACHANGE_': return {...state, ...action.dpState}; default: return state; }};//Reducer 合并export default combineReducers({ newState,});注意:返回的是新state，如果需要保留部分旧state值，使用?state（ES7的对象展开语法，对对象会浅拷贝对应属性，这里等价于Object.assign({}, state, newState)），而如果合并state的话只会合并一层，对复杂state需要手动合并。ActionAction是一个普通JS对象，至少包括一个type属性代表事件，其他属性可以用来传递数据。实践上对一个流程定义一个函数，流程可以包括网络请求，最后返回Action，这个函数叫Action Creator。代码：Store可以dispatch这个Action，action的type表示标识符，state是它携带的数据。export const newState = state => { Store.dispatch({ type: ActionTypes.CSTATE, state, });};持久化当触发action时根据其reducer key恢复数据，然后只需要在应用启动时分发action，这也很容易抽象成可配置的拓展服务，实际上三方库redux-persist已经为我们做好了这一切。在Action中可以代码如下：export const getStorage = async (key) => { const d = await AsyncStorage.getItem(key); return JSON.parse(d);};export const setStorage = (key, value) => { AsyncStorage.setItem(key, JSON.stringify(value));};connect通过- 提供 getState() 方法。获取 所有的当前state通过connect，绑定需要的state以及Action Creator到你的组件的props上，这样组件就可以通过props来调用Action Creator，或者根据不同props来render()不同的组件。代码：mapStateToProps({ newState }) { const value = newState[name];//name: newState.name return { name, }; },上面是我整理给大家的，希望今后会对大家有帮助。相关文章：在Angular中如何实现隐藏显示在Angular中如何实现敏感文字提示在Angular中如何实现orderBy排序与模糊查询在javascript中如何获取键盘的keyCodevue vuex vue-rouert 权限路由（详细教程）
使用React如何进行组件库的开发
本篇文章主要介绍了详解使用React进行组件库开发，现在分享给大家，也给大家做个参考。最近针对日常业务需求使用react封装了一套[组件库], 大概记录下整个开发过程中的心得。由于篇幅原因，在这里只对开发过程中比较纠结的选型和打包等进行讨论，后续再对具体组件的封装进行讨论。概述我们都知道，组件化的开发模式对于我们的开发效率有着极大的提升，针对我们日常使用的基本组件进行封装，可以大量的简化我们对于基本UI的关注度，让我们的工作聚焦在业务逻辑上，很好的分离业务与基础UI的代码，使得整个项目更有调理，这也是我们要进行本组件库开发的原因。然而现有React开源组件有很多，像ant-design和material-ui等等，是否需要花费精力打造适合自身团队的组件库往往需要酌情考虑。我们来看下我现有团队及业务的几个特点：前端人员较多，需要相互协作，且有余力对组件进行开发产品业务相对复杂，需对某些组件进行定制化开发已经有成熟的设计规范，针对各种基础组件、基础样式等进行定义目前的项目较为凌乱，第三方组件引用杂乱无章可以看出，我们拥有封装自己组件的精力和基础，并且拥有通过基础组件封装改变目前开发现状的需求。所以，这件事情是我们应该并且需要尽快完成的事情。技术选型针对组件库的封装，我们首先面对的是技术选型以及方案的规划。大概包括以下两点：最基本的技术方案开发流程和规范技术方案选择Webpack + React + Sass由于团队现有的项目都是基于React+Redux进行开发的，那我们选择的开发语言无疑是React。SASS针对css选择，虽然现在针对组件化开发，比较流行CSS Modules和CSS-IN-JS两中模块化解决方案，我们更希望我们的组件是可进行定制的。因此针对组件，我们以Sass作为预编译语言，提搞效率和规范性。配合css-modules，我们可以很方便的进行针对实际需求进行样式更改。例如我们有一个Tab组件，我们已经定义好了其通用的样式：.tip-tab { border: 1px solid #ccc;}.tip-tab-item { border: 1px solid #ccc; &.active { border-color: red; }}而在业务中，针对某一个需求，我们需要针对Tab组件的样式进行微调。让其在激活(active)状态下border-color是蓝色的。你当然可以说，我们可以让我们的组件暴露出一些props，针对这些修改进行配置，传入不同的props对应不同的风格。但是我们往往无法满足所有的业务需求，不可能针对组件把各种样式都封装进去。针对这种方案，我们采用css-modules为其添加唯一的模块样式：
针对该模块，对其进行基本样式的修改:.unique-tab { :global { .tip-tab-item { border-color: #eee; &.active { border-color: blue; } } }}这样，针对该模块的定制样式，能很好的进行针对需求的样式定制，同时不对全局样式进行污染。Icon针对项目图标，计划使用svg-sprite方案。但是由于产品处于在不断迭代的过程中，新的图标不断在增加。目前我们并不会对图标统一进行打包，而是在每次进行组件打包的过程中，从项目中导入所有的图标。用以下方式进行引入：import Icon from '@common/lib'import errorIcon from '@images/error.svg'
其实更好的方式是针对所有的图标进行统一打包，生成svg-spirte文件(具体原理可以查询svg-sprite,在此不再赘述)。当我们进行使用时，只需直接引用即可，避免每次都进行打包，减少webpack处理依赖的时间：
开发流程和规范针对开发流程和规范，我们遵循以下几个原则：组件库完全独立于项目进行开发，便于后续多个项目进行使用等组件库包含三种模式：开发，测试，打包，文档案例，区分不同的入口及状态使用pure-renderautobind等尽可能保证组件的性能及效率保证props和回调的语义性，如回调统一使用handleXXX进行处理为了便于后续的扩展，我们更希望整个组件库完全脱离于项目进行开发。保证组件库仅对于最基本的组件进行封装，将项目UI代码与业务逻辑进行分离。针对不同的模式下，我们有不同的文件入口，针对开发模式，我们启动一个dev-server, 在里面对组件进行基本的封装，并进行调试。打包时，我们只需对组件内容进行封装，暴露统一的接口。在文档中，我们需要进行案例和说明的展示。所以我们在利用webpack的特性进行各种环境的配置：npm run dev // 开发npm run test // 测试npm run build // 构建npm run styleguide // 文档开发npm run styleguide:build // 文档打包组件库作为项目的最小力度支持，我们需要保证其最基本的渲染效率，因此我们采用pure-render/autobind等对其进行基本的优化。React有很多优化方式，在此不进行赘述。打包基础针对组件库的打包，我们以UMD格式对其进行打包。webpack可以针对输出进行格式设置：（引自cnode)“var” 以变量方式输出“this” 以 this 的一个属性输出： this[“Library”] = xxx；“commonjs” 以 exports 的一个属性输出：exports[“Library”] = xxx；“commonjs2” 以 module.exports 形式输出：module.exports = xxx；“amd” 以 AMD 格式输出；“umd” 同时以 AMD、CommonJS2 和全局属性形式输出。配置如下：output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].js'), chunkFilename: utils.assetsPath('js/[id].js'), library: 'TipUi', libraryTarget: 'umd'}依赖很明显，我们封装的是一个针对React的组件库，并不应该把React引用进去。一般我们可以采用externals的方式对其进行处理。在这里, 我们采用dll方式将其与其他第三方依赖统一进行打包，并将manifest.json和三方依赖的输出文件输出到项目中去，在项目中也使用dllReference进行引用。避免在项目中使用到这些依赖时重复进行打包。同时，由于我们的组件库处于一个不断维护的状态。这就需要我们维持好项目库和项目之间的打包关系，具体的流程如图所示：在每次进行项目打包的时候，首先检测UI库是否有更新，若没有更新，则直接进行打包。反之继续检测dll的依赖是否有变化，若有，则打包dll,否则直接打包组件库内容。然后将输出结果同步到项目中，再进行最终打包。当然，以上的这些流程都是自动进行的。文档和示例一个完善的文档对于一个组件库是及其重要的，每个组件有什么样的配置参数，拥有哪些事件回调，对应的Demo和展示效果。假设没有这些，除了封装组件的人，没有人知道它该如何使用。但是写文档的过程往往是痛苦的，在这里推荐几个文档生成库，可以极大的简化文档工作：docsify 基于Vue的组件生成器，轻量好用react-styleguidist 基于React的组件库文档生成器，自动根据注释生成文档，支持Demo展示。超好用bisheng ant design自己写的文档生成器我们使用的styleguidist, 可以将md自动转化为文档，支持在md内直接调用你封装好的组件并进行展示，简单好用。最后封装的文档大概长这样：总结其实封装组件库这种工作有很多的东西值得琢磨和钻研，由于篇幅原因，在这里只对开发过程中比较纠结的选型和打包等进行讨论，后续再对具体组件的封装进行讨论。在书写的同时，不断参考下ant design这种优秀的组件库，能学到很多的东西。更深刻的理解封装组件的思想，是一个很好的过程。上面是我整理给大家的，希望今后会对大家有帮助。相关文章：使用Vue实现底层原理（详细教程）在nodejs环境下微信扫码支付功能如何实现？在JS中如何实现运动缓冲效果（详细教程）
有没有比较好的React Native教程或者React Native学习资料？
官方文档就是很好的资料。
我这里还有一份pdf教程，英文版的，beginning-mobile-app-development-with-react-native：pan＃baidu＃com/s/1sj1OYPB
有的，我之前在网上一个叫做好学好职的平台里面找过，并且资料还是比较详实的。你搜应该有
010 听晴明老师从头讲React Native百度网盘免费资源在线学习
链接: https://pan.baidu.com/s/1SQ9GH1vgSg2h5dDM1Nd4Pg
提取码: 9542
010 听晴明老师从头讲React Native 课程资料 课时9 ES6基础.mp4 课时8 Javascript基础.mp4 课时7 开发工具选用Webstorm.mp4 课时30 Android打包发布.mp4 课时29 使用Linking调用播放视频.mp4 课时28 悬浮层与绝对定位.mp4 课时27 本地缓存数据.mp4 课时26 针对安卓的界面调整.mp4 课时25 TabNavigator(选项卡切换).mp4 课时24 StackNavigator(页面跳转).mp4 课时23 刷新和分页的补充.mp4 课时22 获取网络数据02.mp4 课时22 获取网络数据01.mp4
基于umi的React项目结构介绍
本项目是基于umi搭建的，具体可以参考 Ant Design 实战教程（beta 版）
以下命令顺序执行，用来完成umi的初始化
然后，我们开始建项目的文件目录
修改package.json
我们运行 npm run dev 就能看到hello world.
现在我们使用的都是umi的默认配置，我们还需要自己的配置
添加 umi-plugin-react 插件
配置 config/config.js 文件
首先我们使用antd的Layout布局，修改src/pages/index.js
重新运行 npm run dev，页面就会显示出当前的界面
在pages下新建home.js文件
修改文件
保存后页面就会发生变化，Content中就会显示 Home的内容
在umi中可以直接使用css，但是并不支持scss，我们需要加两个loader，
直接npm安装 node-sass和sass-loader 即可，剩余的事情umi已经帮我们做好了。
在src/assets下新建文件夹
在src/pages/index.js 引用style.scss
在home.js同级新建home.scss 文件
在home.js引用，并修改render
用第二种方法的情况：
刷新页面发现并没有变化，打开浏览器调试窗口，查看sources
找到引用的css文件，搜索可以看到好像我们的样式确实是存在的，只不过被加上了其他的后缀(为了保证不会出现全局污染)
ps:这个问题当时我找了好久
这个是umi自己默认加上，我们并不想要这个东西，在config/config.js文件中添加配置
现在我们的项目只有一个home页面，我们多加几个，来实现跳转的功能
在home.js同级添加文件 center.js
修改home.js
修改config.js
点击页面的"个人中心"，即可跳转到个人中心页面
除了点击Link跳转页面外，我们还有其他的跳转需求，比如：返回上一个页面，或者登录后跳转。这些都可以算是事件跳转，
修改center.js
在umi中，redux是封装在dva中的，但是我们想用原始的那种redux (仅仅是个人原因)，我们就不去使用dva的模式。
在项目中actions文件主要用于处理请求、异步等，reducers文件则是处理数据以及其他的改变
在reducers目录下新建文件
因为在umi中会自动导入redux和react-redux包，所以我们不需要在安装，可以直接使用
store文件创建好了之后，修改pages/index.js
这样我们可以在所有的页面都使用store内容
修改 pages/home.js
重新启动 npm run dev
此时页面上看不到详情内容，
手动修改一下reducers/home.js 的isShowDesc值为true，保存之后在页面上就能看到详情内容
手动修改只是测试一下
下面我们来利用dispatch修改isShowDesc的值(这里不使用更简单的组件state属性来处理)
给home页面添加一个button，点击button来显示/隐藏详情
这样我们就能够点击按钮来改变详情的状态
网络请求使用fetch,使用mock模拟数据
安装 fetch、mockjs
封装一下请求方法，并使用mockjs模拟请求
在home.js中使用
保存，刷新页面后就能看到数据
Antd的主题定制有好几种方法，该项目是基于umi的，所以就是用umi配置的方法来定制。
在config/config.js 文件中添加配置
在src/assets/css 下新建theme.js文件
这里只修改一个属性值 (其他属性可以参考 文档 )
编译后，home页面的按钮主题就被修改了
至此一个基于umi的react项目结构就讲完了。
如何通过react+redux升级版来实现todoList
本篇文章主要介绍了react+redux的升级版todoList的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧又是很久不写博客了，最近在用蚂蚁金服的ant-design-pro写毕设，写着写着写不下去了，很多东西都不理解，不得不说大神写出来的东西都是需要花学习成本的，或者底子好，对于React新手来说就有点难了。所以就老老实实的认真看了下Redux到底如何使用，在这里推荐一下自己最近在看的书，写的算是比较详细的：《深入React技术栈》。废话不多说，今天就分享下自己如何使用redux来实现一个todoList的，希望对想要用redux的你会有所帮助。（为什么叫升级版呢？因为之前写过一个没有用redux的todoList）该项目使用react官方的create-react-app架构，每个目录可以根据自己的需求来划分。下面解释下每个目录的内容和功能。public:主要放静态资源（入口html文件，图片资源，JSON文件等）；src/component:不同的组件；src/layouts:整个页面的基本架构，主要就是Nav，Footer，Content。Nav里面显示User和Notice的数据，Content中实现页面路由的切换，Footer固定不变；src/redux:--src/redux/configureStore:生成整个应用的store；--src/redux/reducers:所有reducer的集合；src/routes:页面的整体路由；src/utils:自己封装的工具；views:存放项目中所要展示的所有页面；index:整个项目的入口文件；二. 具体实现1. 整个应用中store中应存储什么数据？const initialState = { taskListData: { //任务列表 loading: false, error: false, taskList: [], }, userData: { //用户信息 loading: false, error: false, user: {}, }, noticeListData: { //通知列表 loading: false, error: false, noticeList: [], }, taskData: { //任务详情，在详情页使用 loading: false, error: false, task: {}, }};2. reducer的分布：每个state对应一个reducer，所以一共需要四个reducer，在src/redux/reducers中将所有的reducer合并,并且注意每个reducer的名字要和state同名：/*redux/reducers.js*/import { combineReducers } from 'redux';import userReducer from '../component/User/indexRedux';import noticeReducer from '../component/Notice/indexRedux';import todoListReducer from '../views/TodoList/indexRedux';import taskReducer from '../views/Detail/indexRedux';export default combineReducers({ userData: userReducer, noticeListData: noticeReducer, taskListData: todoListReducer, taskData: taskReducer,});每个state都对应一个reducer，所以和state一样，reducer应在放在最顶级的父级组件的目录中，所以将taskListData的reducer放在src/views/TodoList中，其他同理，代码如下：/*views/TodoList/indexRedux.js*/const taskListData = { loading: true, error: false, taskList: []};//不同的action;const LOAD_TASKLIST = 'LOAD_TASKLIST';const LOAD_TASKLIST_SUCCESS = 'LOAD_TASKLIST_SUCCESS';const LOAD_TASKLIST_ERROR = 'LOAD_TASKLIST_ERROR';const ADD_TASK = 'ADD_TASK';const UPDATE_TASK = 'UPDATE_TASK';const DELETE_TASK = 'DELETE_TASK';function todoListReducer (state = { taskListData }, action) { switch(action.type) { case LOAD_TASKLIST: { return { ...state, loading: true, error: false, } } case LOAD_TASKLIST_SUCCESS: { return { ...state, loading: false, error: false, taskList: action.payload, }; } case LOAD_TASKLIST_ERROR: { return { ...state, loading: false, error: true }; } case UPDATE_TASK: { const index = state.taskList.indexOf( state.taskList.find(task => task.id === action.payload.id)); console.log(index); state.taskList[index].status = !state.taskList[index].status; return { ...state, taskList: state.taskList, }; } case DELETE_TASK: { const index = state.taskList.indexOf( state.taskList.find(task => task.id === action.payload.id)); state.taskList.splice(index, 1); return { ...state, taskList: state.taskList, }; } case ADD_TASK: { let len = state.taskList.length; let index = len > 0 ? len - 1 : 0; let lastTaskId = index !== 0 ? state.taskList[index].id : 0; state.taskList.push({ id: lastTaskId + 1, name: action.payload.name, status: false, }); return { ...state, taskList: state.taskList, } } default: { return state; } }}export default todoListReducer;3. action creator的分布：每个动作都代表一个action，action由组件发出，所以将action creator单独一个文件，放在组件目录中。例如：ListItem组件的action creator:/*ListItem/indexRedux.js*///处理更新任务状态后和删除任务后的taskList的状态;const UPDATE_TASK = 'UPDATE_TASK';const DELETE_TASK = 'DELETE_TASK';//action creator，更新和删除任务export function updateTask (task) { return dispatch => { dispatch({ type: UPDATE_TASK, payload: task, }); }}export function deleteTask (task) { return dispatch => { dispatch({ type: DELETE_TASK, payload: task, }); }}三. 如何将redux和组件连接react-redux提供了connect方法，将state和action creator绑在组件上，然后在组价内部以props的方式获取。下面是TodoList页面的具体实现：import React, { Component } from 'react';import { connect } from 'react-redux';import { bindActionCreators } from 'redux';import List from '../../component/List';import { loadTaskList } from '../../component/List/indexRedux';import { updateTask, deleteTask } from '../../component/ListItem/indexRedux';import { addTask } from '../../component/SubmitDialog/indexRedux';class TodoList extends Component { render () { return (
); }}export default connect( state => { return { loading: state.taskListData.loading, error: state.taskListData.error, taskList: state.taskListData.taskList, };}, dispatch => { return { loadTaskList: bindActionCreators(loadTaskList, dispatch), updateTask: bindActionCreators(updateTask, dispatch), deleteTask: bindActionCreators(deleteTask, dispatch), addTask: bindActionCreators(addTask, dispatch), };})(TodoList);connect方法有四个参数，这里主要说下前两个参数：（1）mapStateToProps：参数为state，返回页面所需要的所有state；（2）mapDispatchToProps：参数为dispatch，返回页面所要使用的异步回调函数。眼明手快的你肯定看到了，我们从redux包中导出了bindActionCreators方法，该方法将dispatch和action creator绑定，用来触发action。四. 异步的action creator如何触发呢？因为每个action creator都是异步函数，我们传给组件的只是函数的声明，所以就要引入我们的中间件，只用在生成store时加入就行了：/*redux/configureStore.js*/import { createStore, applyMiddleware } from 'redux';import thunk from 'redux-thunk';import reducers from './reducers';const initialState = { taskListData: { loading: false, error: false, taskList: [], }, userData: { loading: false, error: false, user: {}, }, noticeListData: { loading: false, error: false, noticeList: [], }, taskData: { loading: false, error: false, task: {}, }};let enhancer = applyMiddleware(thunk);let store = createStore( reducers, initialState, enhancer,);export default store;在上面的代码中thunk就是一个中间件，我们将引入的中间件传入applyMiddleware就可以了。五. store在哪里传入组件呢？我们肯定会想到，store在整个应用中都存在，所以应该在整个应用的最顶层，对于一般项目而言，当然就是最顶端的路由了：import React, { Component } from 'react';import { BrowserRouter as Router, Route } from 'react-router-dom';import { Provider } from 'react-redux';import BasicLayout from '../layouts';import store from '../redux/configureStore';class RouterApp extends Component { render () { return (
); }}export default RouterApp;Provider是react-redux的一个组件，作用就是用来将store传入整个应用。上面是我整理给大家的，希望今后会对大家有帮助。相关文章：使用JS如何实现控制多个滚动条同步滚动使用vue-cli+webpack如何搭建vue如何使用JS编写Ajax请求函数Chrome Firefox 自带调试工具调试（详细教程）有关Vue.js如何实现无限滚动加载
如何用 React Native 创建一个iOS APP
你可以在 Github 里先下载 React Native 的代码框架。里面还有一些示例项目，2048 的游戏， Movies（一个看电影的 APP）,SampleApp, TicTacToe (一款游戏)和 UIExplorer（能显示出所有用 React Native 替代的控件，如ListView，TabBar，MapView, Slider）），对于学习用如何用 React Native 创建 UI,这些都是非常好的例子,尤其是 UIExplorer APP，它几乎用到了每一个您的 APP 中需要创建的 UI 控件。
首先，我们先来安装相应的工具。React native 是使用 Node.js 来 创建 JavaScript 代码。如果你已经在你电脑上安装上了这些工具，你可以跳过下面这几步。
推荐使用 Homebrew的方式来安装 nvm，watchman 和 flow。
在Mac下，如果用homebrew，那么只用一行就可以装好:
brew install node
接下来安装watchman
brew install watchman
watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.
接下来安装 npm
npm install -g react-native-cli
nmp 是 node的一个三方管理工具，相当于 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您能够轻松下载和管理你的项目需要的任何依赖库。
在终端，找到你希望保存的项目文件，然后运行下面的文件夹。
react-native init BookSearch
以上使用 CLI 工具来构建一个 Native 项目，是准备建立并运行原样。当这个过程完成后，你就会在终端窗口中打开 Xcode 的BookSearch.xcodeproj 并运行应用程序像往常一样。做到这一点，模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时，它加载从以下网址 JavaScript 的应用程序。
React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发
iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React
一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native
把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook
在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
其好处显而易见：减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。
下面，我们可以尝试用React Native创建一个 iOS APP.
在我们开始之前，我建议：你可以在 Github
里先下载 React Native 的代码框架。里面还有一些示例项目，2048 的游戏， Movies（一个看电影的
APP）,SampleApp, TicTacToe (一款游戏)和 UIExplorer（能显示出所有用 React Native
替代的控件，如ListView，TabBar，MapView, Slider）），对于学习用如何用 React Native 创建
UI,这些都是非常好的例子,尤其是 UIExplorer APP，它几乎用到了每一个您的 APP 中需要创建的 UI 控件。
首先，我们先来安装相应的工具。React native 是使用 Node.js 来 创建 JavaScript 代码。如果你已经在你电脑上安装上了这些工具，你可以跳过下面这几步。
推荐使用 Homebrew的方式来安装 nvm，watchman 和 flow。
在Mac下，如果用homebrew，那么只用一行就可以装好:
brew install node
接下来安装watchman
brew install watchman
watchman是Facebook的一个文件观察者。React Native 用它来检测代码的变化.
接下来安装 npm
npm install -g react-native-cli
nmp 是 node的一个三方管理工具，相当于 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您能够轻松下载和管理你的项目需要的任何依赖库。
在终端，找到你希望保存的项目文件，然后运行下面的文件夹。
react-native init BookSearch
以上使用 CLI 工具来构建一个 Native 项目，是准备建立并运行原样。当这个过程完成后，你就会在终端窗口中打开 Xcode
的BookSearch.xcodeproj
并运行应用程序像往常一样。做到这一点，模拟器将启动您的应用程序的运行。一个终端窗口也将打开。当一个Native应用程序启动时，它加载从以下网址
JavaScript 的应用程序。
http://localhost:8081/index.ios.bundle
?
终端被打开，服务器开始作出反应来处理上述请求。该 Native 负责读取和建设 JSX（我们将看看这个版本）和 JavaScript 代码。
运行这个 APP,你可以看到下图中的模拟器，如果你想在开发运行有几个步骤，你应该这样做。
欢迎屏幕给出了一些关键的指令，你应该注意：编辑应用程序的用户界面，你应该修改，当你创建项目时生成的 index.ios.js 文件，如果您更改
JavaScript 代码，重新加载命令应用程序 Command-R 看到的变化，如果你想要更多的选择，使用命令控制
Command-Control-Z 打开开发者菜单，提供了这样的选项，使现场重新加载和浏览器的调试。
在任何时候做本教程时你可能会遇到一个红色屏幕模拟器，可以检查错误消息。它能让你知道这个问题是与你的代码还是服务器有关系。当我接收到错误的消
息「无法连接到服务器」 在模拟器和检查终端有一个「流程终止」 错误消息时我陷入了服务器连接问题。当这种情况发生时，关闭终端窗口，停止在
Xcode
中的应用并再次运行它。对于其他错误，是由于语法错误代码中或网络请求超时时（如果你的应用从互联网上获取数据），一个简单的重新加载后修复这个问题应该
怎么做。
如果你在敦促 Command-R 键盘但什么都没有发生，硬件键盘可能没有连接到模拟器上。选择模拟器上的选项菜单以连接它：Hardware > Keyboard > Connect Hardware Keyboard.
如果你按上边程序做了它依然不能重新加载，那么你可能需要重启你的电脑。我遇到过一次突然死机，重启电脑可以完成加载。
我们现在开始构建应用程序，打开 index.ios.js 文件。我建议使用适合 web 开发的 IDE。你还可以使用
Xcode，但你会发现它并不适合因为在代码格式化、自动完成和语法错误突出显示时它不是非常灵活。你可以通过学习本文来决定并选择合适的
JavaScript IDE。我用过 RudbyMine，但实际上任何 IDE 都支持 JavaScript。如果你能得到一个支持 JSX
的那真很不错。
当你打开 indx.ios.js 文件，你就会看到正在运行的应用程序构建 UI 的代码。你可能看到以下代码块。
'use strict'
以上代码启用了严格的模式，增加了处理原生 JavaScript 代码对错误的改善。
var React = require('react-native');
以上代码可以加载 react-native 模块，并将它赋予变量的反应。在你调用任何模块之前你需要把外部模块加载到你的文件中来。可以把它作为Swift 和 Objective-C 的导入库。
var { AppRegistry, StyleSheet, Text,
View,
} = React;
上面是一个解构赋值，你可以通过它将多个对象属性分配给一个变量。这能让他们在文件作用域被引用。以上是可选择的，但如果你不用它，那么每次你使用
一个组件在你代码中时，你就必须使用完全限定的名称，例如：「React.AppRegistry」而不能只用「AppRegistry」
、「React.StyleSheet」 而不能用「StyleSheet」 等等。
var BookSearch = React.createClass({
render: function() {
return (
Welcome to React Native!
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
);
}
});
上面创建一个类只有一个渲染 () 函数。在渲染函数中无论什么被定义都是将输出到屏幕上。上述使用
JSX（JavaScript语法扩展）来构建应用程序的 UI。如果您以前使用过 XML（甚至HTML），JSX
就会记住并熟悉你。它具有相同的均衡功能来打开和关闭标签并使用属性来设置值标签。你不需要使用 JSX 本地反应，你可以使用纯
JavaScript，但 JSX 建议它的简单定义树结构。如果你有很多 UI 的代码，通过大型的 JSX 树结构将更容易阅读理解。
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用
CSS 样式应用程序的UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如:
style={style.container}设置样式定义容器的外部视图包含其他UI组件。
上面的样式应用可于视图的内容。如果你做过 web 开发或用过 CSS（层叠样式表），在此之前这应该是熟悉的。React Native 使用
CSS 样式应用程序的 UI。如果你看看 JSX 代码，你会看到不同风格的代码被用在不同的地方。例如:
style={style.container}设置样式定义容器的外部视图包含其他 UI 组件。
React Testing Library入门
React Testing Library 基于 DOM Testing Library 的基础上添加一些API，主要用于测试React组件。如果是其它的技术栈，可以选择对应的Testing Library库。该库在使用过程并不关注组件的内部实现，而是更关注测试。该库基于react-dom和react-dom/test-utils，是以上两者的轻量实现。
注：React Testing Library官方文档需翻墙查看。
注：如果使用Create React App初始化React应用时，会有选项提示是否要使用React Testing Library
在编写单元测试过程中，可以按照AAA模式实现。
更多例子： fetch
推荐教程： How to use React Testing Library Tutorial
render render的参数：
render的结果：
render的例子：
文档： https://testing-library.com/docs/react-testing-library/api#render
cleanup 相当于给组件置成unmount,一般在afterEach()中执行，如果使用的Jest,不需要在afterEach中手动设置，框架已默认每次test结束后执行cleanup。
Queries
关于具体差别的例子可以看： https://www.robinwieruch.de/react-testing-library
也可以自定义选择器： https://testing-library.com/docs/react-testing-library/setup#add-custom-queries 详细queries,查阅： https://testing-library.com/docs/react-testing-library/cheatsheet#queries
fireEvent
events API
act 对react-dom/test-utils中的 act 函数进行了一层包装。act的作用是在你进行断言之前，保证所有由组件渲染、用户交互以及数据获取产生的 更新 全部在dom实现。
waitFor 用于异步
screen
screen的方法继承自queries, queries有的能力都有，此外还增加了debug()的能力.
（1） 关于更多自定义的东西，例如render、选择器以及与Jest有的配置，查阅 官方文档 吧，写得也是很清楚哦！
（2）对于dom的一些断言，可以添加testing-library库提供的jest-dom/extend-expect来更好得对dom进行断言。
匹配器概览：
具体用法，可以 查阅文档
好啦，关于React testing Library的东西基本都涵盖了，至于更深层的东西，就去查阅源码吧！