React Native中如何在类组件的方法内使用Hooks？

Hooks 是 React 专为函数组件设计的特性，绝对不能在类组件的方法中调用——这违反了 Hooks 的核心规则：Hooks 只能在函数组件的顶层作用域，或者以use开头的自定义 Hook 中调用，你收到的错误提示已经明确指出了这一点。

根据你的需求，有两种可行方案：

方案一：将类组件改为函数组件 #

这是最符合 Hooks 设计理念的方式，直接把类组件重构为函数组件，在组件顶层或自定义 Hook 中使用 Hooks：

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

export default function App() {
  const [booleanValue, setBooleanValue] = useState(false);

  // 封装原checkdata_db的逻辑
  const checkdataDb = () => {
    // 注意：useEffect不能直接在普通函数内调用，需调整到组件顶层
    useEffect(() => {
      setBooleanValue(true);
      console.log(booleanValue); // 这里先输出false，因为state更新是异步的
    }, []);
  };

  // 在组件挂载时触发逻辑
  useEffect(() => {
    checkdataDb();
  }, []);

  return <div>当前状态：{booleanValue.toString()}</div>;
}

如果想把逻辑封装为可复用的自定义 Hook，写法如下：

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

// 自定义Hook必须以use开头
function useCheckDataDb() {
  const [booleanValue, setBooleanValue] = useState(false);

  useEffect(() => {
    setBooleanValue(true);
    console.log(booleanValue);
  }, []);

  return booleanValue;
}

export default function App() {
  const booleanValue = useCheckDataDb();

  return <div>当前状态：{booleanValue.toString()}</div>;
}

方案二：保留类组件，改用类组件原生特性 #

如果你不想重构为函数组件，可以用类组件原生的state和生命周期方法替代 Hooks：

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    booleanValue: false
  };

  checkdataDb = () => {
    // 类组件中用setState更新状态，在回调中获取更新后的值
    this.setState({ booleanValue: true }, () => {
      console.log(this.state.booleanValue);
    });
  };

  // 类组件的componentDidMount对应useEffect的空依赖数组
  componentDidMount() {
    this.checkdataDb();
  }

  render() {
    return <div>当前状态：{this.state.booleanValue.toString()}</div>;
  }
}

• 永远不要在类组件、类的方法、条件判断、循环或嵌套函数中调用 Hooks，必须严格遵守 Hooks 的调用规则。
• 类组件和函数组件是 React 两种独立的组件范式，不能混用 Hooks 和类组件的实例方法。

内容的提问来源于stack exchange，提问作者Elly