响应式系统是一种用于构建用户界面的编程模型，它可以自动追踪数据的变化并更新相关的界面部分。React是一个流行的JavaScript库，它采用了响应式系统的概念来构建用户界面。
响应式系统的特点：
- 声明式编程：响应式系统鼓励使用声明式编程风格，通过描述期望的结果而不是详细的步骤来构建界面。这使得代码更易于理解和维护。
- 组件化：响应式系统将界面拆分为独立的组件，每个组件负责管理自己的状态和渲染逻辑。这样可以提高代码的可重用性和可测试性。
- 虚拟DOM：响应式系统使用虚拟DOM来跟踪界面的状态变化。虚拟DOM是一个轻量级的内存中表示，它可以高效地计算出需要更新的最小DOM操作，从而减少了对实际DOM的操作次数，提高了性能。
- 数据驱动：响应式系统通过将数据与界面进行绑定，使得界面能够自动响应数据的变化。当数据发生变化时，系统会自动更新相关的界面部分，保持界面与数据的同步。
React的特点：
- 组件化开发：React将界面拆分为独立的组件，每个组件都有自己的状态和渲染逻辑。这使得代码更易于组织、重用和测试。
- 虚拟DOM：React使用虚拟DOM来跟踪界面的状态变化。它通过比较前后两个虚拟DOM树的差异，然后只更新需要变化的部分，从而提高了性能。
创建虚拟dom的方式
- 使用原生js的方式去写
- 使用jsx语法创建
关于创建的虚拟dom
- 本质上其实就是一个object对象；
- 虚拟dom上的属性比较少，真实dom属性多，因为虚拟dom只在recat内部使用，用不到那么多的属性
- 虚拟dom最终会被react转换成真实dom，呈现再页面上
- 单向数据流：React采用了单向数据流的模式，数据从父组件向子组件传递，子组件通过props接收数据并渲染界面。这种模式使得数据流清晰可追踪，减少了状态管理的复杂性。
- 生命周期方法：React提供了一系列生命周期方法，允许开发者在组件的不同阶段执行特定的操作。这些方法可以用于处理组件的初始化、更新和销毁等情况。
- Hooks：React引入了Hooks，它是一种函数式的编程方式，可以在函数组件中使用状态和其他React特性。Hooks使得组件逻辑更易于编写、理解和测试。
JSX语法
- 定义虚拟dom时不要用引号
- 标签中引入js表达式要用{}
- 如果在jsx要写行内样式需要使用style={{coler：red}}形式
- 样式的类名指定不能写class，要写className;
- 只有一个根标签
- 标签必须闭合
- 标签首字母
- 若小写字母开头，则会将该标签转为html同名标签，如果没找到，则会报错；
- 若大写字母开头，则会认为是组件，它就会去找对应的组件，如果没找到，就会报组件未定义的错误；
组件实例对象的三大属性
1、 state
- state是组件实例对象最重要的属性，必须是对象的形式
- 组件被称为状态机，通过更改state的值来达到更新页面显示（重新渲染组件）
- 组件render中的this指的是组件实例对象
- 状态数据不能直接赋值，需要用setState（）
组件自定义方法中的this为undefined，怎么解决？
- 将自定义函数改为表达式+箭头函数的形式（推荐）
- 在构造器中用bind（）强制绑定this
2、 props
- 每个组件都会有props属性
- 组件标签的所有属性都保存在props
- 组件内部不能改变外部传进来的props属性值
3、 refs属性
小结
React是一个基于响应式系统的库，它通过组件化开发、虚拟DOM、单向数据流和生命周期方法等特性，使得构建用户界面更加简单、高效和可维护。它在前端开发中得到了广泛的应用，并且有着庞大的社区和生态系统支持。
