Question

我的网站正在使用 react-bootstrap 来管理导航。

const Panes = (props) => (
    <Tabs className="pane" defaultActiveKey="construction" transition={false}>
        <Tab eventKey="home" title="Home">
            <Home username={props.username} password={props.password} />
        </Tab>
        <Tab eventKey="positions" title="Positions">
            <Positions />
        </Tab>
        <Tab eventKey="trades" title="Trade History">
            <Trades />
        </Tab>
        <Tab eventKey="construction" title="Portfolio Construction">
            <Construction username={props.username} />
        </Tab>
        <Tab eventKey="risk" title="Risk Analytics">
            <Risk />
        </Tab>
      </Tabs>

在 <Positions /> 组件中，我有一个简单的 useEffect(() => {console.log("THIS IS A TEST")}, [])

为什么在我点击位置选项卡之前，我会在控制台中看到“这是一个测试”？该选项卡似乎尚未呈现？我对钩子应该如何工作有什么误解吗？

我的最终目标是仅在用户导航到此 Positions 页面后才获取数据。我如何实现这一目标？

编辑：我通过设置 unmountOnExit={true} 来处理事情。这一次仅呈现一个选项卡。但理想情况下，我想在第一次切换到该选项卡时进行渲染。我以为这就是 mountOnEnter={true} 会做的，但没有用？

Answer 1

在 React 文档中，他们对此进行了解释。

如果您熟悉 React 类的生命周期方法，您可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

https://reactjs.org/docs/hooks-effect.html

它基本上在第一次渲染时运行，如果你不给它一个依赖数组，它将在每次渲染时运行（每当状态改变时）。

如果你只想获取一次数据，你应该像这样使用它：

useEffect(() => {
//fetch data
},[])

如果你想让它在每次值改变时运行，你应该像这样使用它：

useEffect(() => {
//fetch data
},[value])

为什么在渲染组件之前触发 useEffect()？

1 个答案: