使用jquery表情符号插件时，componentDidMount的行为与useEffect不同

Question

我在我的一个组件上使用jquery表情符号插件，直到我完成了我正在构建的自定义插件。

出于某种原因，当我在 componentDidMount 中调用表情符号插件时，除了能够利用自定义按钮显示表情符号模态之外，一切都可以正常工作。当我使用自定义按钮时，表情符号插件不会将事件附加到按钮。

疯狂的是，我可以在useEffect中使用相同的完全相同的代码，并且它将事件侦听器很好地附加到自定义按钮。

我在加载页面后，通过在 Web 控制台中查看附加到元素的事件来验证事件侦听器未附加。

您可以通过将此组件放置在应用程序中的某个位置(并使用表情符号区域插件导入 jquery(来轻松重现此问题：

import React, {useEffect} from 'react';
export default function CommentInput(props) {
useEffect(() => {
const id = props.blurtId,
$wysiwyg = $('#' + id).emojiarea({
button: '#emoji-btn' + id
});

$.emojiarea.path = '/js/jquery/emojis/';
$.emojiarea.icons = {
':smile:'     : 'smile.png',
':angry:'     : 'angry.png',
':flushed:'   : 'flushed.png',
':neckbeard:' : 'neckbeard.png',
':laughing:'  : 'laughing.png'
};
}, []); 
return (
<>
<textarea id={props.blurtId} className='blurt-comment-input' />
<i id={'emoji-btn' + props.blurtId} className='fa fa-smile emoji-btn' />  
</>
)
}

只需将其更改为类组件，您将看到在 componentDidMount 中，除了自定义按钮之外，一切都有效。知道什么会导致这种行为变化吗？

这是反应类组件版本：

import React, {Component} from 'react';
class CommentInput extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
const id = this.props.blurtId,
$wysiwyg = $('#' + id).emojiarea({
button: '#emoji-btn' + id
});

$.emojiarea.path = '/js/jquery/emojis/';
$.emojiarea.icons = {
':smile:'     : 'smile.png',
':angry:'     : 'angry.png',
':flushed:'   : 'flushed.png',
':neckbeard:' : 'neckbeard.png',
':laughing:'  : 'laughing.png'
};
}; 
render() {
return (
<>
<textarea id={this.props.blurtId} className='blurt-comment-input' />
<i id={'emoji-btn' + this.props.blurtId} className='fa fa-smile emoji-btn' />  
</>
)
}
}
export default CommentInput;

Answer 1

componentDidMount

和useEffect火灾的时间是有区别的。

来自 useEffect 文档 ：

与 componentDidMount 和 componentDidUpdate 不同，该函数传递了 使用布局和绘画后的效果触发

Answer 2

componentDidMount和useEffect之间的最大区别在于useEffect在每次渲染后运行，而不仅仅是第一次渲染。由于您的render在每次渲染时都会输出一个新元素，因此在第一次渲染之后，您附加表情符号的 DOM 元素不再存在，而具有相同 ID 的新元素则存在。

选项：

• 使用componentDidUpdate处理后续渲染。(第一个仍然需要componentDidMount。
• 使用回调引用。