时间戳

首页 > 解决方案 > 在不是 React.component 扩展类的 React Component 中调用 componentDidMount()

javascript - 在不是 React.component 扩展类的 React Component 中调用 componentDidMount()

问题描述

我有一个反应组件，我稍后会在我的 index.js 中渲染它

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

应用程序.jsx

import SomeComponent from "./Components/SomeComponent ";

function App() {
    return <SomeComponent />
}

export default App;

SomeComponent.jsx（仅用于示例的组件的随机名称）

function SomeComponent() {

  //some code

  return ...

}

export default SomeComponent;

问题是我看到很多人在使用

class SomeComponent extends React.Component {

  componentDidMount()
  //some code

  render() {
    return ...
  }
}

而且我想使用我在很多代码示例中看到的“componentDidMount()”，但以我的做事方式，这似乎是不可能的。

但是……这可能吗？还是我可以使用另一种类似的方法？

谢谢。

标签： javascriptreactjsreact-native

解决方案

在功能组件中，React 16.8,我们有React Hooks。我们可以使用useEffect()Hook 来模拟componentDidMount()在基于类的组件中所做的事情。但是，您需要将第二个参数作为状态值传递给useEffect()，然后它的行为就像componentDidMount()状态值被修改时一样。

像这样的东西：

const [stateValue,useStateValue] = useState("enjoy");

useEffect(()=>{
 // ... Your code
},[stateValue]);

推荐阅读