React-到hook之前的过渡技术

在React中，"到hook之前"指的是React发展的早期，主要是React 16.7之前，hooks是React 16.8及其后续版本中的新功能。在这个时间点上，React主要使用高阶组件(Higher-Order Components, HOC)、Render props和类组件来处理状态和逻辑。

如果你需要从HOC或类组件转换到函数组件（即hook），可以使用React提供的useState和useEffect等hook来代替类组件中的state、生命周期函数等。

以下是一个简单的例子，展示如何将一个类组件转换为函数组件（使用hook）：

类组件示例：

import React from 'react';
 
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
    );
  }
 
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
 
  tick() {
    this.setState({
      date: new Date()
    });
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

函数组件示例（使用hook）：

import React, { useState, useEffect } from 'react';
 
function Clock() {
  const [date, setDate] = useState(new Date());
 
  useEffect(() => {
    const timerID = setInterval(
      () => setDate(new Date()),
    );
    return () => clearInterval(timerID);
  }, []); // 空数组[]意味着effect只在组件挂载时运行一次
 
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

在这个例子中，Clock函数组件使用了useState来代替类组件中的this.state，使用useEffect来代替componentDidMount和componentWillUnmount。这是React hooks的基本用法。