Question

我需要确保在满足以下条件时聚焦输入元素：

DOM可用且
属性已更改

问题：我是否需要将我的代码放在componentDidUpdate和componentDidMount中，或仅componentDidUpdate就足够了？

    private makeSureInputElementFocused() {
        if (this.props.shouldGetInputElementFocused && this.inputElement !== null) {
            this.inputElement.focus();
        }

    }

    componentDidMount() {
        this.makeSureInputElementFocused(); // <-- do i need this?
    }
    componentDidUpdate() {
        this.makeSureInputElementFocused();
    }

Answer 1

你必须同时使用两者。

Results

装载组件后立即调用
componentDidMount（）。需要DOM节点的初始化应该放在这里。如果需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。

componentDidMount()

在更新发生后立即调用componentDidUpdate（）。 不会为初始渲染调用此方法。

您也可以将它放入render()方法中，这似乎适合您的情况，因为您总是想要检查焦点。然后，您无需将其放入componentDidMount()和componentDidUpdate()

Answer 2

您的每个条件都要求您将代码分别放在1个函数中：

DOM可用且 - componentDidMount
属性已更改 - componentDidUpdate

所以你必须把两个功能放在里面另一种方法是在setState()内拨打componentDidMount，以便调用componentDidUpdate。

Answer 3

在初始渲染时不会调用

componentDidUpdate（请参阅https://reactjs.org/docs/react-component.html#componentdidupdate），因此您可能必须在示例中调用它两次。

Answer 4

在React v16.7.0-alpha中，您可以使用SQL As Understood By SQlite - SQLite Keywords钩子：

import React, { useEffect, useRef } from "react";

function InputField() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  });

  return <input ref={inputRef} />;
}

来自useEffect：

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

docs

Answer 5

componentDidMount（）

componentDidMount（）将在安装组件后立即呈现。此方法将仅渲染一次，并且所有需要DOM节点的初始化都应在此处进行。在此方法中设置状态会触发重新渲染。

componentDidUpdate（）

每次发生更新时，都会立即调用

componentDidUpdate（）。初始渲染不会调用此方法。

您可以从下面的示例中了解更多信息

import React from 'react';

class Example extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  componentDidMount() {

    //This function will call on initial rendering.
    document.title = `You clicked ${this.state.count} times`;

  }
  componentDidUpdate() {
     document.title = `You clicked ${this.state.count} times`;
   }

  render(){
    return(
      <div>
      <p>You clicked {this.state.count} times</p>
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Click me
      </button>
    </div>
    )
  }
}
export default Example;

您可以通过注释和取消注释这两种方法来理解。

componentDidUpdate与componentDidMount

5 个答案: