React基础与实践

Alcadias
72 阅读3分钟

React特性与简介

React特点： 声明式、组件化、跨平台编写

等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。

在等待资源加载时

  • 一次性请求太多资源
  • 网络请求慢
  • 资源加载失败

==>React.lazy React.Suspense ErrorBoundary

浏览器线程执行

  • JS执行
  • 浏览器计算样式布局
  • UI绘制

==>异步更新、时间切片、React Fiber

//实现ErrorBoundary
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    static getDerivedStateFromError() {
    //更新 state 使下一次渲染能够实现降级UI
        return { hasError: true };
    }
    
    componentDidCatch(error, errorInfo){
        logger.error(error, errorInfo);
    }
    render() {
        if(this.state.hasError) {
            //可以自定义降级后的UI并渲染
            return (
                <Empty description="抱歉，出现错误！" />
            );
        }
        return this.props.children;
    }
}

React更新流程

Scheduler（调度器）

  • 维护时间切片
  • 与浏览器任务调度
  • 优先级调度

Reconciler（协调器）

  • 将JSX转化为Fiber
  • Fiber树对比（双缓存）
  • 确定本次更新的Fiber

Renderer（渲染器）

  • 渲染器用于管理一颗React树，使其根据底层平台进行不同的调用

image.png

fiber树更新流程

image.png

Hook规则 & 原理

  • 只能在最顶层使用Hook
  • 只能在React函数中调用Hook
    • 只在React函数组件中或自定义Hook中调用
    • 自定义Hook必须以use开头
    • Hook中的state是完全隔离的

Hook过期闭包问题

在JS中，函数运行的上下文是由定义的位置决定的，当函数的闭包包住了旧的变量值时，就出现了过期闭包问题。

image.png

React常见API及作用

image.png

React常见Hook及作用

image.png

React组件通信

  • 父组件向子组件通讯: ⽗组件可以向⼦组件通过传 props 的⽅式，向⼦组件进⾏通讯

  • 子组件向父组件通讯: props+回调的⽅式，⽗组件向⼦组件传递props进⾏通讯，此props为作⽤域为⽗组件⾃身的函 数，⼦组件调⽤该函数，将⼦组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中

  • 兄弟组件通信: 找到这两个兄弟节点共同的⽗节点,结合上⾯两种⽅式由⽗节点转发信息进⾏通信

  • 跨层级通信: Context 设计⽬的是为了共享那些对于⼀个组件树⽽⾔是“全局”的数据，例如当前认证的⽤户、主题或⾸选语⾔，对于跨越多层的全局数据通过 Context 通信再适合不过

  • 发布订阅模式: 发布者发布事件，订阅者监听事件并做出反应,我们可以通过引⼊event模块进⾏通信

  • 全局状态管理⼯具: 借助Redux或者Mobx等全局状态管理⼯具进⾏通信,这种⼯具会维护⼀个全局状态中⼼Store,并根据不同的事件产⽣新的状态

React性能优化

react的父级组件的render函数重新渲染会引起子组件的render方法的重新渲染。但是，有的时候子组件的接收父组件的数据没有变动。子组件render的执行会影响性能，可以使用shouldComponentUpdate来解决这个问题。

avatar
文章
阅读
粉丝