三步快速上手Nextjs開發規範

• 前言

       最近加入了夢寐以求的前端團隊，主要的技術棧是TypeScript+React+Next+Mobx。然而，對於菜雞的我之前做小項目，很少會選用到這麼複雜的技術棧。以下都是大佬們給我代碼Review的總結，請各位看官多多指點。

• 安裝

       Next.js 是一個輕量級的 React 服務端渲染應用框架。很多領先的公司都在使用。

       Next,js提供了安裝腳手架，直接一條命令直接安裝。

npm init next-app
# or
yarn create next-app

安裝完成後會提示操作命令。

 

• 頁面路由

Next.js默認是通過文件系統路由的（file-system routing）。

新建一個pages文件夾，裏面每一個文件夾就是一個路由。

例如將./pages/index.tsx放到項目中，這就是網站的首頁

export default () => <div>Welcome to next.js!</div>

在./pages/a/index.js，則是路由/a

 

• 第一步 組件&&組件編寫規範

     能拆分一定要拆分，最理想情況是一個DIV一個組件

     能拆分一定要拆分，最理想情況是一個DIV一個組件

     能拆分一定要拆分，最理想情況是一個DIV一個組件

否則陷入嵌套地獄的時候就後悔莫及，

組件編寫和原來的React一樣。但是講究編寫規範，要將能拆分的都拆分，做到高內聚低耦合。

無狀態的組件就可以用Function來寫，傳入參數即可。

函數組件用例：

import * as React from 'react'


export default (props): React.ReactElement => {
  return (
    <div>
      <p>{props.text}<p>
    </div>
  )
}

有狀態的組件就可以用Hook或者Class。更加推薦使用Hooks,Hooks在function裏面實現了class的所有功能。粗淺的理解就是讓函數組價變成狀態類組件

Hook用例：

import React, { useState } from 'react';

function Example() {
  // 聲明一個叫 "count" 的 state 變量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

有坑，Hook裏面的state不能監聽數組變化

Class用例：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

• 第二步 樣式編寫規範

組件裏面要就是  Component-Level CSS  要就是 CSS-in-JS ，儘量一個組件裏只用className或者只用style

 Component-Level CSS用例：

components/Button.module.css

/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

components/Button.js

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

 

CSS-in-JS用例：

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}

export default HiThere

或者

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

 

• 第三步 全局狀態使用規範

狀態管理經過無數的考慮，選用Mobx，略過安裝（搜索React+Mobx就有哦）。Mobx全局狀態管理（全局變量）

儘量只在page裏面使用Store，組件使用Props

創建一個store文件夾，在stores文件夾裏面新建BStore.js：

import { action, observable } from 'mobx'

class BStore {
 @observable i = 1

 @action add(){
  this.i = this.i + 1
}
}

export default BStore

 

在pages文件夾在上新建b.js，且在b.js上使用mobx的變量:

import * as React from 'react'
import { inject, observer } from 'mobx-react'

@inject('BStore')
@observer
class B extends React.Component {
  render() {
    return (
      <div
        onClick={() => {
          this.props.bStore.add()
        }}
      >
        {this.props.bStore.i}
      </div>
    )
  }
}

export default B