小编Leo*_*ant的帖子

我一直在使用异步等待我的ReactJS项目中的babel.我发现使用React setState很方便,我想更好地理解.考虑以下代码:

handleChange = (e) => {
  this.setState({[e.target.name]: e.target.value})
  console.log('synchronous code')
}

changeAndValidate = async (e) => {
  await this.handleChange(e)
  console.log('asynchronous validation code')
}

componentDidUpdate() {
  console.log('updated component')    
}

我的目的是在组件更新后运行异步验证代码.它的工作原理!生成的控制台日志显示:

synchronous code
updated component
asynchronous validation code

验证代码仅在handleChange更新状态并呈现新状态后运行.

通常在状态更新后运行代码,您必须在this.setState之后使用回调.这意味着如果你想在handleChange之后运行任何东西,你必须给它一个回调参数,然后传递给setState.不漂亮.但是在代码示例中,await知道在状态更新后,handleChange已经完成了...但我认为await只适用于promises并等待承诺在继续之前解决.在handleChange中没有承诺和解决方案......它怎么知道等待什么？

暗示似乎是setState以异步方式运行,并且await以某种方式知道它何时完成.也许setState在内部使用promises？

版本:

反应:"^ 15.4.2"

babel-core:"^ 6.26.0"

babel-preset-env:"^ 1.6.0",

babel-preset-react:"^ 6.24.1",

babel-preset-stage-0:"^ 6.24.1"

babel-plugin-system-import-transformer:"^ 3.1.0",

babel-plugin-transform-decorators-legacy:"^ 1.3.4",

babel-plugin-transform-runtime:"^ 6.23.0"

我知道混合使用 jQuery 和 ReactJS 是不可取的，因为 ReactJS 不知道 jQuery 对 DOM 所做的任何修改。但是，如果您只使用 jQuery 来轻松方便地查询 DOM 和查找节点，而将所有 DOM 编辑留给 ReactJS，那该怎么办？除了 jQuery 是一个大库之外，还有其他缺点吗？

一个示例用例是在下拉菜单组件安装时设置事件侦听器，以检查用户是否单击菜单外的任何位置，以便菜单可以关闭。jQuery.parents()方法是一种非常方便的方法来检查单击目标是否是菜单容器元素的子级。有一种简单的方式来做到这一点ReactJS还是有vanilla JavaScript？

这是此示例的代码示例：

handleClick = e => {
  const element = $(e.target)
  if( !( element.parents('.menu').length || element.hasClass('menu'))) {
    this.setState({ menuOpen: false })
  }
}

componentWillUpdate (nextProps, nextState) {
  if(nextState.menuOpen && !this.state.menuOpen) {
    document.addEventListener('click', this.handleClick, false)
  } else if (!nextState.menuOpen && this.state.menuOpen) {
    document.removeEventListener('click', this.handleClick, false)
  }
}