next + react

Node -v: 20.19.2

 

Cli:  npx create-next-app@latest

 

npm install react@^18.3.1 react-dom@^18.3.1

npm install next@^14.2.31

 

Material UI

npm install @mui/material @emotion/react @emotion/styled

npm install @mui/icons-material

 

Integration

 

npm install @mui/material-nextjs @emotion/cache

 

Internal

 

ESLint + Prettier - Code formatter + Editor

 

Vscode

printWidth: 140

tabWidth: 2

Singleqoute: true

Semicolon： check

 

React

1. 组件
• 定义
• React 组件是常规的 JavaScript 函数，但 组件的名称必须以大写字母开头
• 没有括号包裹的话，任何在 return 下一行的代码都 将被忽略！
• return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
• return (

  <div>

    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />

  </div>

);

• 组件可以渲染其他组件，但是 请不要嵌套他们的定义

 

• 导入导出

 

语法	导出语句	导入语句
默认	export default function Button() {}	import Button from './Button.js';
具名	export function Button() {}	import { Button } from './Button.js';

当使用默认导入时，你可以在 import 语句后面进行任意命名，相反，对于具名导入，导入和导出的名字必须一致。

2. JSX

1. JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。

3. Props

1. 给 prop 指定一个默认值： 默认值仅在缺少 size prop 或 size={undefined} 时生效。 但是如果你传递了 size={null} 或 size={0}，默认值将 不 被使用。

function Avatar({ person, size = 100 }) {

  // ...

}

2. 使用 JSX 展开语法传递 props

 

function Profile({ person, size, isSepia, thickBorder }) {

  return (

    <div className="card">

      <Avatar

        person={person}

        size={size}

        isSepia={isSepia}

        thickBorder={thickBorder}

      />

    </div>

  );

}

 

替换为

 

function Profile(props) {

  return (

    <div className="card">

      <Avatar {...props} />

    </div>

  );

}

 

4. 保持组件纯粹

函数式编程在很大程度上依赖于纯函数，但 某些事物 在特定情况下不得不发生改变。这是编程的要义！这些变动包括更新屏幕、启动动画、更改数据等，它们被称为 副作用。它们是 “额外” 发生的事情，与渲染过程无关。

 

在 React 中，副作用通常属于 事件处理程序。事件处理程序是 React 在你执行某些操作（如单击按钮）时运行的函数。即使事件处理程序是在你的组件 内部 定义的，它们也不会在渲染期间运行！ 因此事件处理程序无需是纯函数。

 

如果你用尽一切办法，仍无法为副作用找到合适的事件处理程序，你还可以调用组件中的 useEffect 方法将其附加到返回的 JSX 中。这会告诉 React 在渲染结束后执行它。然而，这种方法应该是你最后的手段。

5. 事件处理函数

1. 命名

1. handle* 命名约定 (例如 handleClick): 定义事件处理函数本身
2. on* 命名约定 (例如 onClick): 组件的 props 名称

<button onClick={handleClick}> 或

<MyComponent onChange={handleInputChange}>

2. 阻止传播

 <div className="Toolbar" onClick={() => {

      alert('你点击了 toolbar ！');

    }}>

<button onClick={e => {

      e.stopPropagation();

      onClick();

    }}>

 </button>

</div>

3. 阻止默认行为

<form onSubmit={e => {

      e.preventDefault();

      alert('提交表单！');

    }}>

      <input />

      <button>发送</button>

    </form>

• e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。
• e.preventDefault() 阻止少数事件的默认浏览器行为。

6. State

 

如果你发现经常同时更改两个 state 变量，那么最好将它们合并为一个。例如，如果你有一个包含多个字段的表单，那么有一个值为对象的 state 变量比每个字段对应一个 state 变量更方便。

 

7. Hooks

Hooks ——以 use 开头的函数——只能在组件或自定义 Hook 的最顶层调用。 你不能在条件语句、循环语句或其他嵌套函数内调用 Hook。Hook 是函数，但将它们视为关于组件需求的无条件声明会很有帮助。在组件顶部 “use” React 特性，类似于在文件顶部“导入”模块。