react基礎學習和react服務端渲染框架next.js踩坑

說明

React作為Facebook 內部開發 Instagram 的項目中，是一個用來構建用戶界面的優秀 JS 庫，於 2013 年 5 月開源。作為前端的三大框架之一，React的應用可以說是非常的廣泛。這里講一個react服務端渲染的框架-next.js踩坑過程。

技術棧

react、next.js、ant design、axios

大綱

按照以下思路來寫：

react基本語法

react基本語法參照react文檔，這里發放一個鏈接https://doc.react-china.org/。

以下是React重要的部分

• JSX – 允許我們編寫類似HTML的語法，轉換為JavaScript對象；
• 虛擬DOM – 實際DOM的JavaScript表示；
• React.Component – 創建新組件的方式；
• render（方法） – 渲染組件；
• ReactDOM.render – 用於將模板轉為 HTML 語言，並插入指定的 DOM 節點；
• state – 組件的內部數據存儲（對象），類型理解vue的data；
• constructor（this.state） – 建立組件初始 state(狀態) 的方式；
• setState – 一種輔助方法，用於更新組件的 state(狀態) 並重新渲染，類似微信小程序；
• props – 從父組件傳遞給子組件的數據；
• propTypes – 允許您控制傳遞給子組件的某些 props(屬性) 的存在或類型；
• defaultProps – 允許您為組件設置默認 props(屬性) ；
• className - 節點的class，css標記
• style jsx樣式控制

jsx語法

直接寫在 JavaScript 語言之中，不加任何引號，它允許 HTML 與 JavaScript 的混寫。

//demo-1.js
import React from 'react';
class Demo1 extends React.Component{
  render(){
    const lists = ['我是誰','我來自哪里','我要到哪兒去'];
    return(
      <div className="list">
        <ul>
          {
            lists.map((list,index)=>{
              return(
                <li key={index}>{list}</li>
              )
            })
          }  
        </ul>
      </div>
    )
  }
}

export default Demo1;

上面代碼體現了 JSX 的基本語法規則：遇到 HTML 標簽（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析，其中注意一點react沒有vue中v-for遍歷，需要自己寫遍歷。上面代碼的運行結果如下：

組件及組件傳值

//demo-2.js
import React from 'react';

class MyComponent extends React.Component{
  render(){
    return (
      <h1>{this.props.name}</h1>
    )
  }
}

class Demo2 extends React.Component{
  render(){
    const lists = ['我是誰','我來自哪里','我要到哪兒去'];
    return(
      <div className="list">
        <ul>
          {
            lists.map((list,index)=>{
              return(
                <li key={index}>
                  <MyComponent name={list}></MyComponent>
                </li>
              )
            })
          }  
        </ul>
        
      </div>
    )
  }
}

export default Demo2;

React 允許將代碼封裝成組件（component），然后像插入普通 HTML 標簽一樣，在網頁中插入這個組件。以上代碼中MyComponent即為組件，需要注意的一點組件類的第一個字母必須大寫，否則會報錯，組件類只能包含一個頂層標簽，否則也會報錯。vue通過子組件中的props來傳遞數據,而React則是用this.props.name來傳遞。下圖為渲染頁面效果：

React之ref(獲取真實的DOM節點)

• 同vue的ref作用一樣，組件並不是真實的DOM節點，而是存在於內存之中的一種數據結構，叫做虛擬 DOM。
• 只有當它插入文檔以后，才會變成真實的 DOM 。根據 React的設計，所有的DOM 變動，都先在虛擬 DOM上發生，然后再將實際發生變動的部分，反映在真實 DOM上，這種算法叫做 DOM diff ，它可以極大提高網頁的性能表現。
• 有時需要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性。

//dem0-3.
import React from 'react';

class Demo3 extends React.Component{
  handleClick(){
    this.refs.myTextInput.focus();
  }
  render(){
    return(
      <div>
        <input type="text" ref="myTextInput" />
        <br/>
        <input type="button" value="Focus the text input" onClick={this.handleClick.bind(this)} />
      </div>
    )
  }
}

export default Demo3;

在這里需要注意的是：

• React的事件中如果不用剪頭函數，那就要用bind來綁定this，否則需要在constructor構造函數里調用this.handleClick = this.handleClick.bind(this)，這里建議用onClick={this.handleClick.bind(this)}。
• 由於 this.refs.[refName] 屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。上面代碼中，通過為組件指定 Click 事件的回調函數，確保了只有等到真實 DOM 發生 Click 事件之后，才會讀取 this.refs.[refName] 屬性。

React之this.state以及點擊事件

React中的state就相當於vue里的data數據存儲,而小程序的this.setData就和React的this.setState類似。

//demo-4.js
import React from 'react';

class Demo4 extends React.Component{
  // constructor(props){
  //   super(props)
  //   this.state = {
  //     liked:false
  //   }
  // }
  state = {
    liked: false
  }
  handleClick(){
    this.setState({liked: !this.state.liked});
  }
  render(){
    let text = this.state.liked ? '喜歡' : '不喜歡';
    return(
      <div>
        <p onClick={this.handleClick.bind(this)}>
          你 {text} 這個點擊.
        </p>
      </div>
    )
  }
}

export default Demo4;

上面代碼是一個 LikeButton 組件，它的 constructor 方法(或者直接state聲明)用於定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以后，自動調用 this.render 方法，再次渲染組件。

由於 this.props 和 this.state 都用於描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨着用戶互動而產生變化的特性。

利用input的onChange事件實現簡單的雙向綁定

vue里面v-model一鍵實現的事情React沒有，我們可以利用input組件的onChange事件來簡單實現它，直接上代碼。

//Demo5.js
import React from 'react';

class Demo5 extends React.Component{
  // constructor(props){
  //   super(props)
  //   this.state = {
  //     text:''
  //   }
  // }
  state = {
    text: ''
  }
  handleChange(e){
    this.setState(
      {text: e.target.value}
    );
  }
  render(){
    return(
      <div>
        <p>
          你輸入了{this.state.text}
        </p>
        <input type="text" placeholder="請輸入..." onChange={this.handleChange.bind(this)}/>
      </div>
    )
  }
}

export default Demo5;

組件的生命周期

一個React組件的生命周期分為三個部分：掛載期（Mounting）、存在更新期（Updating）和銷毀時（Unmounting）。

• Mounting：已插入真實 DOM

  當一個組件實例被創建並且插入到DOM中，以下鈎子將被調用 constructor()
  繼承react的props，和設置state的初始化。

constructor(props) {
  super(props); //不能缺少
  this.state = {
    color: props.initialColor
  };
}

• Updating：當組件的props和state發生改變時，重新渲染頁面是調用的。
• Unmounting：組件從DOM中移動時調用的。

React 為每個狀態都提供了兩種處理函數，will 函數在進入狀態之前調用，
did 函數在進入狀態之后調用，三種狀態共計五種處理函數。

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

事件

• onClick-點擊事件
• onSubmit-表單提交事件，可以配合antdesign的表單校驗
• onChange-input框數據變化，可實現數據的雙向綁定（react里沒有vue的v-modal）

style jsx

我們可以通過普通樣式(className)和行內樣式(LineStyle)控制React組件的樣式：

• 使用className設置樣式(與CSS的選擇器相同)

import React from 'react';
// import styles from '../../static/css/demo.css'

class Demo6 extends React.Component{
  // constructor(props){
  //   super(props)
  //   this.state = {
  //     text:''
  //   }
  // }
  state = {
    text: ''
  }
  handleChange(e){
    this.setState(
      {text: e.target.value}
    );
  }
  render(){
    return(
      <div>
        <p className="style">
          你輸入了{this.state.text}
        </p>
        <input className="input" type="text" placeholder="請輸入..." onChange={this.handleChange.bind(this)}/>
        <style jsx>
          {
            ` .style {
                background: #dcdcdc;
                font-size: 20px;
                height:40px;
                line-height:40px;
                padding:0 2%;
              }
              .input{
                width:96%;
                height:40px;
                padding:0 2%;
              }
            `
          }
        </style>
      </div>
    )
  }
}

export default Demo6;

為什么要用next

Next.js是一個基於React的一個服務端渲染簡約框架。它使用React語法，可以很好的實現代碼的模塊化，有利於代碼的開發和維護。

• 默認服務端渲染模式，以文件系統為基礎的客戶端路由，類似nuxt.js；

• 與nuxt.js相同，pages文件目錄即路由；

• 以webpack的熱替換為基礎的開發環境（npm run dev）；

next創建的項目目錄結構

next路由

• 默認從 pages 目錄下取頁面進行渲染返回給前端展示，路由可以使用Link（無刷新頁面）或者a標簽（刷新頁面）

//pages/router.js
import Link from 'next/link';

<Link prefetch href='/about?id=11'>
    <a >Link</a>
</Link>

<a href="/about?id=11">Link</a>

• 接收參數：getInitialProps方法context參數或者{props.query.id}，同時在getInitialProps 里面獲取數據，服務端渲染會提前執行這個方法獲取數據渲染到模板，這里用到axios庫，前后端都可以使用

//pages/test.js http://localhost:3000/test
import React from 'react';
import MyHeader from '../components/MyHeader';
import axios from '../lib/axios';
import { bmobConfigDevdev, bmobConfig } from '../lib/config';
import urls from '../lib/urls';

import { Table, Form, Icon, Input, Button } from 'antd';
const FormItem = Form.Item;

const config1 = {
  headers: {
    'X-Bmob-Application-Id': bmobConfig.applicationId,
    'X-Bmob-REST-API-Key': bmobConfig.restApiKey,
    'Content-Type': 'application/json'
  }
};

const config2 = {
  headers: {
    'X-Bmob-Application-Id': bmobConfigDevdev.applicationId,
    'X-Bmob-REST-API-Key': bmobConfigDevdev.restApiKey,
    'Content-Type': 'application/json'
  }
};

const myStyle = {
  body: {
    width: '1200px',
    margin: '10px auto'
  }
}

const columns = [{
  title: 'id',
  dataIndex: 'objectId',
  key: 'objectId',
}, {
  title: '姓名',
  dataIndex: 'uname',
  key: 'uname',
}, {
  title: '電話',
  dataIndex: 'uphone',
  key: 'uphone',
}, {
  title: '地址',
  dataIndex: 'address',
  key: 'address',
}];

const dataSource = [{
  key: '1',
  name: '胡彥斌',
  age: 32,
  address: '西湖區湖底公園1號'
}, {
  key: '2',
  name: '胡彥祖',
  age: 42,
  address: '西湖區湖底公園1號'
}];

//封裝form組件
const MyForm = (props) => (
  <Form layout="inline" onSubmit={this.handleSubmit}>
    <FormItem>
      <Button
        type="primary"
        htmlType="submit"
      >
        增加數據
      </Button>
    </FormItem>
  </Form>
)

//聲明類
class addDeleteSelectUpdate extends React.Component {

  render() {
    return (
      <MyHeader title="用戶列表">
        <div style={myStyle.body}>
          <p className="about">傳遞的參數為：{this.props.query}</p>
          <p className="about">增加數據</p>
          <MyForm ></MyForm>
          <p className="about">獲取數據{this.props.dataToString}</p>
          <Table dataSource={this.props.data} columns={columns} size="small" />
          <div className="">
            <p className="about">遍歷</p>
            <ul>
              {
                this.props.data.map(els => {
                  return (
                    <li key={els.objectId}>
                      {els.address}
                    </li>
                  )
                })
              }
            </ul>
          </div>
          <style jsx>
            {`
              .about {color:#666;padding:10px}
            `}
          </style>
        </div>
      </MyHeader>
    )
  }
}

/**
 * @description 獲取初始數據
 */
const isServer = typeof window === 'undefined'

addDeleteSelectUpdate.getInitialProps = async function (context) {
  console.log(context.query);
  const res = await axios.get(urls.userList, config1)
  console.log(res.data);
  var query = context.query;
  return {
    data: res.data.results,
    dataToString: JSON.stringify(res.data.results),
    query: JSON.stringify(context.query)
  }
}

export default addDeleteSelectUpdate;

數據請求-axios配置

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

axios具有以下幾個特點：

• 既可以在服務端使用又可以在瀏覽器端使用；
• 支持 Promise API（async await，解決地獄回調）；
• 攔截請求和響應（401跳轉登錄等操作）；
• 轉換請求數據和響應數據；
• 自動轉換 JSON 數據。

以下為axios配置代碼：

//lib/axios.js
import axios from 'axios';
import NProgress from 'nprogress';

axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.withCredentials = true;
axios.defaults.timeout = 5000;

//請求之前
axios.interceptors.request.use((config)=>{
  if(process.broswer) NProgress.start()//加一個loading
  return config;
});

//
axios.interceptors.response.use(
  response => {
    // console.log('-------axiosResponse---------')
    if(process.broswer) NProgress.done()
    return response;
  },
  error => {
    // console.log('-------axiosError---------:');
    // console.log(error.response.status==401)
    if(process.broswer) NProgress.done()
    if(error.response&&error.response.status==401){
      window.location.href="/login";//登錄失效跳轉
    }
    return Promise.reject(error);
  }
);

export default axios;

使用時在頁面引入axios配置文件axios.js，具體的axios配置可以參考link-axios文檔。

//pages/login.js
import axios from '../lib/axios';
...

axios.post(urls.login,qs.stringify(obj))
.then(res=>{
    console.log(res);
    Router.push('/contract/list');
})
.catch(error=>{
    console.log(error);
})
...

數據請求-開發環境代理

前后端分離以后，前端最常見的一個問題就是跨域，之前的om項目基於nuxt可以配置proxy，在next.js里需要用到express和http-proxy-middleware在服務端（node）端做一層轉發，代碼配置如下：

//server.js
var express =require('express');
var next = require('next');

const devProxy = {
  '/api': {
    target: 'http://39.107.58.75:9092/',// 目標服務器 host
    pathRewrite: {'^/api': '/'}, // 重寫請求，比如我們源訪問的是api/login，那么請求會被解析為/www/login
    changeOrigin: true,// 默認false，是否需要改變原始主機頭為目標URL
  },
  '/jt':{
    target: 'https://api.dededemo.com/plus/weapp.php?action=index&domain=http://23jt.net&skin=weapp&ver=3.0&page=1',// 目標服務器 host
    // pathRewrite: {'^/api': '/'}, // 重寫請求，比如我們源訪問的是api/login，那么請求會被解析為/www/login
    changeOrigin: true,// 默認false，是否需要改變原始主機頭為目標URL
  }
}

const port = parseInt(process.env.PORT, 10) || 3000
const env = process.env.NODE_ENV
const dev = env !== 'production'
const app = next({
  dir: '.', // base directory where everything is, could move to src later
  dev
})

const handle = app.getRequestHandler()

let server
app
  .prepare()
  .then(() => {
    server = express()
      
    // Set up the proxy.
    if (dev && devProxy) {
      const proxyMiddleware = require('http-proxy-middleware')
      Object.keys(devProxy).forEach(function (context) {
        server.use(proxyMiddleware(context, devProxy[context]))
      })
    }

    // Default catch-all handler to allow Next.js to handle all other routes
    server.all('*', (req, res) => {
        req.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        req.headers['X-Requested-With'] = 'XMLHttpRequest';
        handle(req, res);
        // console.log(req.body);
      }
    )

    server.listen(port, err => {
      if (err) {
        throw err
      }
      console.log(`> Ready on port ${port} [${env}]`)
    })
  })
  .catch(err => {
    console.log('An error occurred, unable to start the server')
    console.log(err)
  })

配置完server.js后還需要在packge.json中配置啟動腳本：

"devdev": "cross-env NODE_ENV=development PORT=9527 node server.js",

注意上線后需要在ngnix里配置反向代理，就不存在跨域的問題。

在next.js里使用ant design

• babel配置

//.babelrc
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "module-resolver", {
      "root": ["."],
      "alias": {
        "styles": "./styles"
      },
      "cwd": "babelrc"
    }],
    ["import", { "libraryName": "antd" }]
  ],
  "ignore": []
}

• 引用ant design組件，需要用到ant design什么組件按照自己需要引用即可，各個組件使用方法參考ant design的link-官方文檔

import {Form, Icon,Input, Button, Checkbox, message} from 'antd'; 

部署一個next.js項目

Next.js 項目的部署，需要一個 Node.js的服務器。
在開發環境服務器的入口文件就使用上文中提到的 server.js，在 server.js 里添加了針對部署環境的選擇，代碼如下

const dev = process.env.NODE_ENV !== 'production'

為了區分部署環境，我們需要在 package.json 中修改 script 屬性如下：

"scripts": {
    "dev": "next",
    "devdev": "cross-env NODE_ENV=development PORT=9527 node server.js",
    "build": "next build",
    "start": "next start",
    "generate": "next build && next export",
    "export-h":"next export -h"
  },

其中，build 命令是用於打包項目，start 命令是用於生產環境部署，devdev 命令是用於本地開發，PORT為啟動端口。

注意的幾個點

• 增加第三方npm包必須加上--save關鍵字，會pakage.json文件里加入依賴包；

//如增加js-md5庫
$ npm install js-md5 --save

• 組件名稱必須以大寫字母開頭，如MyHeader；
• React的事件中如果不用剪頭函數，那就要用bind來綁定this，否則需要在constructor構造函數里調用this.handleClick = this.handleClick.bind(this)，這里建議用onClick={this.handleClick.bind(this)}。

總結

只要熟悉React開發，上手一個Next項目很容易，Next 讓前端項目開發效率更高。

參考資料

• ant design官方文檔：https://ant.design/docs/react/introduce-cn
• ant design腳手架市場：http://scaffold.ant.design/#/?tags=antd&tags=react
• ant design使用小結：https://www.cnblogs.com/wx1993/p/6511389.html
• 用Next.js快速上手React服務器渲染 https://segmentfault.com/p/1210000010368182/read
• React 服務端渲染框架 Next.js 基於 Gank api 實戰 https://orangexc.xyz/2017/10/19/Nextjs-gank/
• 基於 React 的通用框架 Next.js：服務端 React（axios）
  https://www.zcfy.cc/article/react-universal-with-next-js-server-side-react-2158.html
• 使用next.js完成從開發到部署 https://juejin.im/post/5b08078b51882538ad3f163d
• react學習線路圖 https://juejin.im/entry/5b49af6d6fb9a04fe25ec224
• React使用Next.js作服務器端渲染 https://blog.csdn.net/xcg132566/article/details/78857017
• css modules 用法 http://www.ruanyifeng.com/blog/2016/06/css_modules.html

更多

更多前端技術請訪問我的博客:https://hurely.github.io