“React中的DOM操作”笔记
React中的每一个组件都是一个状态机，通常情况下，我们通过设置组件的状态就可以完成UI的更新，但是在某些情况下确实需要直接操作DOM。
React中操作DOM的方法：
Refs
findDOMNode()
findDOMNode()
当组件加载到页面上之后（mounted），你就可以通过 getDOMNode() 方法拿到组件对应的 DOM 元素。
React.findDOMNode()只在mounted组件中调用，mounted组件就是已经渲染在浏览器DOM结构中的组件。如果你在组件的render()方法中调用React.findDOMNode()就会抛出异常。
Refs
通过在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称，然后通过 this.refs.name 来访问对应的 DOM 元素。
比如有一种情况是必须直接操作 DOM 来实现的，你希望一个 元素在你清空它的值时 focus，你没法仅仅靠 state 来实现这个功能。
class App extends Component {
constructor() {
return { userInput: '' };
}
handleChange(e) {
this.setState({ userInput: e.target.value });
}
clearAndFocusInput() {
this.setState({ userInput: '' }, () => {
this.refs.theInput.focus();
});
}
render() {
return (
Click to Focus and Reset);}
}
如果ref 是设置在原生 HTML 元素上，它拿到的就是 DOM 元素，如果设置在自定义组件上，它拿到的就是组件实例，这时候就需要通过 findDOMNode来拿到组件的 DOM 元素。
因为无状态组件没有实例，所以 ref 不能设置在无状态组件上，一般来说这没什么问题，因为无状态组件没有实例方法，不需要 ref 去拿实例调用相关的方法，但是如果想要拿无状态组件的 DOM 元素的时候，就需要用一个状态组件封装一层，然后通过 ref 和 findDOMNode 去获取。
关键字：JavaScript, react.js, dom, 组件
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
