写在前面

React是一种JavaScript库，用于构建用户界面。React采用组件化开发的思想，将UI拆分为独立的可重用组件，使得代码易于维护和扩展。

react特点

声明式
组件化
跨平台编写

React的一些基本概念：

组件： React将UI拆分为组件，每个组件都是独立的、可重用的，由JSX语法描述。
状态：组件的状态是指组件在运行时保存的数据，React使用状态管理组件的内部数据。
属性：组件可以使用属性来接收来自父组件的数据，属性是只读的。
生命周期：React组件有生命周期方法，用于控制组件的创建、更新和销毁等过程。

React更新流程

组件状态（state）或属性（props）发生变化，React 会自动调用组件的 render() 方法重新渲染组件。
React 会比较新旧两次渲染的虚拟 DOM 树，找出差异（Diff 算法）。
根据差异，React 会对实际的 DOM 进行最小化的修改，使其与新的虚拟 DOM 树保持一致。
如果组件被更新了，React 会触发组件的生命周期方法，其中包括 componentDidUpdate()。
组件的子组件也会根据需要被重新渲染，从而形成更新的整个过程。

react class 组件

继承+构造函数
this
生命周期
render方法 React中的render()方法是类组件的一个必需方法，它负责根据组件的状态和属性返回一个React元素或者一组React元素。

在调用render()方法时，React会根据组件当前的状态和属性生成一个虚拟DOM树。然后React将比较这个虚拟DOM树和上一次渲染生成的虚拟DOM树，找出两者之间的差异，最后只对需要更新的部分进行重新渲染。 import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello, world!' };
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}
export default MyComponent;

函数类组件

函数式组件
借助hook
return JSX

hook规则

只能在react函数中调用
过期闭包问题

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