react实现时钟小案列

展示

撸代码

// 0. 新建组件Clock.js
// 1. 创建一个名称扩展自 React.Component 的ES6 类
// 2. 创建一个叫做render()的空方法
// 3. 将函数体移动到 render() 方法中
// 4. 为当前组件添加一个局部状态state
// 5. 给组件添加生命周期componentDidMount、componentWillUnmount
// 6. 编写一个updateTime的函数,里面设定定时器,并且更新时间
// 7. 在componentDidMount中调用updateTime函数
// 8. 在componentWillUnmount这个钩子中卸载定时器

import React from "react"

// 类组件，也称之为有状态组件
class Clock extends React.Component{			
    constructor(){
        // 使用this前必须调用super()
        super()
        // 定义当前组件的局部状态==> 相当于vue组件中的data
        this.state = {
            timer:new Date().toLocaleTimeString()
        }
    }
    updateTime(){
        this.interval = setInterval(()=>{
            // 使用setState方法来更新局部数据
            // setState() 传递一个对象 这个对象会和this.state这个对象进行浅合并
            this.setState({
                timer:new Date().toLocaleTimeString()
            })
        },100)
    }
    componentDidMount(){    // 组件挂载之后==>相当于vue中的 mounted
        this.updateTime()
    }
    componentWillUnmount(){   // 组件即将卸载==>相当于vue中的beforeDestroy 
        //卸载定时器
        clearInterval(this.interval)
    }
    
	//这是react生命周期中的一个钩子函数,这里会进行diff算法和更新虚拟dom
    render(){
        return (
            <fieldset>
                <legend>时钟,(ง •_•)ง奥力给！</legend>
                <h1>{this.state.timer}</h1>
            </fieldset>
        )
    }
}

// 导出
export default Clock

// 使用Clock组件
import Clock from "./Clock"

<Clock/>

简单补充

super()

1.在子类使用this之前 必须调用 super()方法 获取this正确的指向
2.调用super相当于调用了父类的构造函数
3.使用super必须以调用函数的形式使用或者访问属性的方式使用它,可以使用super直接调用父类的动态方法

函数组件、类组件

函数组件，称之为无状态组件
函数组件的数据来源，只能通过props接收，我们也经常把函数组件 称之为ui组件
类组件，也称之为有状态组件

diff算法

diff算法的作用
计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。

传统diff算法
通过循环递归对节点进行依次对比，算法复杂度达到 O(n^3) ，n是树的节点数，这个有多可怕呢？——如果要展示1000个节点，得执行数10亿次比较，效率十分低下。即便是CPU能执行30亿条命令，也很难在一秒内计算出差异。

React的Diff算法
React把传统Diff的三个策略（Tree Diff、Component Diff、Element Diff）进行优化，将Diff复杂度从O(n^3)降到了O(n)。
React的Diff算法是在render里面进行计算的