本文章适合对React稍微有了解的工程师阅读。
近期,我要设计一个可被重用的组件(open-mind即时通讯前端组件),在此写下开发心得。初学React,非专业前端工程师,水平有限,重在抛砖引玉。
现在,我们来开始构建一个组件。
一个组件,就是一个React项目。可以通过npm init命令来新建一个项目。
$ cd ***** //定位到要建立项目的位置
$ npm init //新建一个项目
我的组件使用了ES6语法编写,由于目前浏览器只支持ES5,所以需要BABEL的支持,BABEL可将ES6代码转为ES5。另外我的组件除了依赖基本的React、React-dom还依赖于Antd等。所以编辑项目文件夹里的package.json,如下:
package.json内容:
{ "name": "open-mind", "version": "1.0.6", "description": "", "main": "lib/index.js", "private": false, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "babel src -d lib", "prepublish": "npm run build" }, "keywords": [ "im","strophe" ], "author": "TonyWong", "license": "ISC", "devDependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-core": "^6.18.2", "babel-loader": "^6.2.8", "babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-import": "^1.1.0", "babel-plugin-react-transform": "^2.0.2", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-0": "^6.16.0" }, "dependencies": { "react": "^0.14.8", "react-dom": "^0.14.8", "history": "^1.17.0", "strophe.js": "^1.2.4", "superagent": "^3.3.1", "antd": "^2.5.2", "layer": "^0.1.0" } }
|
然后对插件进行下载,在项目位置下执行
$ npm install
执行完后,在项目位置添加一下几个文件夹:assets、src、style。
新建.babelrc(BABEL的配置文件,windows无法直接创建该文件,可通过echo指令或者其他ide软件进行创建),添加如下内容:
.babelrc内容:
{ "presets": [ "es2015", "stage-0", "react" ] } |
最终的项目结构如下:
这样我们的组件项目的基本结构就建好了,我们在src中编写组件源码,具体React代码的编写这里就不介绍了,自行百度。最后在项目位置执行:
$ npm run build
该指令表示执行pakage.json中的build脚本。从pakage.json文件中可看出,该脚本的内容是,使用BABEL插件将src目录下的ES6代码转成ES5代码并存放在lib文件夹内。这样一个组件就构建好了。
现在在其他项目中(比如项目A)要使用该组件,只需要将刚才构建好的项目拷贝到项目A的node_modules文件夹中,就可以像引用其他组件一样,引用你自己开发的组件了。你也可以将你开发的组件发布到npm仓库中,然后通过npm install指令下载你发布的组件。
发布组件的过程很简单。首先在npm官网上注册一个账号。然后在项目位置执行如下指令:
$ npm login
根据提示填入账号、密码、邮箱地址。再执行如下指令即可:
$ npm publish
在进行组件代码开发时,我们要注意一个可重用的组件应该只做以下几件事:一、接收数据;二、渲染数据;三、组件内部逻辑。组件与后端交互的业务方法不应该封装在组件内,应该由调用组件的父组件内定义,并传入该组件。
以我开发的open-mind中的Im组件为例,它有以下几个属性:
userName:用户名
pwd:密码
nickName:昵称
themeStyle:样式类型
history:路由
imUrl:即时通讯服务器地址
imServletUrl:即时通讯Servlet服务地址
serverName:即时通讯服务器域名
resource:即时通讯资源名称
recSysMessageHandler:接收到消息后的回调函数
businessHandler:其他组件内需调用的业务方法
其中recSysMessageHandler和businessHandler接收的就是需要与后端服务器交互的业务逻辑方法。来看下传入businessHandler的一个实现。
import Request from '../../../common/commonFunction/request'; import Config from '../../../config.json'; //获取用户信息 function getUserInfo(data,e, successCallback, errCallback){ Request.requestToUumsByPost("im/getUserInfo",data,e,successCallback,errCallback ); }; //获取人员机构树根节点 function findParents(data,e, successCallback, errCallback){ Request.requestByGet("im/findParents",{},e,successCallback,errCallback ); }; //获取人员机构树子节点 function findChildrens(data,e, successCallback, errCallback){ Request.requestByGet("im/findChildrens?orgId=" + data.orgId,{},e,successCallback,errCallback ); }; //查找用户 function getUserBySearch(data,e, successCallback, errCallback){ Request.requestToUumsByPost("im/getUserBySearch",data,e,successCallback,errCallback ); }; //下载文件地址 function downloadUrl(fieldId,fileName){ return Config.uumsServer+"im/download?fieldId="+fieldId+"&fileName="+encodeURI(fileName); };
let ImBusinessHandler={ getUserInfo:getUserInfo, findParents:findParents, findChildrens:findChildrens, getUserBySearch:getUserBySearch, uploadUrl:Config.uumsServer+"im/upload", downloadUrl:downloadUrl };
export default ImBusinessHandler;
|
可以看出都是与后台有关系的一些业务方法。
如何开发可重用的React组件就简单介绍到这里。若有对例子感兴趣
$ npm i open-mind --save