Question

直接将clickListener添加到组件

<Grid onClick={this.state.event}/>

设置参考，然后添加clickListener

componentDidMount() {
    ReactDOM.findDOMNode(this.refs.grid).addEventListener('click', this.state.event);
}

componentWillUnmount() {
    ReactDOM.findDOMNode(this.refs.grid).removeEventListener('click', this.state.event);
}

<Grid fluid ref="grid"/>

Answer 1

请检查React文档

参考：https://reactjs.org/docs/refs-and-the-dom.html

综合事件：https://reactjs.org/docs/events.html

通过引用，您可以使用具有特定于浏览器的事件数据的所谓不受控制的组件。您应该谨慎使用refs，因为您直接使用DOM元素，这可能会导致与React组件的生命周期结合使用的副作用。使用引用的一些示例可能包括处理焦点，文本选择，自定义格式和光标在表单输入中的位置，非反应式第三方库的集成等。通常像redux-form这样的库都大量使用引用。

React与onClick（受控组件）的方式提供了跨浏览器的综合事件数据。 React足够聪明，它仅使用单个事件数据实例来节省内存。建议使用受控组件，以使React能够完全控制您的组件，以避免意外行为，除非明确需要引用。如果您开发了一些库来处理表单元素，那么使用refs就是您的习惯。

Answer 2

字符串引用在反应16.3中已弃用，并且引用主要用于管理自定义组件以及管理诸如焦点和选择之类的事件。引用的使用只是一种逃逸机制，因为它没有遵循常规的父子层次结构流程。此外，除非您仅访问Dom元素，否则ref不适用于功能组件。

在react中阅读请勿滥用引用博客： https://reactjs.org/docs/refs-and-the-dom.html

为子组件维护单一真相来源： https://reactjs.org/docs/lifting-state-up.html

“ onClick”和获取引用以在React中添加clickListener之间有什么区别？

2 个答案: