React学习笔记—虚拟DOM
React对底层的代码作了封装,在大多数情况下,我们不需要直接去操作DOM。但是有时候我们还是需要使用到底层的代码的,比如输入框获取焦点,这个时候可以通过第三方的类库或者React提供的API实现。 虚拟DOMReact之所以快,是因为它不直接操作DOM。React将DOM结构存储在内存中,然后同render()的返回内容进行比较,计算出需要改动的地方,最后才反映到DOM中。 Refs和findDOMNode()为了同浏览器交互,我们有时候需要获取到真实的DOM节点。我们可以通过调用React的React.findDOMNode(component)获取到组件中真实的DOM。
看官方的示例: var MyComponent = React.createClass({ handleClick: function() { // Explicitly focus the text input using the raw DOM API. React.findDOMNode(this.refs.myTextInput).focus(); },render: function() { // The ref attribute adds a reference to the component to // this.refs when the component is mounted. return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }); React.render( <MyComponent />,document.getElementById('example') ); 组件的生命周期组件的生命周期主要由三个部分组成:
React提供了方法,让我们在组件状态更新的时候调用,will标识状态开始之前,did表示状态完成后。例如componentWillMount就表示组件被插入DOM之前。 Mounting
Updating
Unmounting
Mounted Methods
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |