React (3) react 笔记

傷城~ 2021-09-17 01:36 383阅读 0赞

## 1.  react 特点 ##

1.  声名式开发 (可以减少大量操作dom)
2.  可以与其他框架并存 (react 只挂载一个元素上, 其他框架挂用另外元素就行了)
3.  组件化 
4.  单项数据流 (父组件操作数据, 子组件调用父组件方法间接改变数据)
5.  视图层框架 (redux, flux, 状态管理库)
6.  函数式编程 (函数式编程更容易实现前端自动化测试)

## 2. render ##

当组件的state或者props发生改变的时候, render函数就会重新运行一次

注意 这里的写法 **import React, \{ Component \} from 'react';**

import React, {Component} from 'react';
    // 等价于
    import React from 'react'
    const Component = React.Component

## 3. 虚拟dom ##

第 1 次试验

1.  state 数据
2.  JSX 模板
3.  数据 + 模板 结合, 生成真实的DOM, 来显示
4.  state 发生改变
5.  数据 + 模板 结合.  生成真实的DOM, 替换原始的DOM (全部替换)

缺陷:

第一次生成了一个完整的DOM片段

第二次生成了一个完成的DOM片段

第二次的DOM替换第一次的DOM, 非常耗性能

第 2 次改良 :

1.  state 数据
2.  JSX 模板
3.  数据 + 模板 结合, 生成真实的DOM, 来显示
4.  state 发生改变
5.  数据 + 模板 结合.  生成真实的DOM, 并不直接替换原始的DOM
6.  新的DOM(DoucumentFragment) 和原始的DOM 做对比,  找差异 (多了对比这个操作)
7.  找出 input 框发生了变化
8.  只用新的 DOM 中的input元素, 替换掉老的DOM中的input元素 (局部替换)

缺陷:

性能的提升并不明显

第 3 次改良 :

1.  state 数据
2.  JSX 模板
3.  数据 + 模板 结合, 生成真实的DOM, 来显示  
      
    <div id='abc'><span>hello world</span></div>
4.  生成虚拟DOM (虚拟DOM就是一个JS对象, 用它来描述真实DOM) (损耗了性能, 用JS创建JS对象非常简单, 但是用JS创建DOM会复杂 )  
      
    \['div', \{id: 'abc'\}, \['span', \{\}, 'hello world'\]\]
5.  state 发生改变
6.  数据 + 模板 生成新的虚拟DOM (生成虚拟DOM本质上生成了一个JS 对象, 极大的提升了性能)  
      
    \['div', \{id: 'abc'\}, \['span', \{\}, 'hello react'\]\]
7.  比较原始虚拟DOM和新的虚拟DOM的区别, 找到区别是span 中内容 (极大的提升了性能)
8.  直接操作DOM, 改变span中的内容

优点:

引入虚拟DOM为什么可以提高性能?

**减少了对真实DOM的创建和对真实DOM的对比, 取而代之,创建的都是JS对象, 对比都是JS对象,因此大大的提升了性能**

## 4.  深入了解虚拟DOM ##

1.  state 数据
2.  JSX 模板
3.  数据 + 模板 结合,  生成虚拟DOM (虚拟DOM就是一个JS对象, 用它来描述真实DOM) (损耗了性能, 用JS创建JS对象非常简单, 但是用JS创建DOM会复杂 )  
      
    \['div', \{id: 'abc'\}, \['span', \{\}, 'hello world'\]\]
4.  用虚拟DOM的结构生成真实的DOM, 来显示  
      
    <div id='abc'><span>hello world</span></div>
5.  state 发生改变
6.  数据 + 模板 生成新的虚拟DOM (生成虚拟DOM本质上生成了一个JS 对象, 极大的提升了性能)  
      
    \['div', \{id: 'abc'\}, \['span', \{\}, 'hello react'\]\]
7.  比较原始虚拟DOM和新的虚拟DOM的区别, 找到区别是span 中内容 (极大的提升了性能, diff)
8.  直接操作DOM, 改变span中的内容

优点 :

1.  性能提升了
2.  它使得跨端应用得以实现. React Native

## 5.  虚拟DOM diff 算法 ##

同层比对

key值不用index

## 6.  ref 操作DOM标签 ##

handleBtnClick() {
            this.setState((prevState) => ({ // 异步函数
                list: [...prevState.list, prevState.inputValue],
                inputValue: ''
            }), () =>{
                console.log(this.ul.querySelectorAll('div').length);
            })
    }

## 7.  react 中的生命周期函数 ##

*  生命周期函数是指组件运行时, 会在某一时刻**自动执行**的函数
 *  生命周期函数执行顺序图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70][]

*  生命周期各个部分执行顺序图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1][]

##  8.  性能优化的几个点 ##

1.  在constructor()函数中, 改变函数作用域, 只用写一次, 执行一次  
      
    this.func = this.func.bind(this)
2.  react底层 setState()函数, 内置了性能提升机制, 是一个异步的函数, 它将多次数据的改变结合成一次来执行
3.  react 底层 虚拟DOM 和 同层 key值比较
4.  shouldComponentUpdate()生命周期函数, 可以判断数据内容, 判断是否执行render函数

## 9.  ajax 请求 ##

1.  初始化ajax 请求建议放在 生命周期componentDidMount函数里面 只执行一次, 最合适, 其他地方或多或少都有些问题

## 10.  使用 charles 模拟接口数据 ##

非常详细的教程 [戳这里][Link 1]

## 11.  css 过渡动画 ##

1.  js 函数 切换类名
2.  css3 过渡动画

.show {
        animation: show-item 2s ease-in forwards;
    }
    .hide{ 
        animation: hide-item 2s ease-in forwards;
    }
    
    @keyframes hide-item{
        0% {
            opacity: 1;
            color: red;
        }
        50% {
            opacity: 0.5;
            color: green;
        }
        100% {
            opacity: 0;
            color:blue;
        }
    }
    @keyframes show-item{
        0% {
            opacity: 0;
            color: red;
        }
        50% {
            opacity: 0.5;
            color: green;
        }
        100% {
            opacity: 1;
            color:blue;
        }
    }

3.  react-transition-group 详细使用 [戳这里][Link 2]

import React, { Component } from 'react';
    import { CSSTransition, TransitionGroup } from 'react-transition-group';
    import './style.css'
    class App extends Component {
        constructor(props) {
            super(props)
            this.state = {
                list: []
            }
            this.handleToggole = this.handleToggole.bind(this)
        }
    
        render() {
            return (
                <div>
                    <TransitionGroup>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <CSSTransition
                                    timeout={1000}
                                    classNames='fade'
                                    unmountOnExit
                                    onEntered={(el) => {el.style.color='blue'}}
                                    appear={true}
                                    >
                                        <div key={index}>{item}</div>
                                    </CSSTransition>
                                )
                            })
                        }
                    </TransitionGroup>
    
                    <button onClick={this.handleToggole}>toggle</button>
                </div>
            )
        }
        handleToggole() {
            // this.setState({
            //     show: this.state.show ? false : true
            // })
            this.setState((prevState) => {
                return {
                    list: [...prevState.list, 'item']
                }
            })
        }
    }
    
    export default App;

.fade-enter ,.fade-appear{
        opacity: 0;
    }
    
    .fade-enter-active, .fade-appear-active{
        opacity: 1;
        
        transition: opacity 1s ease-in;
    }
    
    .fade-enter-done{
        opacity: 1;
        /* color:blueviolet; */
    }
    
    .fade-exit {
        opacity: 1;
    }
    
    .fade-exit-active {
        opacity: 0;
        transition: opacity 1s ease-in;
    }
    
    .fade-exit-done {
        opacity: 0;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70]: /images/20210726/12dd85a213bf4839b0102c928d919785.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1]: /images/20210726/b53499a281264a8fabd350a560b27a09.png
[Link 1]: https://www.jianshu.com/p/fb2bdde5b498
[Link 2]: https://reactcommunity.org/react-transition-group/css-transition