关于javascript:民工日记之React开荒二

脚手架创立利用

当今web开发其实比较复杂，开发一个我的项目时通常要引入多个技术栈（UI：react, 状态治理：redux，路由：react/router，js个性翻译：babel，打包：webpack，语法查看：eslint），每个技术栈背地有很多package并且波及很多配置，过程简单且可重用，脚手架工具能够简略且疾速地生成一个空的我的项目来开发。最罕用的脚手架为create-react-app。另外还有一些脚手架（rekkit：集成了redux和react-router，codeSandbox：在线打包编译热加载）能够尝试。

打包部署

最罕用的打包工具webpack，具体执行流程优化，源码剖析包含热重载如何实现等涵盖内容较多前面争取补充。

为什么须要打包？

编译ES6语法个性，编译JSX
整合资源（图片、Less/Sass）
优化代码体积

注意事项

设置nodejs环境为production（这里因为有些js library不同环境运行不一样，比方react会在开发环境查看传参类型）
设置环境变量在build.js中：
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
禁用开发专用代码，比方logger
设置根门路（在package.json的“homepage”属性中）

执行打包：npm run build

redux状态治理

redux是基于flux的设计模式提出的状态治理框架，react将state转换为DOM，redux将这个过程放到组件之外的store中，当store中信息变动，组件也会进行相应的更新，也就是担当了治理全局状态和让组件通信更容易（传统个别是父组件通过props传参给子组件，子组件裸露一个事件回传参数给父组件）的职责。redux通过action来形容产生了什么（充当指示器），reducer用来串联state和action。

三大准则

Single source of truth
传统MVC的model和view相互调用，错从简单，redux的所有数据起源都是store
State is read-only
state + action = new state，必须action来生成而不是扭转原有的state
Changes are made with pure funcitons
pure function的函数输入后果齐全取决于输出参数，不依赖于任何内部参数或者内部资源

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      //通过state.map生成新的state对象而不是批改原有state对象
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    //如果不是ADD或者COMPLETE类型的action间接返回state
    default:
      return state
  }
}

//combineReducers返回一个封装函数，将reducer合并
import { combineReducers, createStore } from 'redux'
const reducer = combineReducers({ visibilityFilter, todos })
const store = createStore(reducer)

了解Store

const store = createStore(reducer)

getState()
dispatch(action)
subscribe(listener)

Dispatcher用来派发action操作，State是数据对象，Reducer更新state，(state, action) => new state，state的任何变动都肯定是由一个action引起的，一旦发现state有问题能够追踪action是什么不便定位问题。redux利用中间件来截获和收回action，能够通过log打印进去追踪action变动。redux中的action能够通过组合多个同步action的形式来实现异步action，比方：

export function saveFile(filePath, content) {
  return (dispatch) => { // optionally you can have getState as the second argument
    dispatch({
      type: HOME_SAVE_FILE_BEGIN,
    });
    //通过返回一个promise来管制UI flow而不是通过state
    //上面场景中，提交form后如果胜利跳转到另外的页面，失败则显示错误信息，如果用state来管制是比拟艰难的，然而通        过一个promise就比拟容易达成目标
      const promise = new Promise((resolve, reject) => {
      const doRequest = axios.post('/rekit/api/save-file', {
        file: filePath,
        content,
      });

      doRequest.then(
        (res) => {
          dispatch({
            type: HOME_SAVE_FILE_SUCCESS,
            data: {
              file: filePath,
              content,
            },
          });
          resolve(res);
        },
        // Use rejectHandler as the second argument so that render errors won't be caught.
        (err) => {
          dispatch({
            type: HOME_SAVE_FILE_FAILURE,
            data: { error: err },
          });
          reject(err);
        },
      );
    });

    return promise;
  };
}

不同性能的action和reducer个别寄存在独立文件中再对立引入到一个index.js中，这种文件治理形式根本和vue-store的格调统一。

reudx的运行根底：不可变数据（immutable data），即store必须通过深拷贝或浅拷贝才可批改，不可再原数据根底上做批改，这样做的目标是：

性能优化：不须要比拟前后的值来判断是否有更新，而是间接比拟援用是否产生扭转
易于调试和跟踪：store变动时因为记录了old state和new state的值，能够进行diff比拟
易于揣测：能够通过action值揣测执行过程

如何操作不可变数据：

原生：{…}, Object.assign

const state = {filter: 'completed', todos: ['Learn React']};
//写法1
const newState = {...state, todos: [
    ...state.todos,
    'Learn Redux'
]};
//写法2
const newState2 = Object.assign({}, state, todos: [
    ...state.todos,
    'Learn Redux'
]);

immutability-helper工具类

import udpate from 'immutability-helper';
const state = {filter: 'completed', todos: [
    'Learn React'
]};
const newState = udpate(state, {todos: {$push: ['Learn Redux']}});

immer（性能稍差）

import produce from 'immer';
const state = {filter: 'completed', todos: [
    'Learn React'
]};
//draftState相当于是一个代理state，其实仍然没有在原state上批改，然而操作起来比拟像
const newState = produce(state, draftState => {
    draftState.todos.push('Learn Redux');
});

react-router

非官方出品，然而曾经成为公认的路由治理规范。

单页利用须要页面切换
通过URL能够定位到页面
更有语义的组织资源
路由 —–> Router —–> 组件容器，
个性：1、申明式理由 2、动静路由
实现：1、URL门路（BroswerRouter） 2、hash路由（HashRouter，当浏览器不反对路由切换页面不刷新的时候应用） 3、内存路由（MemoryRouter，个别用在服务端渲染）

import React from "react";
import { HashRouter as Router, Route, Link } from "react-router-dom";
import { MemoryRouter } from "react-router";

const Home = () => <h1>Home</h1>;
const Hello = () => <h1>Hello</h1>;
const About = () => <h1>About Us</h1>;

export default class RouterSample extends React.PureComponent {
  render() {
    // react-router其实是组件的一部分
    return (
      <Router>
        <div>
          <ul id="menu">
            <li>
              <Link to="/home">Home</Link>
            </li>
            <li>
              <Link to="/hello">Hello</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>

          <div id="page-container">
            <Route path="/home" component={Home} />
            <Route path="/hello" component={Hello} />
            <Route path="/about" component={About} />
          </div>
        </div>
      </Router>
    );
  }
}

react-router API介绍：https://reactrouter.com/web/a…

路由参数：

//传参
<Route path="/topic/:id" component={Topic} />
//获取参数
const Topic = ({ match }) => (
  <h1>Topic {match.params.id}</h1>
);

嵌套路由

场景：除了导航栏可能还有多级子导航栏，嵌套路由是一个前端特有的概念。只有match path，组件就会render进去。

//假如浏览器输出一个url为：    xxxx/category/3/sub/2
import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom";

const Category = ({ match }) => (
  <h1>Sub Category {match.params.subId}</h1>
);

const SubCategory = ({ match }) => (
  <div>
    <h1>Category {match.params.id}</h1>

    <ul id="menu">
      <li>
        <Link to={`/category/${match.params.id}/sub/1`}>
          Sub Category 1
        </Link>
      </li>
      <li>
        <Link to={`/category/${match.params.id}/sub/2`}>
          Sub Category 2
        </Link>
      </li>
      <li>
        <Link to={`/category/${match.params.id}/sub/3`}>
          Sub Category 3
        </Link>
      </li>
    </ul>
    <div id="page-container-2">
        <!--xxxx/category/3/sub/2 （path齐全匹配） -->
      <Route
        path="/category/:id/sub/:subId"
        component={Category}
      />
    </div>
  </div>
);

export default class NestedRoute extends React.PureComponent {
  render() {
    return (
      <Router>
        <div>
          <ul id="menu">
            <li>
              <Link to="/category/1">Category 1</Link>
            </li>
            <li>
              <Link to="/category/2">Category 2</Link>
            </li>
            <li>
              <Link to="/category/3">Category 3</Link>
            </li>
          </ul>

          <div id="page-container">
             <!--xxxx/category/3/sub/2 会首先匹配到顶层容器的路由（path局部匹配） -->
            <Route
              path="/category/:id"
              component={SubCategory}
            />
          </div>
        </div>
      </Router>
    );
  }
}

关于javascript:民工日记之React开荒二

脚手架创立利用

打包部署

redux状态治理

react-router

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于javascript:民工日记之React开荒二

脚手架创立利用

打包部署

redux状态治理

react-router

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复