React

React是一个由Facebook开发的用于构建用户界面的Javascript库。它采用组件化开发模式，通过虚拟DOM技术实现高效渲染。React具有声明式编程、单向数据流等特点，支持服务端渲染，广泛应用于现代Web应用开发。

声明式编程体现为：

只需要通过JSX/TSX声明组件的状态和结构，React负责根据数据变化自动更新界面。当状态改变时，React会重新渲染组件，不需要用户手动操作DOM元素，只需要关注“界面应该是什么状态”即可。

单向数据流体现为：

React采用单向数据流模式，即数据只能从父组件流向子组件，不能从子组件流向父组件。子组件不能直接修改接收到的props，只能通过父组件传递的回调函数“请求”父组件更新其状态。这种设计使得组件之间的状态管理更加简单和可预测，避免了复杂的状态传递和同步问题。

React本身不提供类似于Vue中的v-model自动双向绑定机制。

组件

React组件可以分为两种类型：函数组件和类组件。

函数组件是一个接受props作为参数并返回一个React元素的函数。它们通常用于简单的、无状态的组件。

类组件是一个继承自React.Component的类，它包含一个render方法，用于返回组件的React元素。类组件通常用于复杂的、有状态的组件。

一些区别：

状态管理不同：函数组件没有自己的状态和生命周期方法，而类组件具有自己的状态和生命周期方法。
更新控制不同：类组件可以使用一些特殊的方法来控制组件的更新过程，而函数组件则无法使用这些方法。

组件复用

1.props: 通过props将数据和回调函数传递给子组件

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

2.高阶组件(HOC)

function withGreeting(WrappedComponent) {
  return function(props) {
    return (
      <>
        <Greeting name={props.name} />
        <WrappedComponent {...props} />
      </>
    );
  };
}

3.Render props

function Greeting(props) {
  return props.children("Hello");
}

function App() {
  return (
    <Greeting>
      {greeting => (
        <>
          <h1>{greeting}, World</h1>
          <h2>{greeting}, React</h2>
        </>
      )}
    </Greeting>
  );
}

useMemo和useCallback

useMemo和useCallback都是React提供的用于优化性能的Hook函数。

useMemo用于缓存计算结果，避免重复计算。
useCallback用于缓存回调函数，避免重复创建。

这两个Hook函数都接受一个回调函数作为参数，返回一个缓存的值或函数。

区别：

useMemo返回缓存的值，而useCallback返回缓存的函数。
useMemo在依赖项发生变化时重新计算缓存值，而useCallback在依赖项发生变化时重新创建缓存函数。

React ​

组件 ​

组件复用 ​

1.props: 通过props将数据和回调函数传递给子组件 ​

2.高阶组件(HOC) ​

3.Render props ​