三步快速上手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