ReactJS学习系列课程(React react常用架构分析)
最近学习React框架,与其说react是一个新的框架,不如过React是一个新的思想,新的尝试,做惯了前端框架的工程师都知道,MVC,MVVM一直被大家公认为一个非常不错的模式,但是Facebook的工程师确不以为然,推陈出现,创作了这个新的开始,对于一个新的模式,必然有新的架构出现,今天我们来看看React常用架构是什么样的呢?当然这并不是唯一,但是大同小异,万变不离其宗。 我们看下面这张架构图: 下面我们逐一进行分析: package.json这个文件在常用不过了,任何一个项目都会看到,基本我们所有的依赖库都是通过package.json,也就是npm进行安装的,这样也方便多人合作, 如果有需要我们也可以同样引进bower.json. 对于这个文件中 主要有三个模块:
webpack.config.js这个文件在webpack章节已经讲到了,在此不做过多分析。 index.js这是整个程序的入口文件, 定义了最上层的导入库,我们用webpack大包,也是从这个入口开始的哦,当然也包括css导入。 containers文件夹从定义上讲,这是一个容器,我们大可以定义为App.js,这个容易包含了所有的组件。可以称之为组件和路由的组合体。 constants文件夹对于任何一个项目而言,都会用到公众常量的问题,Facebook的架构中通常会将这个常量提取出来,向下面代码: export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';
export const EDIT_TODO = 'EDIT_TODO';
export const COMPLETE_TODO = 'COMPLETE_TODO';
export const COMPLETE_ALL = 'COMPLETE_ALL';
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED';
components文件夹这个顾名思义,就是所有组件应该存放的地方,比如button,header,footer等等,还有一些组合组件都要放在这里。 actions 文件夹如果我们要用redux来处理数据,管理react的state,用户交互过程中必然会触发很多的action, 比如增删改查等等,所以我们需要对这些action做相应的管理。 像下面的代码: import * as types from '../constants/ActionTypes';
export function addTodo(text) {
return { type: types.ADD_TODO,text };
}
export function deleteTodo(id) {
return { type: types.DELETE_TODO,id };
}
export function editTodo(id,text) {
return {type: types.EDIT_TODO,id,text };
}
export function completeTodo(id) {
return { type: types.COMPLETE_TODO,id };
}
export function completeAll() {
return { type: types.COMPLETE_ALL };
}
export function clearCompleted() {
return {type: types.CLEAR_COMPLETED};
}
reducers 文件夹个人理解,如果想通过react-redux 来管理react状态,我们需要通过创建reducer, 在reducer我们可以结合action对数据做过滤删除,添加的工作。 store 文件夹这是一个数据仓库的位置,我们创建的reducer , 需要通过createStore存储在一个仓库中,createStore这个function来自redux库,也就说在项目中,我们既需要引入react-redux,也需要引入原有的redux库。 以上就是常用的react架构,这也是官方推荐的一个方式,当然还有其他的架构,原理上比较相似,大家只做参考,毕竟架构师的思想的独立的。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |