# learn-react

**Repository Path**: fishery/learn-react

## Basic Information

- **Project Name**: learn-react
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-22
- **Last Updated**: 2021-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React
### 虚拟DOM的创建
>1. 一般使用jsx创建虚拟DOM，jsx其实就是js创建虚拟DOM的语法糖
### 虚拟DOM和真实DOM
>1. 虚拟DOM本质上是一个Object类型的对象（一般对象)  
>2. 虚拟DOM比较轻而真实DOM比较重，应为虚拟DOM是React内部在用，无需DOM上那么多的属性  
>3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

### jsx语法规则
>1. 定义虚拟DOM时，不要写引号
>2. 标签重混入js表达式时要用{}
>    - 要注意区分 js表达式和js代码的区别
>        - 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方  
>            (1) a  
>            (2) a+b  
>            (3) demo(1)  
>            (4) arr.map()  
>            (5) function test(){}  
>        - 语句（代码）  
>            (1) if(){}  
>            (2) for(){}  
>            (2) switch(){case:xxxx}  
>3. 样式的类名指定不要用class，要用className
>4. 内联样式，要用style={{key:value}}的形式去写 
>5. 虚拟DOM必须只有一个根标签
>6. 标签必须闭合
>7. 标签首字母  
>    - 若小写字母开头，则将标签转为HTML中同名元素，若HTML中无该标签同名元素，则报错
>    - 若大写字母开头，则react将会渲染对应组建，若没有对应组建，则报错

### 模块与组件，模块化与组件化
> #### 模块
> 1. 定义：向外提供特定功能的js程序，一般就是一个js文件
> 2. 原因：随着业务逻辑增加，代码越来越复杂
> 3. 作用：复用js，简化js的编写，提高js运行效率  

> #### 组件
> 1. 定义： 用来实现局部功能效果的代码和资源的集合(html/css/js/imag, etc.)
> 2. 原因： 一个界面的功能越来越复杂
> 3. 作用： 复用编码，简化项目编码，提高运行效率

> #### 模块化
> 当应用的js都是一模块来编写，这个应用就是一个模块化的应用

> #### 组件化
> 当应用是以组件组合起来的时候，这个应用就是一个模块化的应用

> #### react组件编程

> #### class review
> 1. 类中的构造器不是必要的，要对实例进行一些初始化的操作，如添加指定属性时才写
> 2. 如果A类继承了B类，如果A类中写了构造器，那么A类构造器中，那么A类中的super时必须要写的
> 3. 类中所定义的方法，都放在了类的原型对象上，供实例使用
> 4. 类中的方法默认开启了严格模式

> #### 组件实例的三大核心属性
> 1. state
>    - 理解
>        - state是组件对象最重要的属性，值是对象，可包含多个key-value的组合 
>        - 是组件的状态机，通过更新组件的state来跟新对应的页面显示(重新渲染) 
>    - 注意
>        - state不能直接更改，需要用到API(setState)
>        - setState 是一种合并，不是替换
>        - setState 会调用render
>        - 组件中render方法中的this为组件实例对象
>        - 组件自定义方法中的this为undefined，如何解决:
>            - 强制绑定this：通过函数对象的bind()
>            - 赋值语句+箭头函数 

> 2. props
>    - 理解
>        - 每个组件对象都会有props(properties)属性
>        - 组件标签的所有属性都会保存再props中
>    - 作用
>        - 通过标签属性，总组件外部向组件内部传递变化的数据
>        - 注意：组件内部不要修改props 

> 3. ref
>   - 写法
>       - 字符串，内联函数， 类绑定函数， createRef

> #### 事件
>   - 通过onXXX属性指定事件处理函数
>       A React使用的是自定义事件，而不是原声DOM事件-----为了更好的兼容性
>       B React中的事件时通过时间委托方式处理的（委托给组建最外层） ------为了高效
>   - 通过event.target得到发生事件的DOM元素对象

> #### 受控组建与非受控
>   - 非受控：现用现取
>   - 随着输入组建的内容的变化自动维护state

> #### 组件的书写
> 1. 一般不写构造函数，state可以直接进行赋值初始化状态（state)
> 2. 自定义方法要用赋值语句的形式+箭头函数来编写，因为箭头函数中的this会找block的外层对象，所以这个this会指向组件实例

> #### 生命周期(left circle) 
> 1. 初始化阶段： ReactDOM.render()触发---初次渲染
>       1. constructor
>       2. componentWillMount()
>       3. render()
>       4. componentDidMount() ======>常用,一般做初始化操作，定时器，订阅消息等等
> 2. 更新阶段：有组件内部的setState()或者父组件重新render触发 
>       1. shouldComponentUpdate()
>       2. componentWillUpdate()
>       3. render()
>       4. componentDidUpdate()
> 3. 卸载阶段：ReactDOM.unmountComponentAtNode触发 
>       1. componentWillUnmount()

> #### 高阶函数
>1. 若函数接受的参数是一个函数，则该函数时高阶函数
>2. 若函数返回一个函数，则该函数是高阶函数
>3. 函数的柯里化，通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式

#### lifecycle
![avatar](leftcircle.png)

> #### Diffing
> 1. react中的key有什么作用？（Key的内部原理是什么）
>       1. 简单的说，key是虚拟DOM对象的标识，在跟新显示时Key起着极其重要的作用
>       2. 详细的说，当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与 【就虚拟DOM】进行diffing比较，比较规则如下
>           - 旧虚拟DOM中找到了与新虚拟DOM相同的key：
>               - 若虚拟DOM中内容没变，直接使用之前的真实DOM
>               - 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
>           - 旧虚拟DOM中未找到与新虚拟DOM相同的key，根据数据创建新的真实DOM，随后渲染到页面 
> 2. 使用index作为key“可能”引发的问题
>       1. 如果数据进行：逆序添加，逆序删除等破环原本数据顺序的操作，会产生没有必要的真实DOM更新，渲染“可能没问题”，但是一定会影响效率
>       2. 如果还包含输入类DOM，会导致界面出现问题
>       3. 如果操作中不包含逆序添加，逆序删除等操纵，仅仅渲染列表用于展示，用index也可以
> 3. 开发中尽量选择数据库中的唯一主键作为key操作，简单展示也能用index