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

MercyCHEN
96 阅读4分钟

前言
记录青训营前端专场的学习过程，有不足的地方还请大佬指正。
由于本人基础比较薄弱，所以笔记尽可能的详细。

该文章开始的版本将以简述课程知识点为主，等后面实践有自己的理解后会编辑添加自己的理解

简述React：react是用于构建用户界面的javascript库

截屏2023-05-15 21.03.26.png

  • scheduler：Scheduler 是 React 的调度模块，它负责协调和安排组件的更新。它决定何时启动组件的更新，以及以何种顺序和优先级执行更新。 Scheduler 使用一种称为协作式调度（Cooperative Scheduling）的方式来管理任务的调度，确保页面的渲染不会阻塞或影响用户的交互。通过 Scheduler，React 能够在合适的时机进行组件的更新，以提供更好的用户体验。
  • Reconciler：Reconciler 是 React 的核心算法模块，它负责处理组件的协调（Reconciliation）。当组件需要进行更新时，Reconciler 根据前后两次渲染的虚拟 DOM 树的差异，计算出需要进行的具体更新操作，并将这些操作应用到真实的 DOM 上。 Reconciler 使用了一些算法和优化策略，如基于 Fiber 的异步渲染和调度，以实现高效的组件更新和渲染。
  • Render：Render 是 React 的渲染模块，它负责将组件的虚拟 DOM 树转换为真实的 DOM 并呈现到页面上。Render 接收到 Reconciler 提供的更新操作后，将更新应用到真实 DOM 上，实现组件的重新渲染。Render 会对更新进行批处理，通过一些优化手段，如批量更新和异步更新，减少不必要的 DOM 操作，提高渲染性能。

React组件

class类组件

import React from 'react';

// 需要基础React.Component类
class MyClassComponent extends React.Component {
  // 需要定义构造函数，用于初始化组件的状态
  constructor(props) {
    super(props);
    // 初始化状态
    this.state = {
      count: 0,
    };
  }

  // 组件挂载后执行的操作
  componentDidMount() {
    console.log('Component mounted');
  }

  // 组件更新后执行的操作
  componentDidUpdate(prevProps, prevState) {
    console.log('Component updated');
  }

  // 组件卸载前执行的操作
  componentWillUnmount() {
    console.log('Component will unmount');
  }

  // 处理点击事件
  handleClick() {
    // 更新状态，触发重新渲染
    this.setState({ count: this.state.count + 1 });
  }

  // 渲染组件
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick.bind(this)}>Increment</button>
      </div>
    );
  }
}

export default MyClassComponent;

函数式组件

import React, { useState, useEffect } from 'react';

// 函数式组件
function MyComponent(props) {
  // 使用 useState 钩子函数创建状态
  const [count, setCount] = useState(0);

  // 使用 useEffect 钩子函数实现副作用
  useEffect(() => {
    // 组件挂载后和每次更新后都会执行此函数
    document.title = `Count: ${count}`;

    // 组件即将卸载时执行清理操作的函数
    return () => {
      document.title = 'React App'; // 恢复原始标题
    };
  }, [count]); // 传入 count 作为依赖，只有当 count 改变时才触发副作用函数

  // 渲染 JSX
  return (
    <div>
      <h1>My Component</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

Hook

规则：

  1. 只能在函数式组件的顶层调用 Hooks，不要在循环、条件语句或嵌套函数中使用。
  2. Hooks 的调用顺序必须保持一致，不能在条件语句中改变调用顺序。
  3. 自定义的 Hook 必须以 use 开头，这是为了明确标识其为一个 Hook。

原理：

  1. Hooks 是一些预定义的函数，如 useState、useEffect 等，它们是由 React 提供的。
  2. 每个 Hook 都对应一个特定的功能，例如 useState 用于管理组件的状态，useEffect 用于处理副作用等。
  3. Hooks 使用了闭包机制，使得组件在不同渲染周期中可以访问到相同的状态和副作用。
  4. 当组件调用一个 Hook，React 会在内部维护一个 Hooks 链表，用于追踪组件的状态和副作用。
  5. Hooks 链表会在组件的每次渲染过程中被遍历，确保正确地执行对应的 Hook 函数。
  6. Hooks 的值和状态是与组件实例一一对应的，而不是共享的。每个组件实例都有自己独立的状态。
import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 这里的回调函数会在组件渲染后执行
    console.log('组件已渲染');

    // 清除函数会在组件销毁时执行
    return () => {
      console.log('组件已卸载');
    };
  }, []);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>计数器</h2>
      <p>当前计数：{count}</p>
      <button onClick={increment}>增加</button>
    </div>
  );
};

export default MyComponent;

在这个代码示例中，我们使用了 useState Hook 来创建了一个名为 count 的状态变量，并使用 setCount 函数来更新该状态。每次点击按钮时，increment 函数会将计数器增加 1。

同时，我们使用了 useEffect Hook 来处理副作用。在这个例子中，我们传递了一个空数组作为第二个参数，表示该副作用只在组件首次渲染时执行。在 useEffect 的回调函数中，我们打印了一条信息，同时返回了一个清除函数，用于在组件销毁时执行一些清理操作。

这是一个简单的函数式组件，展示了使用 Hooks 来管理状态和处理副作用的基本用法。

avatar
文章
阅读
粉丝