淘先锋技术网

首页 1 2 3 4 5 6 7

React.Js实战

React.Js实战

需求来源

前端框架引入地图

初识

在React与Vue框架选择中，非常犹豫，React有成熟的社区和面对对象的抽象思想，vue则是轻量级的代表，结合了Angular和React的优势，对于新手用此入门甚佳。

前端开发的实质

前端开发是与工程化紧密相连的，甚至是与UED等用户体验等艺术性相背离的，目前没有发现能在艺术和工程都能协调完美的人。
前端开发面对的是复杂的组件，表现在管理和抽象复杂业务的能力，组件实质就是状态的集合，这和服务器端的服务复杂交互、治理，是同出一脉。

准备工作

在学习React之前，先保证有node，npm相关的经验，不熟悉请参考本人另一篇文章——VueJs实战。

  • 脚手架
    项目的基本模板，对引入的包和开发配置都基本完备，直接可以开始开发。
    阮一峰脚手架下载：https://github.com/ruanyf/react-babel-webpack-boilerplate

  • jsx语法
    主要包括组件创建，组内通信，jsx内使用方法等
    阮一峰demo：https://github.com/ruanyf/react-demos

  • 使用css
    主要是内联，嵌入，外联三种形式，注意react的class需写作className。
    参考文章：htps://blog.csdn.net/daxiazouyizou/article/details/79758558

  • 创建组件
    创建组件有多种方法，目前版本代码可读性最高的是

        import React,{Component} from 'react';   
    export default class App extends Component {
    render() {
        return (
            <div><div/>
        );   
      }   
    }

编码规范要求组件首字母大写，驼峰式。
组件多种创建方式：https://www.cnblogs.com/Unknw/p/6431375.html

  • 组件通信
    react的单向数据模型，要求只能父组件给子组件传数据。
    这点与angular和vue不同，也是其强大的优势之一。
    双向数据模型，能提高编程的灵活性，但也导致了组件通信的混乱和代码规范的难以制定，所以React才能成为大型项目的无冕之王。

    父组件
import Son from './son';
export default class Dad extends Component {
render() {
    var message = "God bless U!"
    return (
        <Son mess = {message}><Son/>
    );   
  }   
}  
子组件
export default class Son extends Component {
render() {
    var message = this.props.mess
    return (
        <div>{message}<div/>
    );   
  }   
}

    组件数据分为state和pros两种，
    state为组件内数据，只读，无法分享，
    pros为父组件串入的数据。

组件通信参考文章：https://segmentfault.com/a/1190000006831820

项目实战

main.jsx为入口,引入了redux实现数据共享，react-intl实现国际化，各类中间件和第三方插件引入，只包含app这个组件，代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import intl,{IntlProvider,addLocaleData} from 'react-intl'
import App from './components/App';
import getI18n from 'root/assets/i18n/i18n'
import {Provider} from 'react-redux'
import {applyMiddleware,createStore} from 'redux'
import reducer from './store/reducer'
import {createLogger} from 'redux-logger'
import InitState from './store/initState'
import thunk from 'redux-thunk'
import promise from 'redux-promise'
//引入外部第三方插件
import 'root/business/lib/index'
/*** 导航页
 */
const logger = createLogger();//中间件，日志
let store =  createStore(
    reducer,
    InitState,
    applyMiddleware(thunk,promise,logger)
);//创建redux状态管理，中间件分别为支持异步，支持promise和日志  
let language = 'zh-CN';//默认中文
let i18n = getI18n(language);
addLocaleData(...i18n.data);//国际化
ReactDOM.render(
    <Provider store={store}>
      <IntlProvider locale={i18n.locale} messages={i18n.messages} formats={i18n.formats}>   
        <App />
      </IntlProvider>
     </Provider>
      ,
  document.body.appendChild(document.createElement('div'))
);
  • UI组件
    • 入口
    • app
      app包含右侧栏和上边栏两部分，右侧为菜单，上边为标题
    • 菜单
      component/bar/sideBar.jsx通过遍历business/menu/menu.js提供的模拟数据，创建元素，其含子元素sideBarIcon(菜单按钮)和sideBarTitle(展示栏)
    • 标题栏
      component/bar/topBar.jsx通过遍历business/toolbar/buttons.js提供的模拟数据，创建元素，其含子元素topBarButton(标题按钮)和topBarList(标题列表)
    • 展示栏
      component/bar/sideBarTitle.jsx展示菜单的名称和返回主菜单按钮
  • 组件交互
    • 菜单与标题栏、展示栏
      点击菜单，发出store/actionType.js的menu.hover事件，通过redux分发到store/reducer.js，PageReducer、TitleReducer和ToolReducer根据这一事件，改变全局state的PAGE、TITLE、TOOL属性，component/bar/sideBarTitle.jsx的mapStateToProps检测到state变化，重新调用类的render，刷新了dom树，展示进入的菜单名称和按钮，component/bar/sideBar.jsx也刷新了页面，隐藏掉菜单，进入对应菜单的页面，component/bar/topBar也相应改变了。
      点击返回菜单按钮，则发出menu.back事件，reducer改变redux的state，触发各界面刷新dom。