发表于 | 分类于 | | 阅读次数:

一、简介

是什么

  • HOC(全称HigherOrder Component)高阶组件，是一种React的进阶使用方法
  • 定义：高阶组件是一种接受组件作为参数，并返回一个新组件的函数。所以高阶组件不是组件，而是函数

    主要目的

  • 主要是为了组件复用

二、应用场景

  • 代码复用，代码模块化
  • 增删改props
  • 渲染劫持

三、实现方式

四、需要注意的问题

  • 静态方法丢失
  • Refs属性不能传递

发表于 | | 阅读次数:

Next.js是一个极简的React服务端渲染框架

快速上手

  • 建立一个文件夹test, cd test

  • 建立package.json文件，然后安装必要的npm包

    1
    npm install --save next react react-dom

  • package.json中增加如下脚本

    1
    2
    3
    4
    5
    6
    7
    {
      "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start"
      }
    }

每个.js文件都变成了一个自动处理和渲染的路由

  • 在项目中新建文件pages/index.js
1
export default () => <div>Welcome to next.js!</div>

是不是很简单！！！

发表于 | | 阅读次数:

一、会用,通过项目练手，多敲

  • 重构Unicloud，realworld，仿饿了么，

    React

    1. React, redux, react-redux, react-router,

    react-router-redux, redux-saga, reselect, fetch,
    superagent, Sortable, react-grid-layout

    2. antd, echarts

    3. dva, React-boilerplate, React-start-kit, Create-react-app-ts版

    4. immutable.js, lodash, moment

React Native

  • realworld移动版

    Node

  • 框架, egg, express, koa , mongoose, sequelize, knext
  • 仿饿了么后台，博客后台，realworld后台部署到服务器

    webpack

  • 看文档

二、掌握基础知识

  • 高程3（ES5），ES6入门，Http权威指南，MDN文档，TypeScript,掘金收藏的面试题，复习zhufeng

三、看源码

  • redux等简单库的源码，antd，react源码，

四、造轮子

发表于 | 分类于 | | 阅读次数:

node小技巧

  • 本文遇到的问题是因为想把公司的项目从一个较旧的脚手架react-redux-starter-kit迁移到react-boilerplate

一、node服务器想使用proxy

  • 前端项目的node服务器如果没有使用webpack-dev-server，但是又想使用proxy功能；于是大致扫了一下webpack-dev-server的源码，发现其使用了http-proxy-middleware这个中间件
1.安装http-proxy-middleware
1
yarn add http-proxy-middleware
2. 示例用法
1
2
3
4
5
6
7
8
9
10
const app = express()

const filter = (pathname) => pathname.match('^/cloud');

const apiProxy = proxy(filter, {
  target: 'https://www.baidu.com',   //你的代理目标url
  secure: false,
});

app.use(apiProxy);
  • 详细用法参考该库的github仓库

二、如何搭建https服务

  • 原项目使用node server的是https协议,而react-boilerplate使用的是http
1. 生成证书
1
2
3
4
5
openssl genrsa -out privatekey.pem 1024

openssl req -new -key privatekey.pem -out certrequest.csr

openssl x509 -req -in certrequest.csr -signkey privatekey.pem -out certificate.pem
2. 建立https服务器
1
2
3
4
5
6
7
8
9
const fs=requires('fs');
const https=requires('https');
const app=express();
const options = {
  key: fs.readFileSync(path.join(__dirname, './privatekey.pem')),
  cert: fs.readFileSync(path.join(__dirname, './certificate.pem')),
};
const httpsServer = https.createServer(options, app);
httpsServer.listen(8002);

三、http请求首部如何加入Authorization