React简介与特性

特点：

声明式
组件化
跨平台编写

影响web性能的主要原因：

等待资源加载时间

React.Lazy，React.Suspense，ErrorBoundary

大部分情况下浏览器单线程执行

异步更新，时间切片，React Fiber

React更新流程

Scheduler(调度器)：维护时间切片(requestldleCallback)、与浏览器任务调度、优先级调度
Reconciler(协调器)：将JSX转化为Fiber、确定本次更新的Fiber、Fiber树对比(双缓存)
Renderer(渲染器)：渲染器用于管理一颗React树，使其根据底层平台进行不同的调用

优点：

快速响应：Fiber
组件化：复用性强
声明式编程
跨平台：只需修改渲染器

缺点：

大型应用需要配套学习状态管理、路由工具
不适合小型应用，需要用babel处理

React基础温故知新

组件

Class组件：

继承+构造函数
this
生命周期
render方法

//继承React.Component类
class Demo1 extends React.Component{
//实现继承的类的构造方法
    constructor(props){
        super(prpos);
        this.state = {date:new Date()};
    }
    timerID = null;
    tick(){
        this.setState({
            date:new Date(),
        });
    }
    componentDidMount(){
        this.timerID = setInterval(()=>this.tick(),1000);
    }
    componentWillUnmount(){
        clearInterval(this.timerID);
    }
    render(){
        return(
            <div>
                <h1>Hello,world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

函数式组件：

没有生命周期
借助Hook
return JSX

function Demo1WithHook(){
    const [date,setDate] = useState<Date>(new Date());
    const timerID = useRef<any>(null);
    const tick = ()=>setDate(new Date());
    useEffect(()=>{
        timerID.current = setInterval(tick,1000);
        return ()=>{
            clearInterval(timerID.current);
        };
    });
    return (
         <div>
            <h1>Hello,world!</h1>
            <h2>It is {date.toLocaleTimeString()}.</h2>
         </div>
    )
}

函数式相较于Class的优点：

代码量骤减，组件干净清爽
没有复杂的生命周期
支持自定义hook，逻辑复用方便

组件和hook的关系：

将UI拆成多个独立单元，这些单元可以构成多种视图展示，这些独立单元就是组件，组件相当于原子
hook贴近组件内部运行的各种概念逻辑，effect、state、context等。hooks更贴切于电子

Hook规则&原理

只能在最顶层使用Hook：React靠Hook调用顺序知道哪个state对应哪个useState
只能在React函数中调用hook：在React函数组件中或自定义hook中调用；自定义hook必须以use开头；hook中的state是完全隔离的

React基础与实践|青训营笔记

React简介与特性

React更新流程

React基础温故知新

组件

Hook规则&原理