react基础（异步加载及组件介绍） | 青训营笔记

用户4855013013781
318 阅读4分钟

react是用于构建Web和原生交互界面的库

React特性

  • 组件化
    • 使用组件化思想，将UI划分为一系列独立且可复用的组件，方便开发者维护和扩展应用
  • Virtual DOM
    • 使用虚拟DOM来减少对实际DOM的操作次数，提高应用性能
  • 单向数据流
    • 使用单向数据流模式来更新组件和管理组件之间的数据传递，保证数据的一致性和可预测性
  • JSX语法
    • 使用JSX语法来描述组件的渲染逻辑，使得组件的结构和样式更加清晰和直观
  • 生态系统
    • React生态系统非常丰富，有大量的第三方库和工具，可以帮助开发者更加高效地构建React应用

React基础

React是用JavaScript构建快速响应和大型Web应用程序的首选方式之一。

影响Web性能的两大主要原因：

  • 等待资源加载时间
  • 大部分情况下浏览器单线程执行

React中用来等待资源加载、优化性能和错误处理的一些方式：

  • react.lazy
  • react.Suspense

lazy函数可以让我们进行代码分割，把不同组件或模块的代码打包成不同文件，按需加载，在加载需要的组件时使用React.lazy()进行异步加载。如果要引用动态加载的组件，需要使用Suspense组件来包裹这个组件，同时提供一个fallback，在异步组件加载完成之前这个fallback组件会被显示出来。

//引入React和lazy函数
import React,{lazy,Suspense} from 'react';
//使用lazy函数创建动态加载的组件
const MyComponent = lazy(()=>import('./MyComponent'));
//使用Suspense包裹动态加载的组件，并提供fallback
function App(){
    return(
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <MyComponent/>
            </Suspense>
        </div>
    )
}
export default App;
  • ErrorBoundary（高阶组件）

ErrorBoundary是一个React组件，当一个错误在组件内部抛出时，该组件会停止渲染，如果正在渲染的是父组件，父组件也会停止渲染。ErrorBoundary可以捕获和展示错误，并在组件出错时展示备用UI，从而提高程序的可用性和稳定性。

class ErrorBoundary extends React.Compenent{
    constructor(props)}{
        super(props);
        this.state={hasError:false};
    }
    static getDerivedStateFromError(error){
        return {hasError:true}
    }
    render(){
        if(this.state.hasError){
            return this.props.fallback
        }
        return this.props.children
    }
}

function App(){
    return(
        <ErrorBoundary fallback={<p>Something went wrong</p>}>
            <Profile />  
        </ErrorBoundary>
    )
}

浏览器线程执行

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

更新流程

  1. 调用setState()或通过props传递新的值而触发组建的重新渲染。
  2. 调用组件的render()方法，生成一棵新的虚拟DOM树。
  3. 通过比较新旧虚拟DOM树的差异（diff算法）来确定需要应用哪些节点和属性的更改，尽可能少对DOM进行操作并提高性能。
  4. 将更新（添加、删除、修改）应该用的实际DOM树中，更新UI。

注意：React并没有直接修改实际的DOM节点，而是先创建一个新的虚拟DOM树，检查差异后再更新实际DOM树。

组件

类组件

特性:

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

函数组件

  • 没有生命周期
  • 借助hook
  • return JSX

二者对比

  • 函数式组件相比于类组件代码量减少
  • 函数式组件没有复杂的生命周期
  • 函数式支持自定义hook,逻辑复用方便

信息传递

react中父组件给子组件传参数,可以直接通过props传递; 子组件给父组件传参,可以通过父组件传递函数类型的props到子组件,在子组件中调用该函数并将需要传递的参数作为函数的参数

//父组件
class ParentComponent extends Reac.Component{
    handleChildCallback=(value)=>{
        console.log(value)
    }
    render(){
        return(
            <ChildComponent onChildCallback={this.handleChildCallback}
        )
    }
}

//子组件
class ChildComponent extends React.Component {
  handleClick = (value) => {
    // 假设参数为 value
    this.props.onChildCallback(value);
  }

  render() {
    return (
      <button onClick={()=>this.handleClick(data)}>Click me</button>
    );
  }
}

信息传递还可以使用消息的发布与订阅机制,通过使用React的Context API实现

  1. 创建一个Context对象:
    • const MyContext = React.createContext();
  2. 提供一个Provider组件:通过Context对象的Provider组件向后代组件提供共享数据 
     class MyComponent extends React.Component {
   render() {
     return (
       <MyContext.Provider value={this.props.value}>
         {this.props.children}
       </MyContext.Provider>
     );
   }
 }
  3. 消费Context数据
class MyChildComponent extends React.Component {
  static contextType = MyContext;

  render() {
    const value = this.context; // 获取共享数据

    return (
      <div>{value}</div>
    );
  }
}

使用Context API需要注意性能问题,确保数据不要频繁变化

还可以使用状态管理工具Redux(Redux部分等后期复习整理完再发出来,感觉这部分还是亿点复杂,需要好好捋顺思路才能更好的掌握与使用)

参考文档 react.docschina.org/

avatar
文章
阅读
粉丝