React 入门实践
简介首先想要介绍的是 React,看到这篇文章的朋友想必都有一些关于 React 的了解了,但对于刚接触的新人而言,在这就要简要地介绍一下了。然后就是关于使用 React 构建一个简单单页应用(下文用 SPA 代替,Single Page Application)的一些介绍和讲解。 关于 ReactReact 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。(更多相关介绍请看这) 特点:
组件化:
生命周期:
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
此外,React 还提供两种特殊状态的处理函数。
正题那么进入正题,花了点时间去写一个简单的 SPA,也算是一个比较完整 React 骨架,但不包括测试(测试的教程可以看这个),相关源码可以查看 react-start-kit。 接下来看看我们这个项目的构建需要用到些什么:
还有一些没有列举出来,具体可以看仓库源码的 配置项Webpack说到 React 项目的构建就不得不提 Webpack 这个神器。构建工具有很多,例如 Grunt,Gulp,Brunch 等,相比这些构建工具,Webpack 感觉就是和 React 不谋而合,尤其是 react-hot-loader 这样的神器(热加载),让 Webpack 成为最主流的 React 构建工具。 关于 Webpack 的特性以及介绍这里就不赘述了,我们可以从下图看出 Webpack 的作用: 接着我们从项目代码中来看 Webpack。 entry: { app: [__dirname + '/src/index'],},output: { path: __dirname + '/_dist',filename: '[name]_[hash].js',}
这部分主要是指定入口和出口文件。 module: {
loaders: [{
test: /.js$/,loaders: ['babel'],exclude: /node_modules/,{
test: /.css$/,loaders: ['style','css'],include: /components/,{
test: /.(jpe?g|png|gif|svg|ico)/i,loader: 'file',{
test: /.(ttf|eot|svg|woff|woff2)/,{
test: /.(pdf)/,{
test: /.(swf|xap)/,}],}
而这部分会帮助我们去处理不同类型的文件,其中 最后配置好的 config 是这样的: var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: [__dirname + '/src/index'],output: {
path: __dirname + '/_dist',resolve: {
root: [
__dirname + '/src',__dirname + '/node_modules',__dirname,],extensions: ['','.js'],module: {
loaders: [{
test: /.js$/,{
test: /.css$/,{
test: /.(jpe?g|png|gif|svg|ico)/i,{
test: /.(ttf|eot|svg|woff|woff2)/,{
test: /.(pdf)/,{
test: /.(swf|xap)/,plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',favicon: __dirname + '/src/favicon.ico',inject: false,}),};
Express 服务器启动Node.js web 应用开发框架 Express 作为项目的 web 服务器,有 Node.js 开发经验的同学应该挺熟悉的了,这里也不多做赘述。 最终的启动代码是这样的: var express = require('express');
var webpack = require('webpack');
var webpackConfig = require('./webpack.development');
var app = express();
var compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(compiler,{
stats: {
colors: true,}));
app.use(require('webpack-hot-middleware')(compiler)); //热加载
app.listen(process.env.PORT,function(err) { //在没有端口的情况下,会自动给出一个随机端口
if (err) {
console.log(err);
}
});
为了方便我们的访问,项目使用了 Redux对于复杂的 SPA,状态(state)管理非常重要。state 可能包括:服务端的响应数据、本地对响应数据的缓存、本地创建的数据(比如,表单数据)以及一些 UI 的状态信息(比如,路由、选中的 tab、是否显示下拉列表、页码控制等等)。如果 state 变化不可预测,就会难于调试(state 不易重现,很难复现一些 bug)和不易于扩展(比如,优化更新渲染、服务端渲染、路由切换时获取数据等等)。
在使用 Redux 后,state 就变得很容易维护,而且数据流非常清晰,容易解决遇到的 BUG。 我们可以看下图来简要地理解 Redux: 我们可以在项目中看到的结构是: ├─store
├─actions
├─reducers
├─constants
├─helpers
├─components
├─app.js
├─favicon.ico
├─index.html
├─index.js
└─routes.js
最终我们的 store 是: import {createStore,applyMiddleware,combineReducers,compose} from 'redux';
import thunk from 'redux-thunk';
import {reduxReactRouter} from 'redux-router';
import createHistory from 'history/lib/createHashHistory';
import routes from '../routes';
import * as reducers from '../reducers';
let middlewares = [thunk];
if (process.env.NODE_ENV === 'development') { //在开发环境下可以看到 state 的 log
const logger = require('redux-logger');
middlewares = [...middlewares,logger];
}
const finalCreateStore = compose( //组合多个函数
applyMiddleware(...middlewares),reduxReactRouter({routes,createHistory}),)(createStore); //创建 store 来管理所有的 state
export default function configureStore(initialState) {
const reducer = combineReducers(reducers); //把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数
const store = finalCreateStore(reducer,initialState);
if (process.env.NODE_ENV === 'development' && module.hot) { //开发环境下的热加载
module.hot.accept('../reducers',() => {
const nextReducers = require('../reducers');
const nextReducer = combineReducers(nextReducers);
store.replaceReducer(nextReducer);
});
}
return store;
}
获取 state 需要在组件中调用 ...
@connect(
state => ({
data: state.data
})
)
export default class ComponentOne extends Component {
...
}
注意: Router为项目添加路由系统,使用了 react-router 来管理路由。在开发项目的时候,比较推荐的做法是使用路由去跳转页面,并且创建 store 的同时我们就把 router 加入其中,然后我们根据路由的变化去更新视图。 我们可以看看路由的源码: import React from 'react';
import Route from 'react-router/lib/Route'; //import {Route} from 'react-router';
import Base from 'components/base/Base';
import Home from 'components/home/Home';
export default (
<Route component={Base}> <Route path="/" component={Home} /> <Route path="/home" component={Home} /> </Route> );
Ant Design由蚂蚁金服技术部出品的一个 UI 设计语言,也是项目中所用到的 UI 组件库。 特性:
选择理由:
简单的 Component组件作为 React 渲染的一个基本组成,我们通常把它们分为两类,容器型和展示型。相较于容器型,展示型是通过容器型传递 props 来获取数据,而容器型可以直接从 store 中获取,处理并传递给下级组件。 在实际应用中会发现,定义一个容器型组件负责处理数据,然后分发给下级展示型组件,当需要更新数据时,那么容器型组件发生变化会引起下级展示型组件的变化,这样就对我们业务上造成了一定的困扰(在不需要更新的部分组件上也发生了更新)。因此,我们选择在需要获取数据的组件中使用 在项目中我们会这么定义组件: import React,{Component} from 'react';
import {connect} from 'react-redux';
import Presentational from 'components/common/Presentational';
@connect(
state => ({
data: state.data
})
)
export default class Container extends Component {
render() {
const {data} = this.props;
return (
<Presentational data={data} />
)
}
}
上面是可以从 store 获取数据的组件,并嵌套另一个组件,将数据传递给它。 import React,{Component,PropTypes} from 'react';
export default class Presentational extends Component {
static propTypes = {
data: PropTypes.string,}
render() {
const {data} = this.props;
return (
<div>
{data}
</div>
)
}
}
获取上一个组件传递过来的数据,并展示出来。 总结这是一篇科普文(哈哈~囧),并没有深入去分析各项技术的具体内容,希望能帮助刚入手 React 的新手们。实践项目的源码可以在 react-start-kit 看到,你可以下载这个项目进行自己的一些探索和开发。还在努力探索中,文中有措辞不当或是疏漏,欢迎提出意见和建议。 参考react 官网
文/Jovey(简书作者) 原文链接:http://www.jianshu.com/p/808bb43b3744 著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |