当以下情况为真时，我需要确保输入元素被聚焦：
问题：我是否需要将我的代码放在两者中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();
}
您必须同时使用两者。
componentDidMount() 在组件安装后立即调用。需要 DOM 节点的初始化应该在这里进行。如果您需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。
componentDidUpdate() 在更新发生后立即调用。初始渲染不会调用此方法。
您也可以将它放入render()似乎适合您的情况的方法中，因为您总是想检查焦点。然后，你不必把它放入componentDidMount()和componentDidUpdate()
您的每个条件都要求您将代码分别放在 1 个函数中：
componentDidMountcomponentDidUpdate所以你必须把这两个函数都放在里面。
另一种选择是调用setState()inside componentDidMount，以便componentDidUpdate调用它。
组件DidMount()
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在初始渲染时不会调用（请参阅https://reactjs.org/docs/react-component.html#componentdidupdate），因此您可能必须像示例中那样调用它两次。