# react-study

**Repository Path**: olyluck/react-study

## Basic Information

- **Project Name**: react-study
- **Description**: 学习项目：react全家桶、react原理、组件库、typescript
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-12-06
- **Last Updated**: 2022-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-study

#### 介绍
学习项目：react全家桶、react原理、组件库、typescript

#### 安装
全局安装react-create-app



## 说明

1. setupTests.ts会在启动时全局运行
2. Git – Windows 使用 TortoiseGit 识别出文件修改大小写

![擷取](https://img-blog.csdnimg.cn/img_convert/5a5a187812c95cd6f8589c86542a8f80.png)

#### 脚手架

npx create-react-app demo --template typescript   ts模板项目

npx 用于避免全局安装 create-react-app

### 概念

1. 函数式组件与class组件 组件名要大写

2. 受控组件与非受控组件 form表单  ref

3. 合成事件与原生事件
   * onClick等事件被react合成事件接管，不能直接使用原生事件的行为  e.nativeEvent.stopImmediatePropagation();
   * addEventListener则不会
   * stopImmediatePropagation与stopPropagation
4. Hooks  useState useEffect

### typescript

接口：可以以大写的 I 开头，大驼峰 如interface IShowResult {}，用于搭配ShowResult 函数组件等

类型提示：如果缺少关键类型提示（比如对象的属性），那么一定是没有指定类型（比如 e: mouseEvent,  data as IURLLoader，useRef<HTMLInputElement>(null)  ）

type：别名，可以接收任意类型，比如多个接口

联合类型：**不是并集**

交叉类型：**不是交集**，交叉类型把几个类型的成员合并，形成**一个拥有这几个类型所有成员的新类型**

联合类型与交叉类型类似，都可以拥有多个类型的能力，区别是：**联合类型一次只能一种类型；而交叉类型每次都是多个类型的合并类型。**

泛型：如果某个值（注意不是类型）需要约束类型，那么这个值的调用函数可以使用泛型，比如

```typescript
useState<string[]>([])
```





### 渲染过程

当state、props变化需要重新渲染时，整个渲染函数会重新执行，意味着useEffect/自定义hooks都会执行（如果依赖符合或者无限制）

组件每次渲染都是独立的，这一次的state、props与上一次的、下一次的无关（类似for循环闭包，变量独立）

```
const [like, setLike] = useState(0);
  const handleAlertClick = () => {
    setTimeout(() => {
      // like在某次渲染时被赋值，之后保持不变：与之后的渲染中的变量like不是同一个变量
      alert(like)
    }, 3000);
  } 
```



### useState

**注意**：setState是异步的，如果要等待state状态变化后再去下一步操作，有两个办法：

useEffect监听state；setState(()=>{return xx}) ，回调函数 传递上一次(更新后)的state，返回下一次的state，比如

```
const [xx, setXx] = setState(1);  console.log(xx); setState((preXx)=>{return nextXx});
// 同步的console.log(xx) 无法获取到到正确的xx，而使用setState回调可以正确的获取xx
```



### useContext

创建的context 大驼峰

使用场景：两个组件通过children嵌套，这时没法使用props传递数据，只能使用context

### useRef

每次执行都得到最终的变量值，意味着异步操作这个变量也能保持一致（相当于一个普通的js对象（不会每次重新赋值））

结合useEffect 在没有生命周期的函数式组件中 实现 componentDidUpdate 

ref变化不会触发渲染 ，            但是state变化必然触发渲染（无论是否插入到dom中）

用于获取dom，和vue3用法相同：dom节点定义ref属性，useRef使用相同的ref属性来获取dom

### 自定义hooks

文件名以use开头（如同useState 、 useEffect这种写法） 如useMousePosition.tsx  函数名也一样

## hook规则

1. 在顶层使用hook，不要在dom中使用
2. 在react函数、自定义hook中使用hook，不要在其他自定义函数中使用hook，这是为了hook能正确被调用

## react动画

### react-transition-group

```jsx
      <CSSTransition
        in={menuOpen}
        // timeout和css动画里面的时间的区别
        // css enter-active表示
        timeout={5000}
        classNames='zoom-in-top'
        // appear表示首次渲染必须动画（比如初始menuOpen为TRUE，仍然执行隐藏->显示动画）
        appear
        // 动画结束后卸载节点
        unmountOnExit
      >
        <ul className={childrenClasses}>
          {childrenComponent}
        </ul>
      </CSSTransition>
```



```css
.zoom-in-top-enter {
    opacity: 0;
    transform: scaleY(0);
}
.zoom-in-top-enter-active {
    opacity: 1;
    transform: scaleY(1);
    transition: transform 3000ms cubic-bezier(0.23, 1, 0.32, 1) , opacity 3000ms cubic-bezier(0.23, 1, 0.32, 1) ;
    transform-origin: center top;
}
```

如上：enter第一个瞬间加入 ， enter-active第二个瞬间加入，transition 3000ms 不是说3000ms后加入样式！！！，而是该样式控制opacity 3000ms的渐变；

enter-done 在CSSTransition的timeout 之后加入且*一直存在直到触发新的动画*，**同时enter，enter-active会被删除**

enter-done 如果不写则默认为动画终点 （如opacity 0 -> 1）



## 测试

避免人肉测试

避免在浏览器上一个一个添加组件、组件的props等 来测试

------