8.31

这几天开会确定了自己要为项目增加的功能，上了两节react的培训课程，了解了一下目前项目的结构。自己试着按照原型图写了几个组件，做出了其中一个页面的大概结构，但是因为这样的开发流程不符合规范，需要重新写。8.31这一天学习到了很多，比如：

1.写代码之前分解给出的AC，按照功能写出每一个story的功能点，依次进行添加。

2.写功能点的时候，先添加内容，也就是html，然后再写样式（今天只写了一个样式组件，还未涉及到写功能）。

3.提交的时候需要原子提交，不能像之前那样一下添加许多个组件。

4.然后是需要配置一下样式文件，我现在vscode用的应该是prettier，但是我配置的样式和项目规定的样式不符合，所以每次保存代码都有样式问题。主要是有两个样式问题，一个是缩进应该是2个空格，我的是4个；另一个是import部分用单引号，我的用的是双引号。

5.想要直接生成react模板，但是没有找到对应指令。又看了一下视频，是用的全局输入代码片段功能，输入ts后回车，另一方法需要安装插件snippets。

6.flex之前只是在书上看过，用的时候很不熟系。git也有一些不熟悉的指令。 flex总结：以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

www.ruanyifeng.com/blog/2015/0… git常用指令： zhuanlan.zhihu.com/p/22276984

还有一些知识点：

1.BDD 行为驱动开发（Behavior-Driven Development）（简写BDD），在软件工程中，BDD是一种敏捷软件开发的技术。行为驱动开发(BDD)是测试驱动开发的延伸，开发使用简单的，特定于领域的脚本语言。这些DSL将结构化自然语言语句转换为可执行测试。结果是与给定功能的验收标准以及用于验证该功能的测试之间的关系更密切。因此，它一般是测试驱动开发(TDD)测试的自然延伸。 BDD 作为一种设计方法，可以有效的改善设计，并在系统的演化过程中为团队指明前进方向。行为驱动开发的根基是一种“通用语言”。这种通用语言同时被客户和开发者用来定义系统的行为。由于客户和开发者使用同一种“语言”来描述同一个系统，可以最大程度避免表达不一致带来的问题。表达不一致是软件开发中最常见的问题，由此造成的结果就是开发人员最终做出来的东西就不是客户期望的。使用通用语言，客户和开发者可以一起定义出系统的行为，从而做出符合客户需求的设计。但如果光有设计，而没有验证的手段，就无法检验我们的实现是不是符合设计。所以 BDD还是要和测试结合在一起，用系统行为的定义来验证实现代码。虽然行为驱动开发是测试驱动开发的进化，但关注的核心是设计。行为驱动开发中，定义系统的行为是主要工作，而对系统行为的描述则变成了测试标准。在行为驱动开发中，我们需要使用通用语言来定义系统行为。而通用语言，实际上是一个最小化的词汇表。我们使用这些词汇来书写故事。选入词汇表的词汇必须具有准确无误的表达能力和一致的含义。例如“系统”这个词就不符合要求，因为在不同的语境（又称为上下文 Context）中，“系统”一词具有不同的含义。而“自动提款机”则明确标识了一个没有歧义的事物。

2.原子提交原子提交意味着，一个事务中的所有修改动作要么全都发生，要么一个都不发生。代码提交的原子性是指:一个提交包含一个不可分割的特性、功能、修复或者优化,同时这个提交要尽可能小。原子性提交的优点是:结构清晰、容易定位问,一般来说,代码提交的原子性做得越好,代码质量越好,同时,原子性提交因为小而聚焦,也是做好代码审查的基础。

3.Suspence react官网文档：Suspense lets components “wait” for something before rendering. Today, Suspense only supports one use case: loading components dynamically with React.lazy. In the future, it will support other use cases like data fetching.It is documented in our code splitting guide. Note that lazy components can be deep inside the Suspense tree — it doesn’t have to wrap every one of them. The best practice is to place where you want to see a loading indicator, but to use lazy() wherever you want to do code splitting.reactjs.org/docs/react-…

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Suspense功能想解决从react出生到现在都存在的「异步副作用」的问题，而且解决得非常的优雅，使用的是「异步但是同步的写法」，我个人认为，这是最好的解决异步问题的方式。调用render函数->发现有异步请求->悬停，等待异步请求结果->再渲染展示数据。

9.1

1.git rebase

git pull --rebase

git rebase命令在另一个分支基础之上重新应用，用于把一个分支的修改合并到当前分支。在rebase的过程中，也许会出现冲突(conflict)。在这种情况，Git会停止rebase并会让你去解决冲突；在解决完冲突后，用”git add“命令去更新这些内容的索引(index), 然后，你无需执行 git commit,只要执行:

$ git rebase --continue

这样git会继续应用(apply)余下的补丁。在任何时候，可以用--abort参数来终止rebase的操作。 rebase操作的特点：把分叉的提交历史“整理”成一条直线，看上去更直观。缺点是本地的分叉提交已经被修改过了。

遇到两个问题暂时没解决 2.module.css不生效

3.server.json配置时，路由最多只能有四级

9.3

需要学习的东西

1.redux

2.redux toolkit

3.jest

4.react testing libarary

5.json.server

6.mock.js

我的前端学习流水账（8.30-9.3）

8.31

9.1

9.3