React

发表于 | 分类于 |

React

文档

中文文档

一个 UP主发的教程
还有哔哩哔哩的视频可以看

一个在线练习的环境

环境依赖

npm & node
https://raw.githubusercontent.com/w0lfschild/app_updates/master/mySIMBL/mySIMBL_master.zip

环境配置

开发前后端分离的时候, 在本地起的一个 node 的环境, 一般来说, 在使用 ant 的框架时, 都是有一些 mock 数据, 这些数据, 请求, 资源文件都是走的 node 提供的服务返回去的, 但是在实际中, 或者在开发中, 需要调用到实际的 API 时, 可能就存在一个跨域访问的问题, 这时候就需要一个 proxy 配置, 将资源文件盒 API 请求都放到一个域中, 通过 nginx 来进行转发

在服务器端发现跨域访问会被禁止, 这头需要 nginx 告诉服务器我没跨域
在浏览器端, 跨域也会被禁止, 这头也需要nginx 告诉它你不要管,

相关配置:

1
2
listen       80;
    server_name  admin.id.test.com;

这里是说: nginx 服务监听的端口, 已经监听的域名

1
2
3
location ^~ /api/ {
    proxy_set_header HOST admin.xxx.com;
}

这里是说, 将地址匹配到的有/api/的话设置如下的参数, 并将 api 取代
还有一些其他的设置相关的, 但是现在没时间细看

当前社区贡献的框架及开发模式

Get A Glance

使用 React, 起初还需要搭配一堆的环境配置, 现在她们自己出了一个工具create-react-app自动完成这些配置, 大大降低了萌新启动一个项目的成本

起一个空项目

1
2
3
4
5
npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

其实可以使用 yarn 来代替 npm

开发完成上线打包:

1
npm run build

脚手架

用于快速构建一个项目

限制性检查

良好的风格能减少踩的坑, 便于 debug, 还能将一些低级的错误在 coding 阶段就能暴露出来

调试

log 系统
redux-log

IDE

Chrome

部署

结构

dva

简而言之 dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装

dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，全部代码不到 100 行。( Inspired by elm and choo. )

初识Dva

dva 图解

模块

todo

国际化

Intl

Antd - Intl

导航

React-Router

在前端中, 导航也叫路由, 即页面的跳转/重定向

React 官方维护的一个 React-Router

常用:

路由声明:

1
2
3
<Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>

种类:
history 属性:
根据 中的 history 属性, 可以确定使用的是那种路由.
hashHistory: 路由的切换由URL的hash变化决定，即URL的#部分发生变化
如果设为browserHistory，浏览器的路由就不再通过Hash完成了，而显示正常的路径example.com/some/path，背后调用的是浏览器的History API。
但是，这种情况需要对服务器改造。否则用户直接向服务器请求某个子路由，会显示网页找不到的404错误。
如果开发服务器使用的是webpack-dev-server，加上–history-api-fallback参数就可以了。
createMemoryHistory主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动。

路由可嵌套

IndexRoute解决根目录没有匹配对应 component 的问题，显式指定Home是根路由的子组件，即指定默认情况下加载的子组件

1
2
3
4
5
6
7
<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

路由跳转:

path:

指定路由的匹配规则, 可省略么, 可用通配符: *, **, :pramName
:paramName: 匹配路由的一个部分, 直到出现/,?, #为止.

(括号里的表示可选)

由上到下匹配, 一旦匹配后面的规则就不管了

redirect
＜Redirect from="messages/:id" to="/messages/:id" />

IndexRedirect组件用于访问根路由的时候，将用户重定向到某个子组件。

Link
Link组件用于取代元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是元素的React 版本，可以接收Router的状态。
如果链接到根路由/，不要使用Link组件，而要使用IndexLink组件
IndexLink组件会使用路径的精确匹配。

1
2
3
<IndexLink to="/" activeClassName="active">
  Home
</IndexLink>

路由外跳转
在Router组件之外，导航到路由页面，可以使用浏览器的History API，像下面这样写。

browserHistory.push('/some/path');

路由传参 & 进入页面后路由获取参数

URL的查询字符串/foo?bar=baz，可以用this.props.location.query.bar获取。
通过:paramName传递匹配的路由, 可以由this.props.params.paramName取出

路由页面的 hook

每个路由都有Enter和Leave钩子，用户进入或离开该路由时触发

Enter

1
2
3
4
5
6
7
8
<Route path="inbox" component={Inbox}>
  <Route
    path="messages/:id"
    onEnter={
      ({params}, replace) => replace(`/messages/${params.id}`)
    }
  />
</Route>

Leave

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Home = withRouter(
  React.createClass({
    componentDidMount() {
      this.props.router.setRouteLeaveHook(
        this.props.route,
        this.routerWillLeave
      )
    },

    routerWillLeave(nextLocation) {
      // 返回 false 会继续停留当前页面，
      // 否则，返回一个字符串，会显示给用户，让其自己决定
      if (!this.state.isSaved)
        return '确认要离开？';
    },
  })
)

上面代码中，setRouteLeaveHook方法为Leave钩子指定routerWillLeave函数。该方法如果返回false，将阻止路由的切换，否则就返回一个字符串，提示用户决定是否要切换。

###

组件

地图

Google

博客教程

使用React封装GoogleMap的库

star 比较多的

example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
class SimpleMap extends Component {
  static defaultProps = {
    center: {lat: 59.95, lng: 30.33},
    zoom: 11
  };
  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text={'Kreyser Avrora'}
        />
      </GoogleMapReact>
    );
  }
}

当前社区贡献的框架及开发模式

React + DVA + ANTD
通过 dva 的简单封装, 可以快速的使用 React+redux+ant-design UI库
进行了结构化的模式设定, 让开发更有序

一个通过React+Antd的构建国泰管理的完整项目

分层 / 自己的封装

todo

整个前端的层次

todo

基于底层架构之上构建自己对接的服务层

todo
\

提供自己常用的封装的组件

todo

构建通用工具层

todo

构建提供一些服务的架子

todo

  • bug resolve in primary

修改了文件后出不来效果

在路由处指定的 component 没有指定成功, webpack 没有将期望的从 component 打包进去, 因为在路由配置处将 component 指定错了….